playground
/
ratchet
mirror of https://github.com/twbs/ratchet.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

fixing the themes

pull/253/head
connors 11 years ago
parent
3536883d61
commit
969b76bc43
9 changed files with 114 additions and 228 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 44
      dist/android-theme.css
  2. 56
      dist/ios-theme.css
  3. 18
      dist/ratchet.css
  4. 2
      dist/ratchet.js
  5. 100
      docs-assets/css/docs.css
  6. 2
      lib/js/segmented-controllers.js
  7. 21
      lib/sass/segmented-controls.scss
  8. 51
      lib/sass/theme-android.scss
  9. 48
      lib/sass/theme-ios.scss

44
dist/android-theme.css vendored
Unescape View File

@ -347,75 +347,61 @@ textarea,
} }
.segmented-control { .segmented-control {
font-size: 14px;
background-color: #cecece; background-color: #cecece;
border: 0; border: 0;
font-size: 14px;
border-radius: 2px; border-radius: 2px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
} }
.segmented-control li { .segmented-control .control-item {
border-left: 1px solid #999;
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.segmented-control li > a {
padding-top: 10px; padding-top: 10px;
padding-bottom: 10px; padding-bottom: 10px;
color: #222222; color: #222222;
border-left: 1px solid #999;
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
} }
.segmented-control li:first-child { .segmented-control .control-item:first-child {
border-left-width: 0; border-left-width: 0;
} }
.segmented-control li:active, .segmented-control li.active { .segmented-control .control-item:active, .segmented-control .control-item.active {
background-color: #999999; background-color: #999999;
} }
.segmented-control-primary { .segmented-control-primary {
border: 0; border: 0;
} }
.segmented-control-primary li { .segmented-control-primary .control-item {
color: #fff;
border-color: inherit; border-color: inherit;
} }
.segmented-control-primary li > a { .segmented-control-primary .control-item:active, .segmented-control-primary .control-item.active {
color: #fff; color: #fff;
}
.segmented-control-primary li:active, .segmented-control-primary li.active {
background-color: #33b5e5; background-color: #33b5e5;
} }
.segmented-control-primary li:active > a, .segmented-control-primary li.active > a {
color: #fff;
}
.segmented-control-positive { .segmented-control-positive {
border: 0; border: 0;
} }
.segmented-control-positive li { .segmented-control-positive .control-item {
color: #fff;
border-color: inherit; border-color: inherit;
} }
.segmented-control-positive li > a { .segmented-control-positive .control-item:active, .segmented-control-positive .control-item.active {
color: #fff; color: #fff;
}
.segmented-control-positive li:active, .segmented-control-positive li.active {
background-color: #99cc00; background-color: #99cc00;
} }
.segmented-control-positive li:active > a, .segmented-control-positive li.active > a {
color: #fff;
}
.segmented-control-negative { .segmented-control-negative {
border: 0; border: 0;
} }
.segmented-control-negative li { .segmented-control-negative .control-item {
color: #fff;
border-color: inherit; border-color: inherit;
} }
.segmented-control-negative li > a { .segmented-control-negative .control-item:active, .segmented-control-negative .control-item.active {
color: #fff; color: #fff;
}
.segmented-control-negative li:active, .segmented-control-negative li.active {
background-color: #ff4444; background-color: #ff4444;
} }
.segmented-control-negative li:active > a, .segmented-control-negative li.active > a {
color: #fff;
}
.popover { .popover {
top: 90px; top: 90px;

56
dist/ios-theme.css vendored
Unescape View File

@ -264,80 +264,64 @@ textarea,
background-color: transparent; background-color: transparent;
border: 1px solid #929292; border: 1px solid #929292;
} }
.segmented-control li { .segmented-control .control-item {
color: #929292;
border-color: #929292; border-color: #929292;
-webkit-transition: background-color 0.1s linear; -webkit-transition: background-color 0.1s linear;
-moz-transition: background-color 0.1s linear; -moz-transition: background-color 0.1s linear;
transition: background-color 0.1s linear; transition: background-color 0.1s linear;
} }
.segmented-control li > a { .segmented-control .control-item:active {
color: #929292;
}
.segmented-control li:active {
background-color: #ebebeb; background-color: #ebebeb;
} }
.segmented-control li.active { .segmented-control .control-item.active {
background-color: #929292;
}
.segmented-control li.active > a {
color: #fff; color: #fff;
background-color: #929292;
} }
.segmented-control-primary { .segmented-control-primary {
border: 1px solid #007aff; border: 1px solid #007aff;
} }
.segmented-control-primary li { .segmented-control-primary .control-item {
border-color: inherit;
}
.segmented-control-primary li > a {
color: #007aff; color: #007aff;
border-color: inherit;
} }
.segmented-control-primary li:active { .segmented-control-primary .control-item:active {
background-color: #b3d7ff; background-color: #b3d7ff;
} }
.segmented-control-primary li.active { .segmented-control-primary .control-item.active {
background-color: #007aff;
}
.segmented-control-primary li.active > a {
color: #fff; color: #fff;
background-color: #007aff;
} }
.segmented-control-positive { .segmented-control-positive {
border: 1px solid #4cd964; border: 1px solid #4cd964;
} }
.segmented-control-positive li { .segmented-control-positive .control-item {
border-color: inherit;
}
.segmented-control-positive li > a {
color: #4cd964; color: #4cd964;
border-color: inherit;
} }
.segmented-control-positive li:active { .segmented-control-positive .control-item:active {
background-color: #dff8e3; background-color: #dff8e3;
} }
.segmented-control-positive li.active { .segmented-control-positive .control-item.active {
background-color: #4cd964;
}
.segmented-control-positive li.active > a {
color: #fff; color: #fff;
background-color: #4cd964;
} }
.segmented-control-negative { .segmented-control-negative {
border: 1px solid #dd524d; border: 1px solid #dd524d;
} }
.segmented-control-negative li { .segmented-control-negative .control-item {
border-color: inherit;
}
.segmented-control-negative li > a {
color: #dd524d; color: #dd524d;
border-color: inherit;
} }
.segmented-control-negative li:active { .segmented-control-negative .control-item:active {
background-color: #fae4e3; background-color: #fae4e3;
} }
.segmented-control-negative li.active { .segmented-control-negative .control-item.active {
background-color: #dd524d;
}
.segmented-control-negative li.active > a {
color: #fff; color: #fff;
background-color: #dd524d;
} }
.popover { .popover {

18
dist/ratchet.css vendored
Unescape View File

@ -924,51 +924,45 @@ select {
border: 1px solid #428bca; border: 1px solid #428bca;
} }
.segmented-control-primary .control-item { .segmented-control-primary .control-item {
border-color: inherit;
color: #428bca; color: #428bca;
border-color: inherit;
} }
.segmented-control-primary .control-item:active { .segmented-control-primary .control-item:active {
background-color: #cde1f1; background-color: #cde1f1;
} }
.segmented-control-primary .control-item.active { .segmented-control-primary .control-item.active {
background-color: #428bca;
}
.segmented-control-primary .control-item.active > a {
color: #fff; color: #fff;
background-color: #428bca;
} }
.segmented-control-positive { .segmented-control-positive {
border: 1px solid #5cb85c; border: 1px solid #5cb85c;
} }
.segmented-control-positive .control-item { .segmented-control-positive .control-item {
border-color: inherit;
color: #5cb85c; color: #5cb85c;
border-color: inherit;
} }
.segmented-control-positive .control-item:active { .segmented-control-positive .control-item:active {
background-color: #d8eed8; background-color: #d8eed8;
} }
.segmented-control-positive .control-item.active { .segmented-control-positive .control-item.active {
background-color: #5cb85c;
}
.segmented-control-positive .control-item.active > a {
color: #fff; color: #fff;
background-color: #5cb85c;
} }
.segmented-control-negative { .segmented-control-negative {
border: 1px solid #d9534f; border: 1px solid #d9534f;
} }
.segmented-control-negative .control-item { .segmented-control-negative .control-item {
border-color: inherit;
color: #d9534f; color: #d9534f;
border-color: inherit;
} }
.segmented-control-negative .control-item:active { .segmented-control-negative .control-item:active {
background-color: #f9e2e2; background-color: #f9e2e2;
} }
.segmented-control-negative .control-item.active { .segmented-control-negative .control-item.active {
background-color: #d9534f;
}
.segmented-control-negative .control-item.active > a {
color: #fff; color: #fff;
background-color: #d9534f;
} }
.control-content { .control-content {

2
dist/ratchet.js vendored
Unescape View File

@ -528,7 +528,7 @@
}(); }();
/* ---------------------------------- /* ----------------------------------
* Segmented controls v1.0.0 * Segmented controls v1.0.1
* Licensed under The MIT License * Licensed under The MIT License
* http://opensource.org/licenses/MIT * http://opensource.org/licenses/MIT
* ---------------------------------- */ * ---------------------------------- */

100
docs-assets/css/docs.css
Unescape View File

@ -1022,77 +1022,61 @@ hr {
background-color: transparent; background-color: transparent;
border: 1px solid #929292; border: 1px solid #929292;
} }
.platform-ios .segmented-control li { .platform-ios .segmented-control .control-item {
color: #929292;
border-color: #929292; border-color: #929292;
-webkit-transition: background-color 0.1s linear; -webkit-transition: background-color 0.1s linear;
-moz-transition: background-color 0.1s linear; -moz-transition: background-color 0.1s linear;
transition: background-color 0.1s linear; transition: background-color 0.1s linear;
} }
.platform-ios .segmented-control li > a { .platform-ios .segmented-control .control-item:active {
color: #929292;
}
.platform-ios .segmented-control li:active {
background-color: #ebebeb; background-color: #ebebeb;
} }
.platform-ios .segmented-control li.active { .platform-ios .segmented-control .control-item.active {
background-color: #929292;
}
.platform-ios .segmented-control li.active > a {
color: #fff; color: #fff;
background-color: #929292;
} }
.platform-ios .segmented-control-primary { .platform-ios .segmented-control-primary {
border: 1px solid #007aff; border: 1px solid #007aff;
} }
.platform-ios .segmented-control-primary li { .platform-ios .segmented-control-primary .control-item {
border-color: inherit;
}
.platform-ios .segmented-control-primary li > a {
color: #007aff; color: #007aff;
border-color: inherit;
} }
.platform-ios .segmented-control-primary li:active { .platform-ios .segmented-control-primary .control-item:active {
background-color: #b3d7ff; background-color: #b3d7ff;
} }
.platform-ios .segmented-control-primary li.active { .platform-ios .segmented-control-primary .control-item.active {
background-color: #007aff;
}
.platform-ios .segmented-control-primary li.active > a {
color: #fff; color: #fff;
background-color: #007aff;
} }
.platform-ios .segmented-control-positive { .platform-ios .segmented-control-positive {
border: 1px solid #4cd964; border: 1px solid #4cd964;
} }
.platform-ios .segmented-control-positive li { .platform-ios .segmented-control-positive .control-item {
border-color: inherit;
}
.platform-ios .segmented-control-positive li > a {
color: #4cd964; color: #4cd964;
border-color: inherit;
} }
.platform-ios .segmented-control-positive li:active { .platform-ios .segmented-control-positive .control-item:active {
background-color: #dff8e3; background-color: #dff8e3;
} }
.platform-ios .segmented-control-positive li.active { .platform-ios .segmented-control-positive .control-item.active {
background-color: #4cd964;
}
.platform-ios .segmented-control-positive li.active > a {
color: #fff; color: #fff;
background-color: #4cd964;
} }
.platform-ios .segmented-control-negative { .platform-ios .segmented-control-negative {
border: 1px solid #dd524d; border: 1px solid #dd524d;
} }
.platform-ios .segmented-control-negative li { .platform-ios .segmented-control-negative .control-item {
border-color: inherit;
}
.platform-ios .segmented-control-negative li > a {
color: #dd524d; color: #dd524d;
border-color: inherit;
} }
.platform-ios .segmented-control-negative li:active { .platform-ios .segmented-control-negative .control-item:active {
background-color: #fae4e3; background-color: #fae4e3;
} }
.platform-ios .segmented-control-negative li.active { .platform-ios .segmented-control-negative .control-item.active {
background-color: #dd524d;
}
.platform-ios .segmented-control-negative li.active > a {
color: #fff; color: #fff;
background-color: #dd524d;
} }
.platform-ios .popover { .platform-ios .popover {
border-radius: 12px; border-radius: 12px;
@ -1505,72 +1489,58 @@ hr {
border-bottom: 0; border-bottom: 0;
} }
.platform-android .segmented-control { .platform-android .segmented-control {
font-size: 14px;
background-color: #cecece; background-color: #cecece;
border: 0; border: 0;
font-size: 14px;
border-radius: 2px; border-radius: 2px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
} }
.platform-android .segmented-control li { .platform-android .segmented-control .control-item {
border-left: 1px solid #999;
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.platform-android .segmented-control li > a {
padding-top: 10px; padding-top: 10px;
padding-bottom: 10px; padding-bottom: 10px;
color: #222222; color: #222222;
border-left: 1px solid #999;
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
} }
.platform-android .segmented-control li:first-child { .platform-android .segmented-control .control-item:first-child {
border-left-width: 0; border-left-width: 0;
} }
.platform-android .segmented-control li:active, .platform-android .segmented-control li.active { .platform-android .segmented-control .control-item:active, .platform-android .segmented-control .control-item.active {
background-color: #999999; background-color: #999999;
} }
.platform-android .segmented-control-primary { .platform-android .segmented-control-primary {
border: 0; border: 0;
} }
.platform-android .segmented-control-primary li { .platform-android .segmented-control-primary .control-item {
color: #fff;
border-color: inherit; border-color: inherit;
} }
.platform-android .segmented-control-primary li > a { .platform-android .segmented-control-primary .control-item:active, .platform-android .segmented-control-primary .control-item.active {
color: #fff; color: #fff;
}
.platform-android .segmented-control-primary li:active, .platform-android .segmented-control-primary li.active {
background-color: #33b5e5; background-color: #33b5e5;
} }
.platform-android .segmented-control-primary li:active > a, .platform-android .segmented-control-primary li.active > a {
color: #fff;
}
.platform-android .segmented-control-positive { .platform-android .segmented-control-positive {
border: 0; border: 0;
} }
.platform-android .segmented-control-positive li { .platform-android .segmented-control-positive .control-item {
color: #fff;
border-color: inherit; border-color: inherit;
} }
.platform-android .segmented-control-positive li > a { .platform-android .segmented-control-positive .control-item:active, .platform-android .segmented-control-positive .control-item.active {
color: #fff; color: #fff;
}
.platform-android .segmented-control-positive li:active, .platform-android .segmented-control-positive li.active {
background-color: #99cc00; background-color: #99cc00;
} }
.platform-android .segmented-control-positive li:active > a, .platform-android .segmented-control-positive li.active > a {
color: #fff;
}
.platform-android .segmented-control-negative { .platform-android .segmented-control-negative {
border: 0; border: 0;
} }
.platform-android .segmented-control-negative li { .platform-android .segmented-control-negative .control-item {
color: #fff;
border-color: inherit; border-color: inherit;
} }
.platform-android .segmented-control-negative li > a { .platform-android .segmented-control-negative .control-item:active, .platform-android .segmented-control-negative .control-item.active {
color: #fff; color: #fff;
}
.platform-android .segmented-control-negative li:active, .platform-android .segmented-control-negative li.active {
background-color: #ff4444; background-color: #ff4444;
} }
.platform-android .segmented-control-negative li:active > a, .platform-android .segmented-control-negative li.active > a {
color: #fff;
}
.platform-android .popover { .platform-android .popover {
top: 90px; top: 90px;
border: 1px solid #9b9b9b; border: 1px solid #9b9b9b;

2
lib/js/segmented-controllers.js
Unescape View File

@ -1,5 +1,5 @@
/* ---------------------------------- /* ----------------------------------
* Segmented controls v1.0.0 * Segmented controls v1.0.1
* Licensed under The MIT License * Licensed under The MIT License
* http://opensource.org/licenses/MIT * http://opensource.org/licenses/MIT
* ---------------------------------- */ * ---------------------------------- */

21
lib/sass/segmented-controls.scss
Unescape View File

@ -51,18 +51,15 @@
border: 1px solid $primary-color; border: 1px solid $primary-color;
.control-item { .control-item {
border-color: inherit;
color: $primary-color; color: $primary-color;
border-color: inherit;
&:active { &:active {
background-color: lighten($primary-color, 35%); background-color: lighten($primary-color, 35%);
} }
&.active { &.active {
color: #fff;
background-color: $primary-color; background-color: $primary-color;
> a {
color: #fff;
}
} }
} }
} }
@ -72,18 +69,15 @@
border: 1px solid $positive-color; border: 1px solid $positive-color;
.control-item { .control-item {
border-color: inherit;
color: $positive-color; color: $positive-color;
border-color: inherit;
&:active { &:active {
background-color: lighten($positive-color, 35%); background-color: lighten($positive-color, 35%);
} }
&.active { &.active {
color: #fff;
background-color: $positive-color; background-color: $positive-color;
> a {
color: #fff;
}
} }
} }
} }
@ -93,18 +87,15 @@
border: 1px solid $negative-color; border: 1px solid $negative-color;
.control-item { .control-item {
border-color: inherit;
color: $negative-color; color: $negative-color;
border-color: inherit;
&:active { &:active {
background-color: lighten($negative-color, 35%); background-color: lighten($negative-color, 35%);
} }
&.active { &.active {
color: #fff;
background-color: $negative-color; background-color: $negative-color;
> a {
color: #fff;
}
} }
} }
} }

51
lib/sass/theme-android.scss
Unescape View File

@ -490,22 +490,18 @@ textarea,
// -------------------------------------------------- // --------------------------------------------------
.segmented-control { .segmented-control {
font-size: 14px;
background-color: #cecece; background-color: #cecece;
border: 0; border: 0;
font-size: 14px;
border-radius: $border-radius; border-radius: $border-radius;
box-shadow: 0 1px 1px rgba(0,0,0,.25); box-shadow: 0 1px 1px rgba(0,0,0,.25);
li { .control-item {
padding-top: 10px;
padding-bottom: 10px;
color: $text-color;
border-left: 1px solid #999; border-left: 1px solid #999;
box-shadow: inset 0 -1px 0 rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.2); box-shadow: inset 0 -1px 0 rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.2);
// Link that fills each section
> a {
padding-top: 10px;
padding-bottom: 10px;
color: $text-color;
}
// Remove border-left and shadow from first section // Remove border-left and shadow from first section
&:first-child { &:first-child {
@ -527,19 +523,14 @@ textarea,
.segmented-control-primary { .segmented-control-primary {
border: 0; border: 0;
li { .control-item {
color: #fff;
border-color: inherit; border-color: inherit;
> a {
color: #fff;
}
&:active, &:active,
&.active { &.active {
color: #fff;
background-color: $primary-color; background-color: $primary-color;
> a {
color: #fff;
}
} }
} }
} }
@ -548,19 +539,14 @@ textarea,
.segmented-control-positive { .segmented-control-positive {
border: 0; border: 0;
li { .control-item {
color: #fff;
border-color: inherit; border-color: inherit;
> a {
color: #fff;
}
&:active, &:active,
&.active { &.active {
color: #fff;
background-color: $positive-color; background-color: $positive-color;
> a {
color: #fff;
}
} }
} }
} }
@ -569,19 +555,14 @@ textarea,
.segmented-control-negative { .segmented-control-negative {
border: 0; border: 0;
li { .control-item {
color: #fff;
border-color: inherit; border-color: inherit;
> a {
color: #fff;
}
&:active, &:active,
&.active { &.active {
color: #fff;
background-color: $negative-color; background-color: $negative-color;
> a {
color: #fff;
}
} }
} }
} }

48
lib/sass/theme-ios.scss
Unescape View File

@ -371,22 +371,17 @@ textarea,
background-color: transparent; background-color: transparent;
border: 1px solid $default-color; border: 1px solid $default-color;
li { .control-item {
color: $default-color;
border-color: $default-color; border-color: $default-color;
@include transition(background-color .1s linear); @include transition(background-color .1s linear);
> a {
color: $default-color;
}
&:active { &:active {
background-color: lighten($default-color, 35%); background-color: lighten($default-color, 35%);
} }
&.active { &.active {
color: #fff;
background-color: $default-color; background-color: $default-color;
> a {
color: #fff;
}
} }
} }
} }
@ -397,21 +392,16 @@ textarea,
.segmented-control-primary { .segmented-control-primary {
border: 1px solid $primary-color; border: 1px solid $primary-color;
li { .control-item {
color: $primary-color;
border-color: inherit; border-color: inherit;
> a {
color: $primary-color;
}
&:active { &:active {
background-color: lighten($primary-color, 35%); background-color: lighten($primary-color, 35%);
} }
&.active { &.active {
color: #fff;
background-color: $primary-color; background-color: $primary-color;
> a {
color: #fff;
}
} }
} }
} }
@ -420,21 +410,16 @@ textarea,
.segmented-control-positive { .segmented-control-positive {
border: 1px solid $positive-color; border: 1px solid $positive-color;
li { .control-item {
color: $positive-color;
border-color: inherit; border-color: inherit;
> a {
color: $positive-color;
}
&:active { &:active {
background-color: lighten($positive-color, 35%); background-color: lighten($positive-color, 35%);
} }
&.active { &.active {
color: #fff;
background-color: $positive-color; background-color: $positive-color;
> a {
color: #fff;
}
} }
} }
} }
@ -443,21 +428,16 @@ textarea,
.segmented-control-negative { .segmented-control-negative {
border: 1px solid $negative-color; border: 1px solid $negative-color;
li { .control-item {
color: $negative-color;
border-color: inherit; border-color: inherit;
> a {
color: $negative-color;
}
&:active { &:active {
background-color: lighten($negative-color, 35%); background-color: lighten($negative-color, 35%);
} }
&.active { &.active {
color: #fff;
background-color: $negative-color; background-color: $negative-color;
> a {
color: #fff;
}
} }
} }
} }

Write Preview
Loading…
Cancel
Save