mirror of https://github.com/twbs/ratchet.git
connors
11 years ago
15 changed files with 302 additions and 46 deletions
@ -0,0 +1,112 @@
|
||||
/* |
||||
* ===================================================== |
||||
* Ratchet v2.0.0 |
||||
* Copyright 2013 Connor Sears, Dave Gamache, and Jacob Thornton |
||||
* Licensed under http://www.opensource.org/licenses/MIT |
||||
* |
||||
* Designed and built by @connors, @dhg, and @fat. |
||||
* ===================================================== |
||||
*/ |
||||
|
||||
[class*="bar-"] { |
||||
background-color: rgba(30, 176, 233, 0.98); |
||||
} |
||||
[class*="bar-"].bar-standard, [class*="bar-"].bar-footer-secondary { |
||||
background-color: rgba(238, 238, 238, 0.98); |
||||
} |
||||
|
||||
.title { |
||||
color: #fff; |
||||
} |
||||
|
||||
.tab-label { |
||||
color: rgba(255, 255, 255, 0.5); |
||||
} |
||||
|
||||
.tab-item.active .tab-label { |
||||
color: white; |
||||
} |
||||
|
||||
[class*="button"] { |
||||
color: rgba(0, 0, 0, 0.3); |
||||
border-color: rgba(0, 0, 0, 0.3); |
||||
} |
||||
[class*="button"]:active, [class*="button"].active, [class*="button"].button-filled { |
||||
background-color: rgba(0, 0, 0, 0.3); |
||||
} |
||||
|
||||
.button-primary { |
||||
color: #1eb0e9; |
||||
border-color: #1eb0e9; |
||||
} |
||||
.button-primary:active, .button-primary.active, .button-primary.button-filled { |
||||
background-color: #1eb0e9; |
||||
} |
||||
|
||||
.button-positive { |
||||
color: #34ba15; |
||||
border-color: #34ba15; |
||||
} |
||||
.button-positive:active, .button-positive.active, .button-positive.button-filled { |
||||
background-color: #34ba15; |
||||
} |
||||
|
||||
.button-negative { |
||||
color: #e71e1e; |
||||
border-color: #e71e1e; |
||||
} |
||||
.button-negative:active, .button-negative.active, .button-negative.button-filled { |
||||
background-color: #e71e1e; |
||||
} |
||||
|
||||
.bar-title [class*="button"] { |
||||
color: #fff; |
||||
} |
||||
.bar-title .button:active, |
||||
.bar-title .button.active, |
||||
.bar-title .button-prev:active, |
||||
.bar-title .button-prev.active, |
||||
.bar-title .button-next:active, |
||||
.bar-title .button-next.active, |
||||
.bar-title .button-primary:active, |
||||
.bar-title .button-primary.active { |
||||
color: #fff; |
||||
} |
||||
.bar-title .button-prev:before, |
||||
.bar-title .button-prev:after, |
||||
.bar-title .button-next:before, |
||||
.bar-title .button-next:after { |
||||
background-color: #fff; |
||||
} |
||||
|
||||
.segmented-controller { |
||||
border: -color #1eb0e9; |
||||
} |
||||
.segmented-controller li { |
||||
border-color: #1eb0e9; |
||||
} |
||||
.segmented-controller li > a { |
||||
color: #1eb0e9; |
||||
} |
||||
.segmented-controller li.active { |
||||
background-color: #1eb0e9; |
||||
} |
||||
|
||||
.bar-title .segmented-controller { |
||||
border-color: #fff; |
||||
} |
||||
.bar-title .segmented-controller li { |
||||
border-color: #fff; |
||||
} |
||||
.bar-title .segmented-controller li > a { |
||||
color: #fff; |
||||
} |
||||
.bar-title .segmented-controller li.active { |
||||
background-color: rgba(255, 255, 255, 0.4); |
||||
} |
||||
|
||||
input[type=search] { |
||||
color: #555; |
||||
background-color: rgba(0, 0, 0, 0.1); |
||||
border-radius: 17px; |
||||
} |
||||
@ -0,0 +1,169 @@
|
||||
// |
||||
// Variable overrides |
||||
// -------------------------------------------------- |
||||
|
||||
// Color overrides |
||||
// -------------------------------------------------- |
||||
|
||||
// Main theme colors |
||||
$primary-color: #1eb0e9; |
||||
$chrome-color: rgba(30,176,233,.98); |
||||
|
||||
// Action colors |
||||
$default-color: rgba(0, 0, 0, .3); |
||||
$positive-color: #34ba15; |
||||
$negative-color: #e71e1e; |
||||
|
||||
|
||||
// Bars |
||||
// -------------------------------------------------- |
||||
[class*="bar-"] { |
||||
background-color: $chrome-color; |
||||
|
||||
&.bar-standard, |
||||
&.bar-footer-secondary { |
||||
background-color: rgba(238,238,238,.98); |
||||
} |
||||
} |
||||
.title { |
||||
color: #fff; |
||||
} |
||||
.tab-label { |
||||
color: rgba(255,255,255,.5); |
||||
} |
||||
.tab-item.active .tab-label { |
||||
color: rgba(255,255,255,1); |
||||
} |
||||
|
||||
// Buttons |
||||
// -------------------------------------------------- |
||||
|
||||
[class*="button"] { |
||||
color: $default-color; |
||||
border-color: $default-color; |
||||
|
||||
&:active, |
||||
&.active, |
||||
&.button-filled { |
||||
background-color: $default-color; |
||||
} |
||||
} |
||||
|
||||
// Primary button (Default color is blue) |
||||
.button-primary { |
||||
color: $primary-color; |
||||
border-color: $primary-color; |
||||
|
||||
&:active, |
||||
&.active, |
||||
&.button-filled { |
||||
background-color: $primary-color; |
||||
} |
||||
} |
||||
|
||||
// Positive button (Default color is green) |
||||
.button-positive { |
||||
color: $positive-color; |
||||
border-color: $positive-color; |
||||
|
||||
&:active, |
||||
&.active, |
||||
&.button-filled { |
||||
background-color: $positive-color; |
||||
} |
||||
} |
||||
|
||||
// Negative button (Default color is red) |
||||
.button-negative { |
||||
color: $negative-color; |
||||
border-color: $negative-color; |
||||
|
||||
&:active, |
||||
&.active, |
||||
&.button-filled { |
||||
background-color: $negative-color; |
||||
} |
||||
} |
||||
|
||||
.bar-title { |
||||
|
||||
// Generic style for all buttons in .bar-title |
||||
[class*="button"] { |
||||
color: #fff; |
||||
} |
||||
|
||||
// Override standard button active states |
||||
.button:active, |
||||
.button.active, |
||||
.button-prev:active, |
||||
.button-prev.active, |
||||
.button-next:active, |
||||
.button-next.active, |
||||
.button-primary:active, |
||||
.button-primary.active { |
||||
color: #fff; |
||||
} |
||||
|
||||
|
||||
// Directional buttons in nav bars |
||||
// -------------------------------------------------- |
||||
|
||||
.button-prev:before, |
||||
.button-prev:after, |
||||
.button-next:before, |
||||
.button-next:after { |
||||
background-color: #fff; |
||||
} |
||||
} |
||||
|
||||
|
||||
// Segmented controllers |
||||
// -------------------------------------------------- |
||||
|
||||
.segmented-controller { |
||||
border:-color $primary-color; |
||||
|
||||
li { |
||||
border-color: $primary-color; |
||||
|
||||
// Link that fills each section |
||||
> a { |
||||
color: $primary-color; |
||||
} |
||||
|
||||
// Active segment of controller |
||||
&.active { |
||||
background-color: $primary-color; |
||||
} |
||||
} |
||||
} |
||||
|
||||
// Segmented controller in all bars |
||||
// -------------------------------------------------- |
||||
.bar-title .segmented-controller { |
||||
border-color: #fff; |
||||
|
||||
li { |
||||
border-color: #fff; |
||||
|
||||
// Link that fills each section |
||||
> a { |
||||
color: #fff; |
||||
} |
||||
|
||||
// Active segment of controller |
||||
&.active { |
||||
background-color: rgba(255,255,255,.4); |
||||
} |
||||
} |
||||
} |
||||
|
||||
|
||||
// Forms |
||||
// -------------------------------------------------- |
||||
// Fully round search input |
||||
input[type=search] { |
||||
color: #555; |
||||
background-color: rgba(0,0,0,.1); |
||||
border-radius: 17px; |
||||
} |
||||
Loading…
Reference in new issue