docker
/
docs
mirror of https://github.com/docker/docs.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Modal styles.

This commit is contained in:
Sean Li 2015-01-23 13:48:46 -08:00
parent 003b4d02c7
commit d921e62349
5 changed files with 59 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/ContainerDetails.react.js
View File

@ -171,17 +171,17 @@ var ContainerDetails = React.createClass({
</div>
<div className="details-actions">
<div className="action btn-group">
<a className="btn btn-action" onClick={this.handleClick}><span className="icon icon-preview-2"></span> View</a>
<a className="btn btn-action dropdown-toggle"><span className="icon-dropdown icon icon-arrow-37"></span></a>
<a className="btn btn-action with-icon" onClick={this.handleClick}><span className="icon icon-preview-2"></span> View</a>
<a className="btn btn-action with-icon dropdown-toggle"><span className="icon-dropdown icon icon-arrow-37"></span></a>
</div>
<div className="action">
<a className="btn btn-action dropdown-toggle" onClick={this.handleClick}><span className="icon icon-folder-1"></span> Volume <span className="icon-dropdown icon icon-arrow-37"></span></a>
<a className="btn btn-action with-icon dropdown-toggle" onClick={this.handleClick}><span className="icon icon-folder-1"></span> Volume <span className="icon-dropdown icon icon-arrow-37"></span></a>
</div>
<div className="action">
<a className="btn btn-action" onClick={this.handleClick}><span className="icon icon-refresh"></span> Restart</a>
<a className="btn btn-action with-icon" onClick={this.handleClick}><span className="icon icon-refresh"></span> Restart</a>
</div>
<div className="action">
<a className="btn btn-action" onClick={this.handleClick}><span className="icon icon-window-code-3"></span> Terminal</a>
<a className="btn btn-action with-icon" onClick={this.handleClick}><span className="icon icon-window-code-3"></span> Terminal</a>
</div>
</div>
<div className="details-tabs">

12
app/ContainerModal.react.js
View File

@ -86,7 +86,10 @@ var ContainerModal = React.createClass({
</div>
</div>
<div className="action">
<button className="btn btn-primary" name={r.name} onClick={self.handleClick}>Create</button>
<div className="btn-group">
<a className="btn btn-action" name={r.name} onClick={self.handleClick}>Create</a>
<a className="btn btn-action with-icon dropdown-toggle"><span className="icon-dropdown icon icon-arrow-37"></span></a>
</div>
</div>
</li>
);
@ -94,9 +97,9 @@ var ContainerModal = React.createClass({
var title;
if (this.state.query) {
title = <div className="title">Results</div>;
title = <h4 className="title">Results</h4>;
} else {
title = <div className="title">Recommended</div>;
title = <h4 className="title">Recommended</h4>;
}
return (
@ -104,6 +107,7 @@ var ContainerModal = React.createClass({
<div className="modal-body">
<section className="search">
<input type="search" ref="searchInput" className="form-control" placeholder="Find an existing image" onChange={this.handleChange}/>
<div className="icon icon-magnifier search-icon"></div>
<div className="question">
<a href="#"><span>What&#39;s an image?</span></a>
</div>
@ -115,7 +119,7 @@ var ContainerModal = React.createClass({
</div>
</section>
<aside className="custom">
<div className="title">Create a Custom Container</div>
<h4 className="title">Create a Custom Container</h4>
</aside>
</div>
</Modal>

12
app/styles/containers.less
View File

@ -14,7 +14,6 @@
margin: 0;
box-sizing: border-box;
border-right: 1px solid #eee;
//padding: 10px 26px 0px 10px;
.sidebar-header {
flex: 0 auto;
@ -221,6 +220,8 @@
flex-direction: row;
padding: 20px 40px 10px 40px;
position: relative;
border-bottom: 1px solid transparent;
transition: border-bottom 0.25s;
.action {
margin-right: 24px;
}
@ -228,6 +229,7 @@
.details-tabs {
.tabs {
z-index: 0;
float: right;
margin-right: 40px;
margin-top: -42px;
@ -282,12 +284,16 @@
.details-logs {
flex: 1;
overflow: auto;
h4 {
margin-top: 30px;
margin-left: 40px;
}
.logs {
user-select: text;
font-family: Menlo;
font-size: 12px;
padding: 44px 45px;
color: #595D5E;
padding: 18px 45px;
color: lighten(@gray-normal, 6%);
white-space: pre-wrap;
p {
margin: 0 6px;

45
app/styles/main.less
View File

@ -55,12 +55,6 @@ html, body {
flex-direction: row;
padding: 32px 32px;
.title {
color: #CCD3D5;
font-weight: 400;
font-size: 13px;
}
aside.custom {
flex: 0 auto;
padding-left: 32px;
@ -73,9 +67,20 @@ html, body {
padding-right: 32px;
border-right: 1px solid #eee;
.search-icon {
font-size: 20px;
color: @gray-normal;
position: absolute;
top: 40px;
left: 45px;
}
.question {
a {
color: #CCD3D5;
color: @gray-lightest;
&:hover {
color: darken(@gray-lightest, 10%);
}
}
font-size: 10px;
text-align: right;
@ -85,13 +90,15 @@ html, body {
border-radius: 20px;
font-size: 13px;
height: 38px;
padding: 8px 16px;
font-weight: 400;
color: #666;
padding: 8px 16px 8px 40px;
font-weight: 300;
color: @gray-darkest;
margin-bottom: 3px;
border-color: lighten(@gray-lighter, 10%);
&:focus {
box-shadow: none;
border-color: #bbb;
border-color: @gray-lighter;
}
&::-webkit-input-placeholder {
@ -108,17 +115,25 @@ html, body {
}
ul {
margin-top: 10px;
list-style: none;
color: #555;
padding: 0;
li {
&:hover {
background-color: lighten(@gray-lightest, 17.5%);
}
display: flex;
flex-direction: row;
margin: 12px;
padding: 8px 14px 5px 14px;
//margin: 12px;
border-bottom: 1px solid #eee;
&:last-child {
border-bottom: 0;
}
.info {
.name {
color: @gray-darkest;
max-width: 278px;
img {
margin-right: 6px;
@ -130,7 +145,7 @@ html, body {
text-overflow: ellipsis;
}
.stars {
color: #A7A7A7;
color: @gray-lighter;
margin-top: 2px;
.star-count {
@ -152,6 +167,8 @@ html, body {
flex: 0 auto;
}
.action {
position: relative;
top: 5px;
text-align: right;
flex: 1 auto;
}

7
app/styles/theme.less
View File

@ -85,14 +85,19 @@ h4 {
box-shadow: none;
font-weight: 400;
text-shadow: none;
padding: 0px 14px 0px 14px;
padding: 6px 14px 6px 14px;
height: 32px;
.icon:before {
width: 20px;
height: 20px;
position: relative;
top: 5px;
font-size: 20px;
margin-right: 4px;
}
&.with-icon {
padding: 0px 14px 6px 14px;
}
&.only-icon {
padding: 0px 5px 10px 5px;
.icon:before {