// // Buttons // -------------------------------------------------- [class*="button"] { position: relative; display: inline-block; padding: 4px 12px; margin: 0; font-weight: bold; line-height: 18px; color: #333; text-align: center; vertical-align: top; cursor: pointer; background-color: transparent; border: 1px solid rgba(0, 0, 0, .5); border-radius: 4px; // Active &:active { background-color: #333; transition: background-color .1s linear; } } // Buttons modifiers // -------------------------------------------------- // Overriding styles for buttons with modifiers .button-main, .button-positive, .button-negative { color: #fff; } // Main button .button-main { color: $app-color; border: 1px solid $app-color; } // Positive button .button-positive { color: #4cd964; border: 1px solid #4cd964; } // Negative button .button-negative { color: #e71e1e; border: 1px solid #b51a1a; } // Active state for buttons with modifiers [class*="button"]:active, .button-main:active, .button-positive:active, .button-negative:active { color: #fff; } .button-main:active { color: #fff; background-color: $app-color; } .button-positive:active { color: #fff; background-color: #4cd964; } .button-negative:active { background-color: #b21a1a; } // Block level buttons (full width buttons) .button-block { display: block; padding: 11px 0 13px; margin-bottom: 10px; font-size: 16px; } // Make button elements go full width when given .button-block class button.button-block { width: 100%; } // 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; }