status-im/consul
2
0
Fork 0
mirror of https://github.com/status-im/consul.git synced 2025-01-11 22:34:55 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #2899 from hashicorp/jbs-ui-color

Browse Source 
UI: use new pink hues for active/primary btns
This commit is contained in:
James Phillips 2017-04-13 14:37:20 -07:00 committed by GitHub
commit e8185182b2
9 changed files with 30 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ui/index.html
View File

@ -98,7 +98,7 @@
<div class="row"> <div class="row">
<div class="col-md-8 col-md-offset-2 col-sm-12 col-xs-12"> <div class="col-md-8 col-md-offset-2 col-sm-12 col-xs-12">
<div class="text-center vertical-center"> <div class="text-center vertical-center">
<img src="static/loading-cylon-purple.svg" width="384" height="48"> <img src="static/loading-cylon-pink.svg" width="384" height="48">
<p><small>Loading...</small></p> <p><small>Loading...</small></p>
</div> </div>
</div> </div>
@ -340,7 +340,7 @@
<div class="row"> <div class="row">
<div class="col-md-8 col-md-offset-2 col-sm-12 col-xs-12"> <div class="col-md-8 col-md-offset-2 col-sm-12 col-xs-12">
<div class="text-center vertical-center"> <div class="text-center vertical-center">
<img src="static/loading-cylon-purple.svg" width="384" height="48"> <img src="static/loading-cylon-pink.svg" width="384" height="48">
<p><small>Loading...</small></p> <p><small>Loading...</small></p>
</div> </div>
</div> </div>

2
ui/static/loading-cylon-purple.svg → ui/static/loading-cylon-pink.svg
View File

@ -1,4 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 14 32 18" width="32" height="4" fill="#9e84c5" preserveAspectRatio="none"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 14 32 18" width="32" height="4" fill="#d68ab2" preserveAspectRatio="none">
<path opacity="0.8" transform="translate(0 0)" d="M2 14 V18 H6 V14z"> <path opacity="0.8" transform="translate(0 0)" d="M2 14 V18 H6 V14z">
<animateTransform attributeName="transform" type="translate" values="0 0; 24 0; 0 0" dur="2s" begin="0" repeatCount="indefinite" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" /> <animateTransform attributeName="transform" type="translate" values="0 0; 24 0; 0 0" dur="2s" begin="0" repeatCount="indefinite" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
</path> </path>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 983 B

After

Width:  |  Height:  |  Size: 983 B

4
ui/style-guide.html
View File

@ -80,8 +80,8 @@
<hr> <hr>
<ul class="list-unstyled"> <ul class="list-unstyled">
<li> <li>
<div style="width: 75px; height: 75px; display:inline-block;" class="bg-purple"></div> <div style="width: 75px; height: 75px; display:inline-block;" class="bg-pink"></div>
<div style="width: 75px; height: 75px; display:inline-block" class="bg-light-purple"></div> <div style="width: 75px; height: 75px; display:inline-block" class="bg-light-pink"></div>
</li> </li>
<li> <li>
<div style="width: 75px; height: 75px; display:inline-block" class="bg-red"></div> <div style="width: 75px; height: 75px; display:inline-block" class="bg-red"></div>

16
ui/styles/_buttons.scss
View File

@ -32,13 +32,13 @@
} }
&.btn-primary { &.btn-primary {
color: $purple-dark; color: $pink-dark;
background-color: transparent; background-color: transparent;
border: 2px solid $purple; border: 2px solid $pink;
&:hover { &:hover {
background-color: $light-purple; background-color: $light-pink;
color: darken($purple, 10%); color: darken($pink, 10%);
} }
} }
@ -78,13 +78,13 @@
&.active { &.active {
color: $purple-dark; color: $pink-dark;
background-color: transparent; background-color: transparent;
border: 2px solid $purple; border: 2px solid $pink;
&:hover { &:hover {
background-color: $light-purple; background-color: $light-pink;
color: darken($purple, 10%); color: darken($pink, 10%);
} }
&.btn-noactive { &.btn-noactive {

4
ui/styles/_lists.scss
View File

@ -115,11 +115,11 @@
&.active { &.active {
@include transition(border-color .1s linear); @include transition(border-color .1s linear);
border-color: $purple; border-color: $pink;
.list-bar, .list-bar-horizontal { .list-bar, .list-bar-horizontal {
@include transition(background-color .1s linear); @include transition(background-color .1s linear);
background-color: $purple; background-color: $pink;
} }
} }

6
ui/styles/_panels.scss
View File

@ -117,15 +117,15 @@
&.active { &.active {
>.panel-heading { >.panel-heading {
border-color: $purple; border-color: $pink;
} }
@include transition(border-color .1s linear); @include transition(border-color .1s linear);
border-color: $purple; border-color: $pink;
.panel-bar { .panel-bar {
@include transition(background-color .1s linear); @include transition(background-color .1s linear);
background-color: $purple; background-color: $pink;
} }
} }
} }

8
ui/styles/_type.scss
View File

@ -5,26 +5,26 @@ body {
} }
a { a {
color: $purple; color: $pink;
font-weight: 600; font-weight: 600;
@include transition(color .2s ease-in-out); @include transition(color .2s ease-in-out);
&:hover { &:hover {
text-decoration: none; text-decoration: none;
color: darken($purple, 10%); color: darken($pink, 10%);
} }
&.subtle { &.subtle {
color: inherit; color: inherit;
&:hover { &:hover {
color: $purple; color: $pink;
} }
} }
} }
code { code {
color: $purple-dark; color: $pink-dark;
background-color: $gray-background; background-color: $gray-background;
} }

4
ui/styles/_variables.scss
View File

@ -12,10 +12,12 @@ $red-darker: #b03c44;
$tan: #f0f0e5; $tan: #f0f0e5;
$consul-gray: #909090; $consul-gray: #909090;
$consul-footer-gray: #d7d4d7; $consul-footer-gray: #d7d4d7;
$pink-dark: #d62783;
$pink: lighten($pink-dark, 20%);
$light-pink: #f9f3f7;
$purple-dark: #69499a; $purple-dark: #69499a;
$purple: lighten($purple-dark, 20%); $purple: lighten($purple-dark, 20%);
$light-purple: #f7f3f9; $light-purple: #f7f3f9;
$green-faded: #BBF085; $green-faded: #BBF085;
$green-dark: #86B457; $green-dark: #86B457;
$red-faded: $red; $red-faded: $red;

10
ui/styles/base.scss
View File

@ -73,7 +73,7 @@ a {
.row { .row {
&.colored { &.colored {
background-color: $light-purple; background-color: $light-pink;
} }
} }
@ -82,12 +82,12 @@ a {
} }
.bg-purple { .bg-pink {
background-color: $purple; background-color: $pink;
} }
.bg-light-purple { .bg-light-pink {
background-color: $light-purple; background-color: $light-pink;
} }
.bg-orange { .bg-orange {