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>
<div className="details-actions"> <div className="details-actions">
<div className="action btn-group"> <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 with-icon" 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 dropdown-toggle"><span className="icon-dropdown icon icon-arrow-37"></span></a>
</div> </div>
<div className="action"> <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>
<div className="action"> <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>
<div className="action"> <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> </div>
<div className="details-tabs"> <div className="details-tabs">

12
app/ContainerModal.react.js
View File

@ -86,7 +86,10 @@ var ContainerModal = React.createClass({
</div> </div>
</div> </div>
<div className="action"> <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> </div>
</li> </li>
); );
@ -94,9 +97,9 @@ var ContainerModal = React.createClass({
var title; var title;
if (this.state.query) { if (this.state.query) {
title = <div className="title">Results</div>; title = <h4 className="title">Results</h4>;
} else { } else {
title = <div className="title">Recommended</div>; title = <h4 className="title">Recommended</h4>;
} }
return ( return (
@ -104,6 +107,7 @@ var ContainerModal = React.createClass({
<div className="modal-body"> <div className="modal-body">
<section className="search"> <section className="search">
<input type="search" ref="searchInput" className="form-control" placeholder="Find an existing image" onChange={this.handleChange}/> <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"> <div className="question">
<a href="#"><span>What&#39;s an image?</span></a> <a href="#"><span>What&#39;s an image?</span></a>
</div> </div>
@ -115,7 +119,7 @@ var ContainerModal = React.createClass({
</div> </div>
</section> </section>
<aside className="custom"> <aside className="custom">
<div className="title">Create a Custom Container</div> <h4 className="title">Create a Custom Container</h4>
</aside> </aside>
</div> </div>
</Modal> </Modal>

12
app/styles/containers.less
View File

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

45
app/styles/main.less
View File

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

7
app/styles/theme.less
View File

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