Browse Source

First pass at buttons.

pull/210/head
connors 12 years ago
parent
commit
694c19fe8e
  1. 5
      lib/css/bars.css
  2. 22
      lib/css/buttons.css

5
lib/css/bars.css

@ -129,9 +129,7 @@
font-weight: 400; font-weight: 400;
line-height: 29px; line-height: 29px;
color: #007aff; color: #007aff;
background: transparent; /* Will remove after the buttons refactor. */
border: 0; border: 0;
box-shadow: none; /* Will remove after the buttons refactor. */
-webkit-box-flex: 0; -webkit-box-flex: 0;
box-flex: 0; box-flex: 0;
} }
@ -159,7 +157,6 @@
[class*="bar"] .button-block { [class*="bar"] .button-block {
padding: 7px 0; padding: 7px 0;
margin-bottom: 0; margin-bottom: 0;
box-shadow: none; /* Will remove after the buttons refactor. */
} }
/* Override standard padding changes for .button-blocks */ /* Override standard padding changes for .button-blocks */
@ -186,7 +183,7 @@
.bar-title .segmented-controller { .bar-title .segmented-controller {
line-height: 18px; line-height: 18px;
background-color: transparent; background-color: transparent; /* Will remove after the segmented-controller refactor. */
background-image: none; /* Will remove after the segmented-controller refactor. */ background-image: none; /* Will remove after the segmented-controller refactor. */
border: 1px solid #007aff; border: 1px solid #007aff;
border-radius: 3px; border-radius: 3px;

22
lib/css/buttons.css

@ -13,13 +13,13 @@
vertical-align: top; vertical-align: top;
cursor: pointer; cursor: pointer;
background-color: transparent; background-color: transparent;
border: 1px solid rgba(0, 0, 0, .3); border: 1px solid rgba(0, 0, 0, .5);
border-radius: 3px; border-radius: 3px;
} }
/* Active */ /* Active */
[class*="button"]:active { [class*="button"]:active {
background-image: none; background-color: #333;
} }
/* Button modifiers /* Button modifiers
@ -34,33 +34,36 @@
/* Main button */ /* Main button */
.button-main { .button-main {
background-color: #1eafe7; color: #007aff;
border: 1px solid #117aaa; border: 1px solid #007aff;
} }
/* Positive button */ /* Positive button */
.button-positive { .button-positive {
background-color: #4cd964; color: #4cd964;
border: 1px solid #278f0f; border: 1px solid #4cd964;
} }
/* Negative button */ /* Negative button */
.button-negative { .button-negative {
background-color: #e71e1e; color: #e71e1e;
border: 1px solid #b51a1a; border: 1px solid #b51a1a;
} }
/* Active state for buttons with modifiers */ /* Active state for buttons with modifiers */
[class*="button"]:active,
.button-main:active, .button-main:active,
.button-positive:active, .button-positive:active,
.button-negative:active { .button-negative:active {
color: #fff; color: #fff;
} }
.button-main:active { .button-main:active {
background-color: #0876b1; color: #fff;
background-color: #007aff;
} }
.button-positive:active { .button-positive:active {
background-color: #298f11; color: #fff;
background-color: #4cd964;
} }
.button-negative:active { .button-negative:active {
background-color: #b21a1a; background-color: #b21a1a;
@ -84,7 +87,6 @@
padding-bottom: 2px; padding-bottom: 2px;
margin-right: -4px; margin-right: -4px;
margin-left: 4px; margin-left: 4px;
text-shadow: none;
background-color: rgba(0, 0, 0, .1); background-color: rgba(0, 0, 0, .1);
} }

Loading…
Cancel
Save