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

refining button css

pull/214/head
connors 11 years ago
parent
7c9b4ac461
commit
bc5dbefa7a
4 changed files with 93 additions and 70 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. 58
      dist/ratchet.css
  2. 76
      lib/sass/buttons.scss
  3. 25
      lib/sass/counts.scss
  4. 4
      lib/sass/ratchet.scss

58
dist/ratchet.css vendored
Unescape View File

@ -552,8 +552,8 @@ select {
display: inline-block; display: inline-block;
padding: 4px 12px; padding: 4px 12px;
margin: 0; margin: 0;
font-weight: bold; font-weight: 500;
line-height: 18px; line-height: 1;
color: #333; color: #333;
text-align: center; text-align: center;
vertical-align: top; vertical-align: top;
@ -562,20 +562,21 @@ select {
border: 1px solid rgba(0, 0, 0, 0.2); border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 4px; border-radius: 4px;
} }
[class*="button"]:active, [class*="button"].button-filled { [class*="button"]:active, [class*="button"].active, [class*="button"].button-filled {
color: #fff; color: #fff;
background-color: #333; background-color: #333;
transition: opacity .1s linear, background-color .1s linear; -webkit-transition: background-color .1s linear;
transition: background-color .1s linear;
} }
[class*="button"].button-filled:active { [class*="button"]:disabled, [class*="button"].disabled {
opacity: .6; opacity: .6;
} }
.button-main { .button-primary {
color: #007aff; color: #007aff;
border: 1px solid #007aff; border: 1px solid #007aff;
} }
.button-main:active, .button-main.button-filled { .button-primary:active, .button-primary.active, .button-primary.button-filled {
background-color: #007aff; background-color: #007aff;
} }
@ -583,7 +584,7 @@ select {
color: #4cd964; color: #4cd964;
border: 1px solid #4cd964; border: 1px solid #4cd964;
} }
.button-positive:active, .button-positive.button-filled { .button-positive:active, .button-positive.active, .button-positive.button-filled {
background-color: #4cd964; background-color: #4cd964;
} }
@ -591,37 +592,24 @@ select {
color: #dd524d; color: #dd524d;
border: 1px solid #dd524d; border: 1px solid #dd524d;
} }
.button-negative:active, .button-negative.button-filled { .button-negative:active, .button-negative.active, .button-negative.button-filled {
background-color: #dd524d; background-color: #dd524d;
} }
.button-block { .button-block {
display: block; display: block;
padding: 11px 0 13px; padding: 12px 0;
margin-bottom: 10px; margin-bottom: 10px;
font-size: 16px; font-size: 16px;
} }
button.button-block { input[type="submit"],
input[type="reset"],
input[type="button"],
.button-block {
width: 100%; width: 100%;
} }
[class*="button"] [class*="count"] {
padding-top: 2px;
padding-bottom: 2px;
margin-right: -4px;
margin-left: 4px;
background-color: rgba(0, 0, 0, 0.1);
}
.button-block [class*="count"] {
position: absolute;
right: 0;
padding-top: 4px;
padding-bottom: 4px;
margin-right: 10px;
}
.chevron { .chevron {
display: block; display: block;
height: 20px; height: 20px;
@ -668,6 +656,22 @@ button.button-block {
background-color: #e71e1e; background-color: #e71e1e;
} }
[class*="button"] [class*="count"] {
padding-top: 2px;
padding-bottom: 2px;
margin-right: -4px;
margin-left: 4px;
background-color: rgba(0, 0, 0, 0.1);
}
.button-block [class*="count"] {
position: absolute;
right: 0;
padding-top: 4px;
padding-bottom: 4px;
margin-right: 10px;
}
.segmented-controller { .segmented-controller {
display: -webkit-box; display: -webkit-box;
display: box; display: box;

76
lib/sass/buttons.scss
Unescape View File

@ -7,8 +7,8 @@
display: inline-block; display: inline-block;
padding: 4px 12px; padding: 4px 12px;
margin: 0; margin: 0;
font-weight: bold; font-weight: 500;
line-height: 18px; line-height: 1;
color: #333; color: #333;
text-align: center; text-align: center;
vertical-align: top; vertical-align: top;
@ -17,86 +17,76 @@
border: 1px solid rgba(0, 0, 0, .2); border: 1px solid rgba(0, 0, 0, .2);
border-radius: 4px; border-radius: 4px;
// Active // Active & filled button styles
&:active, &:active,
&.button-filled { &.active,
&.button-filled {
color: #fff; color: #fff;
background-color: #333; background-color: #333;
transition: opacity .1s linear, background-color .1s linear; -webkit-transition: background-color .1s linear;
transition: background-color .1s linear;
} }
&.button-filled:active {
// Disabled styles
&:disabled,
&.disabled {
opacity: .6; opacity: .6;
} }
} }
// Buttons modifiers
// Other button types
// -------------------------------------------------- // --------------------------------------------------
// Main button // Primary button (Default color is blue)
.button-main { .button-primary {
color: $app-color; color: $app-color;
border: 1px solid $app-color; border: 1px solid $app-color;
&:active, &:active,
&.active,
&.button-filled { &.button-filled {
background-color: $app-color; background-color: $app-color;
} }
} }
// Positive button // Positive button (Default color is green)
.button-positive { .button-positive {
color: #4cd964; color: $positive-color;
border: 1px solid #4cd964; border: 1px solid $positive-color;
&:active, &:active,
&.active,
&.button-filled { &.button-filled {
background-color: #4cd964; background-color: $positive-color;
} }
} }
// Negative button // Negative button (Default color is red)
.button-negative { .button-negative {
color: #dd524d; color: $negative-color;
border: 1px solid #dd524d; border: 1px solid $negative-color;
&:active, &:active,
&.active,
&.button-filled { &.button-filled {
background-color: #dd524d; background-color: $negative-color;
} }
} }
// Block level buttons (full width buttons) // Block level buttons (full width buttons)
.button-block { .button-block {
display: block; display: block;
padding: 11px 0 13px; padding: 12px 0;
margin-bottom: 10px; margin-bottom: 10px;
font-size: 16px; font-size: 16px;
} }
// Make button elements go full width when given .button-block class // Button overrides
button.button-block {
width: 100%;
}
// Counts in buttons
// -------------------------------------------------- // --------------------------------------------------
input[type="submit"],
// Generic styles for all counts within buttons input[type="reset"],
[class*="button"] [class*="count"] { input[type="button"],
padding-top: 2px; .button-block {
padding-bottom: 2px; width: 100%;
margin-right: -4px;
margin-left: 4px;
background-color: rgba(0, 0, 0, .1);
} }
// Position counts within block level buttons
// Note: These are absolutely positioned so that text of button isn't "pushed" by count and always
// stays at true center of button
.button-block [class*="count"] {
position: absolute;
right: 0;
padding-top: 4px;
padding-bottom: 4px;
margin-right: 10px;
}

25
lib/sass/counts.scss
Unescape View File

@ -13,6 +13,7 @@
border-radius: 100px; border-radius: 100px;
} }
// Count modifiers // Count modifiers
// -------------------------------------------------- // --------------------------------------------------
@ -29,4 +30,28 @@
// Negative count // Negative count
.count-negative { .count-negative {
background-color: #e71e1e; background-color: #e71e1e;
}
// Counts in buttons
// --------------------------------------------------
// Generic styles for all counts within buttons
[class*="button"] [class*="count"] {
padding-top: 2px;
padding-bottom: 2px;
margin-right: -4px;
margin-left: 4px;
background-color: rgba(0, 0, 0, .1);
}
// Position counts within block level buttons
// Note: These are absolutely positioned so that text of button isn't "pushed" by count and always
// stays at true center of button
.button-block [class*="count"] {
position: absolute;
right: 0;
padding-top: 4px;
padding-bottom: 4px;
margin-right: 10px;
} }

4
lib/sass/ratchet.scss
Unescape View File

@ -1,6 +1,10 @@
// Variables // Variables
$app-color: #007aff; $app-color: #007aff;
$chrome-color: rgba(247,247,247,.98); $chrome-color: rgba(247,247,247,.98);
$positive-color: #4cd964;
$negative-color: #dd524d;
// Base CSS & Reset // Base CSS & Reset
@import "base.scss"; @import "base.scss";

Write Preview
Loading…
Cancel
Save