vendor/assets/stylesheets/button.scss in active_frontend-3.0.4 vs vendor/assets/stylesheets/button.scss in active_frontend-4.0.0
- old
+ new
@@ -15,16 +15,16 @@
/* # Button
================================================== */
.btn {
-webkit-appearance: none;
-moz-appearance: none;
- background: rgba(249,249,249,1);
- border: 2px solid rgba(249,249,249,1);
+ background: rgba(245,248,250,1);
+ border: 1px solid rgba(245,248,250,1);
border-radius: 0;
-moz-box-sizing: border-box;
box-sizing: border-box;
- color: rgba(34,34,34,1);
+ color: rgba(42,44,48,1);
cursor: pointer;
display: inline-block;
-webkit-font-smoothing: antialiased;
font-size: 11px;
font-weight: bold;
@@ -46,11 +46,12 @@
.btn:hover,
.btn:focus,
.btn[disabled],
.btn[disabled]:hover,
.open > .dropdown-toggle.btn {
- background: rgba(253,253,253,1);
+ background: rgba(240,243,245,1);
+ border-color: rgba(240,243,245,1);
text-decoration: none;
}
.btn[disabled],
.btn[disabled]:hover {
cursor: not-allowed;
@@ -64,11 +65,11 @@
/* # Sizes
================================================== */
.btn-large { padding: 19px 30px; }
.btn-medium { padding: 9px 15px 10px 15px; }
-.btn-small { padding: 7px 15px 8px 15px; }
+.btn-small { padding: 8px 15px; }
.btn-mini {
font-size: 9px;
line-height: 9px;
padding: 7px 10px 6px 10px;
}
@@ -85,33 +86,39 @@
}
/* # Colors
================================================== */
.btn-black {
- background: rgba(34,34,34,1);
- border-color: rgba(34,34,34,1);
+ background: rgba(42,44,48,1);
+ border-color: rgba(42,44,48,1);
color: rgba(255,255,255,1) !important;
}
.btn-black[disabled],
.btn-black[disabled]:hover,
.btn-black:active,
.btn-black.active,
.btn-black:hover,
.btn-black:focus,
-.open > .dropdown-toggle.btn.btn-black { background: rgba(54,54,54,1); }
+.open > .dropdown-toggle.btn.btn-black {
+ background: rgba(32,34,38,1);
+ border-color: rgba(32,34,38,1);
+}
.btn-blue {
- background: rgba(76,143,202,1);
- border-color: rgba(76,143,202,1);
+ background: rgba(91,146,250,1);
+ border-color: rgba(91,146,250,1);
color: rgba(255,255,255,1) !important;
}
.btn-blue[disabled],
.btn-blue[disabled]:hover,
.btn-blue:active,
.btn-blue.active,
.btn-blue:hover,
.btn-blue:focus,
-.open > .dropdown-toggle.btn.btn-blue { background: rgba(96,163,222,1); }
+.open > .dropdown-toggle.btn.btn-blue {
+ background: rgba(81,136,240,1);
+ border-color: rgba(81,136,240,1);
+}
.btn-green {
background: rgba(27,192,109,1);
border-color: rgba(27,192,109,1);
color: rgba(255,255,255,1) !important;
}
@@ -119,11 +126,14 @@
.btn-green[disabled]:hover,
.btn-green:active,
.btn-green.active,
.btn-green:hover,
.btn-green:focus,
-.open > .dropdown-toggle.btn.btn-green { background: rgba(47,212,129,1); }
+.open > .dropdown-toggle.btn.btn-green {
+ background: rgba(17,182,99,1);
+ border-color: rgba(17,182,99,1);
+}
.btn-orange {
background: rgba(255,154,46,1);
border-color: rgba(255,154,46,1);
color: rgba(255,255,255,1) !important;
}
@@ -131,23 +141,29 @@
.btn-orange[disabled]:hover,
.btn-orange:active,
.btn-orange.active,
.btn-orange:hover,
.btn-orange:focus,
-.open > .dropdown-toggle.btn.btn-orange { background: rgba(255,174,66,1); }
+.open > .dropdown-toggle.btn.btn-orange {
+ background: rgba(245,144,36,1);
+ border-color: rgba(245,144,36,1);
+}
.btn-purple {
- background: rgba(110,115,136,1);
- border-color: rgba(110,115,136,1);
+ background: rgba(81,68,95,1);
+ border-color: rgba(81,68,95,1);
color: rgba(255,255,255,1) !important;
}
.btn-purple[disabled],
.btn-purple[disabled]:hover,
.btn-purple:active,
.btn-purple.active,
.btn-purple:hover,
.btn-purple:focus,
-.open > .dropdown-toggle.btn.btn-purple { background: rgba(130,135,156,1); }
+.open > .dropdown-toggle.btn.btn-purple {
+ background: rgba(71,58,85,1);
+ border-color: rgba(71,58,85,1);
+}
.btn-red {
background: rgba(225,80,80,1);
border-color: rgba(225,80,80,1);
color: rgba(255,255,255,1) !important;
}
@@ -155,58 +171,77 @@
.btn-red[disabled]:hover,
.btn-red:active,
.btn-red.active,
.btn-red:hover,
.btn-red:focus,
-.open > .dropdown-toggle.btn.btn-red { background: rgba(255,99,88,1); }
+.open > .dropdown-toggle.btn.btn-red {
+ background: rgba(215,70,70,1);
+ border-color: rgba(215,70,70,1);
+}
.btn-smoke {
- background: rgba(100,100,100,1);
- border-color: rgba(100,100,100,1);
+ background: rgba(85,94,113,1);
+ border-color: rgba(85,94,113,1);
color: rgba(255,255,255,1) !important;
}
.btn-smoke[disabled],
.btn-smoke[disabled]:hover,
.btn-smoke:active,
.btn-smoke.active,
.btn-smoke:hover,
.btn-smoke:focus,
-.open > .dropdown-toggle.btn.btn-smoke { background: rgba(120,120,120,1); }
+.open > .dropdown-toggle.btn.btn-smoke {
+ background: rgba(75,84,103,1);
+ border-color: rgba(75,84,103,1);
+}
.btn-white {
background: rgba(255,255,255,1);
border-color: rgba(255,255,255,1);
- color: rgba(200,200,200,1) !important;
}
+.btn-white[disabled],
+.btn-white[disabled]:hover,
+.btn-white:active,
+.btn-white.active,
+.btn-white:hover,
+.btn-white:focus,
+.open > .dropdown-toggle.btn.btn-white {
+ background: rgba(240,243,245,1);
+ border-color: rgba(240,243,245,1);
+}
.btn-yellow {
- background: rgba(166,165,71,1);
- border-color: rgba(166,165,71,1);
+ background: rgba(253,245,98,1);
+ border-color: rgba(253,245,98,1);
color: rgba(255,255,255,1) !important;
}
.btn-yellow[disabled],
.btn-yellow[disabled]:hover,
.btn-yellow:active,
.btn-yellow.active,
.btn-yellow:hover,
.btn-yellow:focus,
-.open > .dropdown-toggle.btn.btn-yellow { background: rgba(186,185,91,1); }
+.open > .dropdown-toggle.btn.btn-yellow {
+ background: rgba(243,235,88,1);
+ border-color: rgba(243,235,88,1);
+}
/* # Links
================================================== */
.btn-link {
background: transparent;
border-color: transparent;
box-shadow: none;
- color: rgba(200,200,200,1) !important;
+ color: rgba(136,153,166,1) !important;
padding: 0;
}
.btn-link:active,
.btn-link.active,
.btn-link:hover,
.btn-link:focus,
.btn-link[disabled],
.btn-link[disabled]:hover {
background: transparent;
- color: rgba(34,34,34,1) !important;
+ border-color: transparent;
+ color: rgba(85,94,113,1) !important;
}
/* # Icons
================================================== */
.btn-icon {
@@ -244,114 +279,117 @@
================================================== */
.btn-outline,
.btn-outline[disabled],
.btn-outline[disabled]:hover {
background: transparent;
- color: rgba(200,200,200,1) !important;
+ color: rgba(85,94,113,1) !important;
}
.btn-outline:active,
.btn-outline.active,
.btn-outline:hover,
.btn-outline:focus,
.open > .dropdown-toggle.btn.btn-outline {
- background: rgba(253,253,253,1);
- color: rgba(34,34,34,1) !important;
+ background: rgba(240,243,245,1);
+ color: rgba(42,44,48,1) !important;
}
.btn-outline.btn-black,
.btn-outline.btn-black[disabled],
-.btn-outline.btn-black[disabled]:hover { color: rgba(34,34,34,1) !important; }
+.btn-outline.btn-black[disabled]:hover { color: rgba(42,44,48,1) !important; }
.btn-outline.btn-black:active,
.btn-outline.btn-black.active,
.btn-outline.btn-black:hover,
.btn-outline.btn-black:focus,
.open > .dropdown-toggle.btn.btn-outline.btn-black {
- background: rgba(44,44,44,1);
+ background: rgba(32,34,38,1);
color: rgba(255,255,255,1) !important;
}
.btn-outline.btn-blue,
.btn-outline.btn-blue[disabled],
-.btn-outline.btn-blue[disabled]:hover { color: rgba(76,143,202,1) !important; }
+.btn-outline.btn-blue[disabled]:hover { color: rgba(91,146,250,1) !important; }
.btn-outline.btn-blue:active,
.btn-outline.btn-blue.active,
.btn-outline.btn-blue:hover,
.btn-outline.btn-blue:focus,
.open > .dropdown-toggle.btn.btn-outline.btn-blue {
- background: rgba(96,163,222,1);
+ background: rgba(81,136,240,1);
color: rgba(255,255,255,1) !important;
}
.btn-outline.btn-green,
.btn-outline.btn-green[disabled],
.btn-outline.btn-green[disabled]:hover { color: rgba(27,192,109,1) !important; }
.btn-outline.btn-green:active,
.btn-outline.btn-green.active,
.btn-outline.btn-green:hover,
.btn-outline.btn-green:focus,
.open > .dropdown-toggle.btn.btn-outline.btn-green {
- background: rgba(47,212,129,1);
+ background: rgba(17,182,99,1);
color: rgba(255,255,255,1) !important;
}
.btn-outline.btn-orange,
.btn-outline.btn-orange[disabled],
.btn-outline.btn-orange[disabled]:hover { color: rgba(255,154,46,1) !important; }
.btn-outline.btn-orange:active,
.btn-outline.btn-orange.active,
.btn-outline.btn-orange:hover,
.btn-outline.btn-orange:focus,
.open > .dropdown-toggle.btn.btn-outline.btn-orange {
- background: rgba(255,174,66,1);
+ background: rgba(255,144,36,1);
color: rgba(255,255,255,1) !important;
}
.btn-outline.btn-purple,
.btn-outline.btn-purple[disabled],
-.btn-outline.btn-purple[disabled]:hover { color: rgba(110,115,136,1) !important; }
+.btn-outline.btn-purple[disabled]:hover { color: rgba(81,68,95,1) !important; }
.btn-outline.btn-purple:active,
.btn-outline.btn-purple.active,
.btn-outline.btn-purple:hover,
.btn-outline.btn-purple:focus,
.open > .dropdown-toggle.btn.btn-outline.btn-purple {
- background: rgba(130,135,156,1);
+ background: rgba(71,58,85,1);
color: rgba(255,255,255,1) !important;
}
.btn-outline.btn-red,
.btn-outline.btn-red[disabled],
.btn-outline.btn-red[disabled]:hover { color: rgba(225,80,80,1) !important; }
.btn-outline.btn-red:active,
.btn-outline.btn-red.active,
.btn-outline.btn-red:hover,
.btn-outline.btn-red:focus,
.open > .dropdown-toggle.btn.btn-outline.btn-red {
- background: rgba(255,99,88,1);
+ background: rgba(215,70,70,1);
color: rgba(255,255,255,1) !important;
}
.btn-outline.btn-smoke,
.btn-outline.btn-smoke[disabled],
-.btn-outline.btn-smoke[disabled]:hover { color: rgba(100,100,100,1) !important; }
+.btn-outline.btn-smoke[disabled]:hover { color: rgba(85,94,113,1) !important; }
.btn-outline.btn-smoke:active,
.btn-outline.btn-smoke.active,
.btn-outline.btn-smoke:hover,
.btn-outline.btn-smoke:focus,
.open > .dropdown-toggle.btn.btn-outline.btn-smoke {
- background: rgba(120,120,120,1);
+ background: rgba(75,84,103,1);
color: rgba(255,255,255,1) !important;
}
.btn-outline.btn-white,
.btn-outline.btn-white[disabled],
.btn-outline.btn-white[disabled]:hover { color: rgba(255,255,255,1) !important; }
.btn-outline.btn-white:active,
.btn-outline.btn-white.active,
.btn-outline.btn-white:hover,
.btn-outline.btn-white:focus,
-.open > .dropdown-toggle.btn.btn-outline.btn-white { color: rgba(34,34,34,1) !important; }
+.open > .dropdown-toggle.btn.btn-outline.btn-white {
+ background: rgba(240,243,245,1);
+ color: rgba(42,44,48,1) !important;
+}
.btn-outline.btn-yellow,
.btn-outline.btn-yellow[disabled],
-.btn-outline.btn-yellow[disabled]:hover { color: rgba(166,165,71,1) !important; }
+.btn-outline.btn-yellow[disabled]:hover { color: rgba(253,245,98,1) !important; }
.btn-outline.btn-yellow:active,
.btn-outline.btn-yellow.active,
.btn-outline.btn-yellow:hover,
.btn-outline.btn-yellow:focus,
.open > .dropdown-toggle.btn.btn-outline.btn-yellow {
- background: rgba(186,185,91,1);
+ background: rgba(243,235,88,1);
color: rgba(255,255,255,1) !important;
}
/* # Styles
================================================== */
@@ -373,11 +411,11 @@
margin-left: 0;
}
.btn-group > .dropdown-toggle:not(:first-child) { border-left-color: rgba(0,0,0,0.15); }
.btn-group > .btn,
.btn-group-vertical > .btn {
- margin-left: -2px;
+ margin-left: -1px;
position: relative;
}
.btn-group > .btn:first-child { margin-left: 0; }
.btn-group > .btn:active,
.btn-group > .btn.active,
@@ -393,11 +431,11 @@
.btn-group-vertical > .btn,
.btn-group-vertical > .btn-group,
.btn-group-vertical > .btn-group > .btn {
display: block;
margin-left: 0;
- margin-top: -2px;
+ margin-top: -1px;
max-width: 100%;
width: 100%;
}
.btn-group-vertical > .btn:first-child { margin-left: 0; }
.btn-group-justified {
@@ -411,10 +449,12 @@
display: table-cell;
float: none;
width: 1%;
}
.btn-group-justified > .btn-group .btn { width: 100%; }
+.btn-group-justified > .btn { border-right-width: 0; }
+.btn-group-justified > .btn:last-child { border-right-width: 1px; }
/* # Toolbar
================================================== */
.btn-toolbar {
font-size: 0;
@@ -440,19 +480,19 @@
.btn-group-responsive > .btn,
.btn-group-responsive > .btn-group,
.btn-group-responsive > .btn-group > .btn {
display: block;
margin-left: 0;
- margin-top: -2px;
+ margin-top: -1px;
max-width: 100%;
width: 100%;
}
.btn-group-responsive > .btn:first-child { margin-left: 0; }
.btn-group-vertical-responsive > .btn,
.btn-group-vertical-responsive > .btn-group,
.btn-group-vertical-responsive > .btn-group > .btn {
display: inline-block;
- margin-left: -2px;
+ margin-left: -1px;
margin-top: 0;
max-width: initial;
width: initial;
}
}
\ No newline at end of file