// // Buttons // -------------------------------------------------- [class*="button"] { position: relative; display: inline-block; padding: 5px 8px; margin: 0; font-size: $button-font-size; font-weight: $font-weight-light; line-height: 1.15; // Center button text on the phone. color: #333; text-align: center; vertical-align: top; cursor: pointer; background-color: $chrome-color; border: 1px solid #ccc; border-radius: 4px; // Active & filled button styles &:active, &.active { background-color: #ccc; } // Disabled styles & filled button active styles &:disabled, &.disabled { opacity: .6; } } // Other button types // -------------------------------------------------- // Primary button (Default color is blue) .button-primary { color: #fff; border: 1px solid $primary-color; background-color: $primary-color; &:active, &.active { border: 1px solid darken($primary-color, 10%); background-color: darken($primary-color, 10%); } } // Positive button (Default color is green) .button-positive { color: #fff; border: 1px solid $positive-color; background-color: $positive-color; &:active, &.active{ border: 1px solid darken($positive-color, 10%); background-color: darken($positive-color, 10%); } } // Negative button (Default color is red) .button-negative { color: #fff; border: 1px solid $negative-color; background-color: $negative-color; &:active, &.active { border: 1px solid darken($negative-color, 10%); background-color: darken($negative-color, 10%); } } // Outline buttons .button-outlined { background-color: transparent; &.button-primary { color: $primary-color; } &.button-positive { color: $positive-color; } &.button-negative { color: $negative-color; } // Active states &.button-primary:active, &.button-positive:active, &.button-negative:active { color: #fff; } } // Link button (Buttons that look like links) .button-link { color: $primary-color; border: none; &:active, &.active { color: darken($primary-color, 10%); } } // Block level buttons (full width buttons) .button-block { display: block; padding: 15px 0; margin-bottom: 10px; font-size: 18px; } // Button overrides // -------------------------------------------------- input[type="submit"], input[type="reset"], input[type="button"] { width: 100%; } // Buttons in nav bars // -------------------------------------------------- .bar-nav { // Generic style for all buttons in .bar-title [class*="button"] { position: relative; z-index: 10; // Position the buttons on top of .title padding: 0; font-size: 16px; font-weight: $font-weight-light; line-height: $bar-base-height; color: $primary-color; background-color: transparent; border: 0; &.pull-right { margin-left: $bar-side-spacing; } &.pull-left { margin-right: $bar-side-spacing; } } // Override standard button active states .button:active, .button.active, .button-primary:active, .button-primary.active { color: $primary-color; background-color: transparent; opacity: .3; } // Primary button in bars .button-primary { font-weight: $font-weight; } } // Block buttons in all bars // -------------------------------------------------- // Add proper padding [class*="bar"] .button-block { padding: 7px 0; margin-top: 4px; margin-bottom: 5px; font-size: 16px; // Scale down font size to fit in bar. } // Block level buttons in popovers // -------------------------------------------------- // Positioning and giving darker border to look sharp against dark popover .popover .button-block { margin-bottom: 5px; } // Remove extra margin on bottom of last button .popover .button-block:last-child { margin-bottom: 0; }