status-im
/
consul
mirror of https://github.com/status-im/consul.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

ui: more improvements to the style guide

This commit is contained in:
Jack Pearkes 2014-04-22 15:59:35 -04:00
parent 9576830144
commit eb19151fd7
7 changed files with 187 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

132
ui/style-guide.html
View File

@ -30,31 +30,34 @@
<div class="col-md-12">
<div class="row">
<div class="col-md-12 topbar">
<div class="col-md-1">
<div class="top-brand"></div>
<div class="col-md-12 col-sm-12 topbar">
<div class="col-md-1 col-sm-2">
<a href="#"><div class="top-brand"></div></a>
</div>
<div class="col-md-2">
<div class="col-md-2 col-sm-3">
<a class="btn btn-primary" href="#">Services</a>
</div>
<div class="col-md-2">
<div class="col-md-2 col-sm-3">
<a class="btn btn-default" href="#">Nodes</a>
</div>
<div class="col-md-2">
<div class="col-md-2 col-sm-3">
<a class="btn btn-default" href="#">Key/Value</a>
</div>
<div class="col-md-2 col-md-offset-1">
<div class="col-md-2 col-md-offset-1 col-sm-3 col-sm-offset-0">
<a class="btn btn-warning" href="#">5 checks failing</a>
</div>
<div class="col-md-2">
<div class="col-md-2 col-sm-3">
<a class="btn btn-dropdown btn-default" href="#">
Data Center 1
us-east-1
<span class="caret"></span>
</a>
</div>
</div>
</div>
<hr>
</div>
</div>
@ -78,6 +81,7 @@
<div style="width: 75px; height: 75px; display:inline-block" class="bg-orange"></div>
</li>
<li>
<div style="width: 75px; height: 75px; display:inline-block" class="bg-dark-green"></div>
<div style="width: 75px; height: 75px; display:inline-block" class="bg-green"></div>
</li>
<li>
@ -113,14 +117,14 @@
<div class="panel-bar"></div>
<div class="panel-heading">
<h3 class="panel-title">
Panel Title
<small>Panel Subtitle</small>
<span class="panel-note">Panel Note</span>
Default Panel
<small>Subtitle</small>
<span class="panel-note">:8080</span>
</h3>
</div>
<div class="panel-body">
Panel content
Content
</div>
</div>
@ -204,19 +208,109 @@ Socket connect timed out
<div class="col-md-6">
<h2>Loaders</h2>
<hr>
<div class="bg-gray text-center" style="width: 200px; height: 200px; padding: 20px;">
</div>
<p>Pending...</p>
</div>
<div class="col-md-6">
<h2>Icons</h2>
<hr>
<p>This is style guide for Consul. When possible,
it's best to follow this guide modifying the UI.</p>
<p>Pending...</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h2>Buttons</h2>
<hr>
<a href="#" class="btn btn-default">Default button</a>
<a href="#" class="btn btn-primary">Primary button</a>
<a href="#" class="btn btn-success">Success button</a>
<a href="#" class="btn btn-warning">Warning button</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h2>Lists</h2>
<div class="list-group">
<div class="list-group-item">
<div class="list-bar bg-green"></div>
<h4 class="list-group-item-heading">
<a href="#" class="subtle">vagrant-cloud-http</a>
<small>vagrant-cloud-http</small>
<div class="heading-helper">
<a class="subtle" href="#">5 passing</a>
</div>
</h4>
<ul class="list-inline">
<li><a class="subtle" href="#">node-10-0-109</a></li>
<li><a class="subtle" href="#">node-10-0-109</a></li>
<li><a class="subtle" href="#">node-10-0-109</a></li>
<li><a class="subtle" href="#">node-10-0-109</a></li>
</ul>
</div>
<div class="list-group-item">
<div class="list-bar bg-green"></div>
<h4 class="list-group-item-heading">
<a href="#" class="subtle">vagrant-cloud-http</a>
<small>vagrant-cloud-http</small>
<div class="heading-helper">
<a class="subtle" href="#">5 passing</a>
</div>
</h4>
<ul class="list-inline">
<li><a class="subtle" href="#">node-10-0-109</a></li>
<li><a class="subtle" href="#">node-10-0-109</a></li>
<li><a class="subtle" href="#">node-10-0-109</a></li>
<li><a class="subtle" href="#">node-10-0-109</a></li>
</ul>
</div>
<div class="list-group-item">
<div class="list-bar bg-orange"></div>
<h4 class="list-group-item-heading">
<a href="#" class="subtle">vagrant-cloud-http</a>
<small>vagrant-cloud-http</small>
<div class="heading-helper">
<a class="subtle" href="#">1 failing</a>
</div>
</h4>
<ul class="list-inline">
<li><a class="subtle" href="#">node-10-0-109</a></li>
<li><a class="subtle" href="#">node-10-0-109</a></li>
<li><a class="subtle" href="#">node-10-0-109</a></li>
<li><a class="subtle" href="#">node-10-0-109</a></li>
</ul>
</div>
<div class="list-group-item">
<div class="list-bar bg-red"></div>
<h4 class="list-group-item-heading">
<a href="#" class="subtle">vagrant-cloud-http</a>
<small>vagrant-cloud-http</small>
<div class="heading-helper">
<a class="subtle" href="#">2 failing</a>
</div>
</h4>
<ul class="list-inline">
<li><a class="subtle" href="#">node-10-0-109</a></li>
<li><a class="subtle" href="#">node-10-0-109</a></li>
<li><a class="subtle" href="#">node-10-0-109</a></li>
<li><a class="subtle" href="#">node-10-0-109</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</body>

15
ui/styles/_buttons.scss
View File

@ -1,7 +1,7 @@
.btn {
text-transform: uppercase;
font-weight: 600;
font-size: 11px;
font-size: 12px;
color: $gray;
@include transition(background-color .1s ease-in-out);
@ -35,4 +35,17 @@
}
}
&.btn-success {
color: $green-dark;
background-color: transparent;
border: 2px solid $green-dark;
&:hover {
background-color: lighten($green-faded, 24%);
color: darken($green-dark, 10%);
}
}
}

37
ui/styles/_lists.scss Normal file
View File

@ -0,0 +1,37 @@
.list-group-item {
padding: 0;
border-width: 2px;
border-radius: 0px;
.list-group-item-heading, .list-inline {
margin: 10px 15px 10px 15px;
padding: 0px 5px 10px 5px;
}
.list-inline {
padding-left: 0px;
color: $gray;
}
.list-group-item-heading {
border-bottom: 2px solid #eee;
color: $gray-darker;
.heading-helper {
float: right;
font-weight: 600;
color: $gray-light;
font-size: 14px;
}
}
.list-bar {
width: 100%;
height: 20px;
}
&:first-child {
border-top-right-radius: 0px;
border-top-left-radius: 0px;
}
}

10
ui/styles/_nav.scss
View File

@ -1,5 +1,6 @@
.top-brand {
margin-top: 20px;
background: transparent url('/static/consul-logo.png') 0 no-repeat;
background-size: 30px 30px;
width: 30px;
@ -8,14 +9,17 @@
.topbar {
padding: 40px;
height: 100px;
padding: 30px;
min-height: 100px;
border-bottom: 1px #eee solid;
.btn {
width: 140px;
margin-top: 20px;
min-width: 140px;
}
.btn-dropdown {
width: auto;
}
}

12
ui/styles/_type.scss
View File

@ -11,7 +11,15 @@ a {
&:hover {
text-decoration: none;
color: darken($purple, 15%);
color: darken($purple, 10%);
}
&.subtle {
color: inherit;
&:hover {
color: $purple;
}
}
}
@ -21,7 +29,7 @@ small {
}
h1, h2, h3, h4, h5 {
color: darken($text-color, 7%);
color: $gray-darker;
}
h5 {

1
ui/styles/_variables.scss
View File

@ -16,6 +16,7 @@ $purple: #69499a;
$light-purple: #f7f3f9;
$green-faded: #BBF085;
$green-dark: #86B457;
$red-faded: $red;
$white-faded: darken(white, 2%);
$orange-faded: #FFAC5E;

5
ui/styles/base.scss
View File

@ -4,6 +4,7 @@
@import "panels";
@import "nav";
@import "buttons";
@import "lists";
.row {
&.colored {
@ -28,6 +29,10 @@
background-color: $green-faded;
}
.bg-dark-green {
background-color: $green-dark;
}
.bg-red {
background-color: $red-faded;
}