2013-09-15 01:15:30 +04:00
|
|
|
//
|
|
|
|
// Buttons
|
|
|
|
// --------------------------------------------------
|
2012-11-05 04:03:39 +04:00
|
|
|
|
2014-02-01 05:32:16 +04:00
|
|
|
.btn {
|
2012-11-05 04:03:39 +04:00
|
|
|
position: relative;
|
|
|
|
display: inline-block;
|
2013-10-20 01:04:51 +04:00
|
|
|
padding: 5px 8px;
|
2012-11-05 04:03:39 +04:00
|
|
|
margin: 0;
|
2013-09-22 01:09:17 +04:00
|
|
|
font-size: $button-font-size;
|
2013-09-16 06:08:43 +04:00
|
|
|
font-weight: $font-weight-light;
|
2014-02-21 04:11:39 +04:00
|
|
|
line-height: 1; // Center button text on the phone.
|
2013-12-15 02:46:56 +04:00
|
|
|
color: #333;
|
2012-11-05 04:03:39 +04:00
|
|
|
text-align: center;
|
|
|
|
vertical-align: top;
|
|
|
|
cursor: pointer;
|
2013-12-15 02:46:56 +04:00
|
|
|
background-color: $chrome-color;
|
2013-12-21 01:21:25 +04:00
|
|
|
border: 1px solid #ccc;
|
2013-12-21 02:29:15 +04:00
|
|
|
border-radius: 3px;
|
2013-12-15 02:46:56 +04:00
|
|
|
|
2013-09-16 03:18:17 +04:00
|
|
|
// Active & filled button styles
|
2013-09-15 06:28:42 +04:00
|
|
|
&:active,
|
2013-12-15 02:46:56 +04:00
|
|
|
&.active {
|
2014-02-10 03:22:18 +04:00
|
|
|
color: inherit;
|
2013-12-21 01:21:25 +04:00
|
|
|
background-color: #ccc;
|
2013-09-15 09:35:05 +04:00
|
|
|
}
|
2013-09-16 03:18:17 +04:00
|
|
|
|
2013-09-16 03:24:37 +04:00
|
|
|
// Disabled styles & filled button active styles
|
2013-09-16 03:18:17 +04:00
|
|
|
&:disabled,
|
2013-12-21 01:21:25 +04:00
|
|
|
&.disabled {
|
2013-09-15 09:35:05 +04:00
|
|
|
opacity: .6;
|
2013-09-15 01:15:30 +04:00
|
|
|
}
|
2012-11-05 04:03:39 +04:00
|
|
|
}
|
|
|
|
|
2013-09-16 03:18:17 +04:00
|
|
|
|
|
|
|
// Other button types
|
2013-09-15 01:15:30 +04:00
|
|
|
// --------------------------------------------------
|
2012-11-05 04:03:39 +04:00
|
|
|
|
2013-09-16 03:18:17 +04:00
|
|
|
// Primary button (Default color is blue)
|
2014-02-01 05:32:16 +04:00
|
|
|
.btn-primary {
|
2013-12-21 01:21:25 +04:00
|
|
|
color: #fff;
|
2013-09-16 06:08:43 +04:00
|
|
|
border: 1px solid $primary-color;
|
2013-12-21 01:21:25 +04:00
|
|
|
background-color: $primary-color;
|
2013-09-15 06:28:42 +04:00
|
|
|
|
|
|
|
&:active,
|
2013-12-21 01:21:25 +04:00
|
|
|
&.active {
|
2014-02-10 07:22:27 +04:00
|
|
|
color: #fff;
|
2013-12-21 01:21:25 +04:00
|
|
|
border: 1px solid darken($primary-color, 10%);
|
|
|
|
background-color: darken($primary-color, 10%);
|
2013-09-15 06:28:42 +04:00
|
|
|
}
|
2012-11-05 04:03:39 +04:00
|
|
|
}
|
|
|
|
|
2013-09-16 03:18:17 +04:00
|
|
|
// Positive button (Default color is green)
|
2014-02-01 05:32:16 +04:00
|
|
|
.btn-positive {
|
2013-12-21 01:21:25 +04:00
|
|
|
color: #fff;
|
2013-09-16 03:18:17 +04:00
|
|
|
border: 1px solid $positive-color;
|
2013-12-21 01:21:25 +04:00
|
|
|
background-color: $positive-color;
|
2013-09-15 06:28:42 +04:00
|
|
|
|
|
|
|
&:active,
|
2014-02-10 07:22:27 +04:00
|
|
|
&.active {
|
|
|
|
color: #fff;
|
2013-12-21 01:21:25 +04:00
|
|
|
border: 1px solid darken($positive-color, 10%);
|
|
|
|
background-color: darken($positive-color, 10%);
|
2013-09-15 06:28:42 +04:00
|
|
|
}
|
2012-11-05 04:03:39 +04:00
|
|
|
}
|
|
|
|
|
2013-09-16 03:18:17 +04:00
|
|
|
// Negative button (Default color is red)
|
2014-02-01 05:32:16 +04:00
|
|
|
.btn-negative {
|
2013-12-21 01:21:25 +04:00
|
|
|
color: #fff;
|
2013-09-16 03:18:17 +04:00
|
|
|
border: 1px solid $negative-color;
|
2013-12-21 01:21:25 +04:00
|
|
|
background-color: $negative-color;
|
2012-11-05 04:03:39 +04:00
|
|
|
|
2013-09-15 06:28:42 +04:00
|
|
|
&:active,
|
2013-12-21 01:21:25 +04:00
|
|
|
&.active {
|
2014-02-10 07:22:27 +04:00
|
|
|
color: #fff;
|
2013-12-21 01:21:25 +04:00
|
|
|
border: 1px solid darken($negative-color, 10%);
|
|
|
|
background-color: darken($negative-color, 10%);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2013-12-21 01:43:28 +04:00
|
|
|
// Outlined buttons
|
2014-02-01 05:32:16 +04:00
|
|
|
.btn-outlined {
|
2013-12-21 01:21:25 +04:00
|
|
|
background-color: transparent;
|
|
|
|
|
2014-02-01 05:32:16 +04:00
|
|
|
&.btn-primary {
|
2013-12-21 01:21:25 +04:00
|
|
|
color: $primary-color;
|
|
|
|
}
|
2014-02-01 05:32:16 +04:00
|
|
|
&.btn-positive {
|
2013-12-21 01:21:25 +04:00
|
|
|
color: $positive-color;
|
|
|
|
}
|
2014-02-01 05:32:16 +04:00
|
|
|
&.btn-negative {
|
2013-12-21 01:21:25 +04:00
|
|
|
color: $negative-color;
|
|
|
|
}
|
|
|
|
// Active states
|
2014-02-01 05:32:16 +04:00
|
|
|
&.btn-primary:active,
|
|
|
|
&.btn-positive:active,
|
|
|
|
&.btn-negative:active {
|
2013-12-15 02:46:56 +04:00
|
|
|
color: #fff;
|
2013-09-15 06:28:42 +04:00
|
|
|
}
|
2012-11-05 04:03:39 +04:00
|
|
|
}
|
|
|
|
|
2013-10-20 04:41:22 +04:00
|
|
|
// Link button (Buttons that look like links)
|
2014-02-01 05:32:16 +04:00
|
|
|
.btn-link {
|
2013-12-21 02:29:15 +04:00
|
|
|
padding-top: 6px;
|
|
|
|
padding-bottom: 6px;
|
2013-10-20 04:41:22 +04:00
|
|
|
color: $primary-color;
|
2013-12-21 02:29:15 +04:00
|
|
|
background-color: transparent;
|
2013-10-20 04:41:22 +04:00
|
|
|
border: none;
|
|
|
|
|
|
|
|
&:active,
|
|
|
|
&.active {
|
2013-12-15 02:46:56 +04:00
|
|
|
color: darken($primary-color, 10%);
|
2013-12-21 02:29:15 +04:00
|
|
|
background-color: transparent;
|
2013-10-20 04:41:22 +04:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2013-09-13 08:06:52 +04:00
|
|
|
// Block level buttons (full width buttons)
|
2014-02-01 05:32:16 +04:00
|
|
|
.btn-block {
|
2012-11-05 04:03:39 +04:00
|
|
|
display: block;
|
2013-10-20 00:58:34 +04:00
|
|
|
padding: 15px 0;
|
2012-11-05 04:03:39 +04:00
|
|
|
margin-bottom: 10px;
|
2013-10-20 00:58:34 +04:00
|
|
|
font-size: 18px;
|
2012-11-05 04:03:39 +04:00
|
|
|
}
|
|
|
|
|
2014-02-10 03:07:40 +04:00
|
|
|
|
2013-12-21 00:58:20 +04:00
|
|
|
// Button overrides
|
|
|
|
// --------------------------------------------------
|
2014-02-10 03:07:40 +04:00
|
|
|
|
2013-12-21 00:58:20 +04:00
|
|
|
input[type="submit"],
|
|
|
|
input[type="reset"],
|
|
|
|
input[type="button"] {
|
|
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
|
2013-09-16 06:08:43 +04:00
|
|
|
|
2014-02-10 03:07:40 +04:00
|
|
|
// Buttons with badges
|
2013-09-16 06:08:43 +04:00
|
|
|
// --------------------------------------------------
|
|
|
|
|
2014-02-10 03:07:40 +04:00
|
|
|
// Generic styles for all badges within default buttons
|
|
|
|
.btn .badge {
|
|
|
|
font-size: 12px;
|
|
|
|
padding-top: 2px;
|
|
|
|
padding-bottom: 2px;
|
|
|
|
margin: -2px -4px -2px 4px;
|
|
|
|
background-color: rgba(0,0,0,.15);
|
2013-09-16 06:08:43 +04:00
|
|
|
}
|
|
|
|
|
2014-02-10 03:07:40 +04:00
|
|
|
// Buttons with inverted badges
|
|
|
|
.btn .badge-inverted,
|
|
|
|
.btn:active .badge-inverted {
|
|
|
|
background-color: transparent;
|
|
|
|
}
|
|
|
|
.btn-primary:active .badge-inverted,
|
|
|
|
.btn-positive:active .badge-inverted,
|
|
|
|
.btn-negative:active .badge-inverted {
|
|
|
|
color: #fff;
|
2014-02-03 05:33:20 +04:00
|
|
|
}
|
2014-02-09 04:59:51 +04:00
|
|
|
|
2014-02-10 03:07:40 +04:00
|
|
|
// Position badges within block level buttons
|
|
|
|
// Note: These are absolutely positioned so that text of button isn't "pushed" by badge and always
|
|
|
|
// stays at the center of button
|
|
|
|
.btn-block .badge {
|
|
|
|
position: absolute;
|
|
|
|
right: 0;
|
|
|
|
margin-right: 10px;
|
2013-09-23 04:33:05 +04:00
|
|
|
}
|
2014-02-02 04:34:58 +04:00
|
|
|
|
2014-02-10 03:07:40 +04:00
|
|
|
|
|
|
|
// Buttons with Ratchicons
|
2014-02-02 04:34:58 +04:00
|
|
|
// --------------------------------------------------
|
2014-02-10 03:07:40 +04:00
|
|
|
|
|
|
|
.btn .icon {
|
|
|
|
font-size: inherit;
|
2014-02-02 04:34:58 +04:00
|
|
|
}
|