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

moving over buttons

pull/245/head
connors 11 years ago
parent
1e25d4d0a5
commit
511e286380
6 changed files with 118 additions and 40 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 44
      dist/ratchet.css
  2. 10
      lib/sass/badges.scss
  3. 28
      lib/sass/buttons.scss
  4. 5
      lib/sass/forms.scss
  5. 2
      lib/sass/table-views.scss
  6. 69
      lib/sass/theme-ios

44
dist/ratchet.css vendored
Unescape View File

@ -500,7 +500,7 @@ strong {
margin-left: 0;
overflow: auto;
background-color: #fff;
border-radius: 12px;
border-radius: 6px;
-webkit-overflow-scrolling: touch;
}
@ -535,7 +535,7 @@ input[type="color"],
margin-bottom: 10px;
line-height: 21px;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.2);
border: 1px solid #dddddd;
border-radius: 3px;
outline: none;
-webkit-appearance: none;
@ -578,6 +578,9 @@ select {
margin-bottom: 0;
background-color: transparent;
border-bottom: 1px solid #dddddd;
border-top: 0;
border-left: 0;
border-right: 0;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
@ -625,24 +628,20 @@ select {
font-size: 12px;
font-weight: 400;
line-height: 1.15;
color: white;
color: #333;
text-align: center;
vertical-align: top;
cursor: pointer;
background-color: transparent;
border: 1px solid white;
border-radius: 4px;
-webkit-transition: background-color, opacity, color;
transition: background-color, opacity, color;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
background-color: white;
border: 1px solid #dddddd;
border-radius: 6px;
}
[class*="button"]:active, [class*="button"].active, [class*="button"].button-filled {
color: #fff;
[class*="button"].button-filled {
background-color: white;
}
[class*="button"]:active, [class*="button"].active {
background-color: #ebebeb;
}
[class*="button"]:disabled, [class*="button"].disabled, [class*="button"].button-filled:active {
opacity: .6;
}
@ -652,6 +651,7 @@ select {
border: 1px solid #428bca;
}
.button-primary:active, .button-primary.active, .button-primary.button-filled {
color: #fff;
background-color: #428bca;
}
@ -660,6 +660,7 @@ select {
border: 1px solid #5cb85c;
}
.button-positive:active, .button-positive.active, .button-positive.button-filled {
color: #fff;
background-color: #5cb85c;
}
@ -668,6 +669,7 @@ select {
border: 1px solid #d9534f;
}
.button-negative:active, .button-negative.active, .button-negative.button-filled {
color: #fff;
background-color: #d9534f;
}
@ -676,8 +678,7 @@ select {
border: none;
}
.button-link:active, .button-link.active {
color: #428bca;
opacity: .3;
color: #3071a9;
}
.button-link.button-filled {
background-color: transparent;
@ -699,6 +700,7 @@ select {
font-weight: 400;
line-height: 44px;
color: #428bca;
background-color: transparent;
border: 0;
-webkit-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
@ -818,14 +820,13 @@ input[type="button"] {
[class*="badge"] {
display: inline-block;
color: white;
color: #333;
}
[class*="badge"].badge-filled {
padding: 2px 9px;
color: #fff;
font-size: 13px;
line-height: 1;
background-color: white;
background-color: rgba(0, 0, 0, 0.15);
border-radius: 100px;
}
@ -833,6 +834,7 @@ input[type="button"] {
color: #428bca;
}
.badge-primary.badge-filled {
color: #fff;
background-color: #428bca;
}
@ -840,6 +842,7 @@ input[type="button"] {
color: #5cb85c;
}
.badge-positive.badge-filled {
color: #fff;
background-color: #5cb85c;
}
@ -847,6 +850,7 @@ input[type="button"] {
color: #d9534f;
}
.badge-negative.badge-filled {
color: #fff;
background-color: #d9534f;
}
@ -859,7 +863,7 @@ input[type="button"] {
.button-filled .badge-filled,
[class*="button"]:active .badge-filled {
background-color: rgba(0, 0, 0, 0.2);
background-color: rgba(0, 0, 0, 0.15);
}
.button-block [class*="badge"] {

10
lib/sass/badges.scss
Unescape View File

@ -4,14 +4,13 @@
[class*="badge"] {
display: inline-block;
color: $default-color;
color: #333;
&.badge-filled {
padding: 2px 9px;
color: #fff;
font-size: 13px;
line-height: 1;
background-color: $default-color;
background-color: rgba(0,0,0,.15);
border-radius: 100px;
}
}
@ -25,6 +24,7 @@
color: $primary-color;
&.badge-filled {
color: #fff;
background-color: $primary-color;
}
}
@ -34,6 +34,7 @@
color: $positive-color;
&.badge-filled {
color: #fff;
background-color: $positive-color;
}
}
@ -43,6 +44,7 @@
color: $negative-color;
&.badge-filled {
color: #fff;
background-color: $negative-color;
}
}
@ -62,7 +64,7 @@
// Styles for filled badges within filled buttons
.button-filled .badge-filled,
[class*="button"]:active .badge-filled {
background-color: rgba(0,0,0,.2);
background-color: rgba(0,0,0,.15);
}
// Position badges within block level buttons

28
lib/sass/buttons.scss
Unescape View File

@ -10,23 +10,22 @@
font-size: $button-font-size;
font-weight: $font-weight-light;
line-height: 1.15; // Center button text on the phone.
color: $default-color;
color: #333;
text-align: center;
vertical-align: top;
cursor: pointer;
background-color: transparent;
border: 1px solid $default-color;
border-radius: 4px;
@include transition(background-color, opacity, color);
@include transition-duration(.2s);
@include transition-timing-function(linear);
background-color: $chrome-color;
border: $border-default;
border-radius: $border-radius;
&.button-filled {
background-color: $chrome-color;
}
// Active & filled button styles
&:active,
&.active,
&.button-filled {
color: #fff;
background-color: $default-color;
&.active {
background-color: #ebebeb;
}
// Disabled styles & filled button active styles
@ -49,6 +48,7 @@
&:active,
&.active,
&.button-filled {
color: #fff;
background-color: $primary-color;
}
}
@ -61,6 +61,7 @@
&:active,
&.active,
&.button-filled {
color: #fff;
background-color: $positive-color;
}
}
@ -73,6 +74,7 @@
&:active,
&.active,
&.button-filled {
color: #fff;
background-color: $negative-color;
}
}
@ -84,8 +86,7 @@
&:active,
&.active {
color: $primary-color;
opacity: .3;
color: darken($primary-color, 10%);
}
&.button-filled {
background-color: transparent;
@ -115,6 +116,7 @@
font-weight: $font-weight-light;
line-height: $bar-base-height;
color: $primary-color;
background-color: transparent;
border: 0;
@include transition(opacity .2s linear);
@include box-flex(0);

5
lib/sass/forms.scss
Unescape View File

@ -35,7 +35,7 @@ input[type="color"],
margin-bottom: 10px;
line-height: $line-height-default;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, .2);
border: $border-default;
border-radius: 3px;
outline: none;
-webkit-appearance: none;
@ -85,6 +85,9 @@ select {
margin-bottom: 0;
background-color: transparent;
border-bottom: $border-default;
border-top: 0;
border-left: 0;
border-right: 0;
border-radius: 0;
@include box-shadow(none);
}

2
lib/sass/table-views.scss
Unescape View File

@ -145,6 +145,6 @@
margin-left: 0;
overflow: auto;
background-color: #fff;
border-radius: 12px;
border-radius: $border-radius;
-webkit-overflow-scrolling: touch;
}

69
lib/sass/theme-ios
Unescape View File

@ -64,9 +64,35 @@ $timing-fuction: cubic-bezier(.1, .5, .1, 1); // Inspired by @c2prods
}
}
.popover .table-view {
border-radius: 12px;
}
// Forms
// --------------------------------------------------
select,
textarea,
input[type="text"],
input[type=search],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="color"],
.input-group {
border: 1px solid rgba(0, 0, 0, .2);
}
// Rounded search input
input[type=search] {
text-align: center;
background-color: rgba(0,0,0,.1);
@ -80,7 +106,7 @@ input[type=search]:focus {
// Input groups (cluster multiple inputs together into a single group)
// -------------------------------------------------------------------
.input-group input {
border-bottom: 0;
border: 0;
@include hairline(single, #c8c7cc, 15px);
}
// Remove bottom border on last input to avoid double bottom border
@ -102,3 +128,44 @@ input[type=search]:focus {
background-image: none;
}
// Buttons
// --------------------------------------------------
[class*="button"] {
color: $default-color;
background-color: transparent;
border-radius: 4px;
@include transition(background-color, opacity, color);
@include transition-duration(.2s);
@include transition-timing-function(linear);
// Active & filled button styles
&:active,
&.active,
&.button-filled {
color: #fff;
background-color: $default-color;
}
}
// Link button (Buttons that look like links)
.button-link {
&:active,
&.active {
color: $primary-color;
opacity: .3;
}
}
//
// Badges
// --------------------------------------------------
[class*="badge"] {
color: $default-color;
&.badge-filled {
color: #fff;
}
}

Write Preview
Loading…
Cancel
Save