From eb19151fd7125a7382a9b7a2acd8596c934a5b05 Mon Sep 17 00:00:00 2001 From: Jack Pearkes Date: Tue, 22 Apr 2014 15:59:35 -0400 Subject: [PATCH] ui: more improvements to the style guide --- ui/style-guide.html | 132 ++++++++++++++++++++++++++++++++------ ui/styles/_buttons.scss | 15 ++++- ui/styles/_lists.scss | 37 +++++++++++ ui/styles/_nav.scss | 10 ++- ui/styles/_type.scss | 12 +++- ui/styles/_variables.scss | 1 + ui/styles/base.scss | 5 ++ 7 files changed, 187 insertions(+), 25 deletions(-) create mode 100644 ui/styles/_lists.scss diff --git a/ui/style-guide.html b/ui/style-guide.html index d84a1c0b10..a663f0a4a6 100644 --- a/ui/style-guide.html +++ b/ui/style-guide.html @@ -30,31 +30,34 @@
-
-
-
+
+ +
+
-
+ +
Services
-
+
Nodes
-
+
Key/Value
-
+ +
5 checks failing
-
+ +
- Data Center 1 + us-east-1
-
@@ -78,6 +81,7 @@
  • +
  • @@ -113,14 +117,14 @@

    - Panel Title - Panel Subtitle - Panel Note + Default Panel + Subtitle + :8080

    - Panel content + Content
    • @@ -204,19 +208,109 @@ Socket connect timed out

    Loaders

    -
    -
    +

    Pending...

    Icons

    - -

    This is style guide for Consul. When possible, - it's best to follow this guide modifying the UI.

    +

    Pending...

    +
    +
    +

    Buttons

    +
    + Default button + Primary button + Success button + Warning button +
    +
    + +
    + +
    +

    Lists

    + +
    +
    +
    +

    + vagrant-cloud-http + vagrant-cloud-http +
    + 5 passing +
    +

    + +
    + +
    +
    +

    + vagrant-cloud-http + vagrant-cloud-http +
    + 5 passing +
    +

    + +
    + +
    +
    +

    + vagrant-cloud-http + vagrant-cloud-http +
    + 1 failing +
    +

    + +
    + +
    +
    +

    + vagrant-cloud-http + vagrant-cloud-http +
    + 2 failing +
    +

    + +
    +
    + + + +
    + +
    + +
    diff --git a/ui/styles/_buttons.scss b/ui/styles/_buttons.scss index 2cff574704..45654b7594 100644 --- a/ui/styles/_buttons.scss +++ b/ui/styles/_buttons.scss @@ -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%); + } + + } + } diff --git a/ui/styles/_lists.scss b/ui/styles/_lists.scss new file mode 100644 index 0000000000..9435c5424d --- /dev/null +++ b/ui/styles/_lists.scss @@ -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; + } +} diff --git a/ui/styles/_nav.scss b/ui/styles/_nav.scss index 729f50256b..355be343ea 100644 --- a/ui/styles/_nav.scss +++ b/ui/styles/_nav.scss @@ -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; } + } diff --git a/ui/styles/_type.scss b/ui/styles/_type.scss index 2088d8b266..dc8bbba057 100644 --- a/ui/styles/_type.scss +++ b/ui/styles/_type.scss @@ -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 { diff --git a/ui/styles/_variables.scss b/ui/styles/_variables.scss index 4582e0070b..57a633d671 100644 --- a/ui/styles/_variables.scss +++ b/ui/styles/_variables.scss @@ -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; diff --git a/ui/styles/base.scss b/ui/styles/base.scss index 40b54490ae..ddd2169384 100644 --- a/ui/styles/base.scss +++ b/ui/styles/base.scss @@ -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; }