assets/css/romo/buttons.scss in romo-0.17.1 vs assets/css/romo/buttons.scss in romo-0.18.0
- old
+ new
@@ -7,11 +7,11 @@
display: inline-block;
@include rm-push;
@include align-center;
@include align-middle;
- @include button-bg($btnBackground, $btnBackgroundHighlight, $btnColor);
+ @include button-bg($btnBg, $btnBgHover, $btnColor);
@include border1;
border-color: $btnBorder;
border-bottom-color: darken($btnBorder, 10%);
@include box-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
}
@@ -77,84 +77,74 @@
input[type="submit"].romo-btn-block,
input[type="reset"].romo-btn-block,
input[type="button"].romo-btn-block,
.romo-btn-block { display: block; width: 100%; }
-a.romo-btn.romo-btn-alt,
-button.romo-btn.romo-btn-alt,
-.romo-btn.romo-btn-alt { @include button-bg($btnAltBackground, $btnAltBackgroundHighlight, $btnAltColor); }
-a.romo-btn.romo-btn-primary,
-button.romo-btn.romo-btn-primary,
-.romo-btn.romo-btn-primary { @include button-bg($btnPrimaryBackground, $btnPrimaryBackgroundHighlight, $btnPrimaryColor); }
-a.romo-btn.romo-btn-warning,
-button.romo-btn.romo-btn-warning,
-.romo-btn.romo-btn-warning { @include button-bg($btnWarningBackground, $btnWarningBackgroundHighlight, $btnWarningColor); }
-a.romo-btn.romo-btn-error,
-button.romo-btn.romo-btn-error,
-.romo-btn.romo-btn-error,
-a.romo-btn.romo-btn-danger,
-button.romo-btn.romo-btn-danger,
-.romo-btn.romo-btn-danger { @include button-bg($btnDangerBackground, $btnDangerBackgroundHighlight, $btnDangerColor); }
-a.romo-btn.romo-btn-info,
-button.romo-btn.romo-btn-info,
-.romo-btn.romo-btn-info { @include button-bg($btnInfoBackground, $btnInfoBackgroundHighlight, $btnInfoColor); }
-a.romo-btn.romo-btn-success,
-button.romo-btn.romo-btn-success,
-.romo-btn.romo-btn-success { @include button-bg($btnSuccessBackground, $btnSuccessBackgroundHighlight, $btnSuccessColor); }
-a.romo-btn.romo-btn-inverse,
-button.romo-btn.romo-btn-inverse,
-.romo-btn.romo-btn-inverse { @include button-bg($btnInverseBackground, $btnInverseBackgroundHighlight, $btnInverseColor); }
+/* emphasis colored buttons */
-a.romo-btn.romo-btn-link,
-button.romo-btn.romo-btn-link,
-.romo-btn.romo-btn-link,
-a.romo-btn.romo-btn-link.active,
-button.romo-btn.romo-btn-link.active,
-.romo-btn.romo-btn-link.active,
-a.romo-btn.romo-btn-link:active,
-button.romo-btn.romo-btn-link:active,
-.romo-btn.romo-btn-link:active,
-a.romo-btn.romo-btn-link.disabled,
-button.romo-btn.romo-btn-link.disabled,
-.romo-btn.romo-btn-link.disabled,
-a.romo-btn.romo-btn-link[disabled],
-button.romo-btn.romo-btn-link[disabled],
-.romo-btn.romo-btn-link[disabled] {
+a.romo-btn.romo-btn-alt, button.romo-btn.romo-btn-alt, .romo-btn.romo-btn-alt { @include button-bg($btnAltBg, $btnAltBgHover, $btnAltColor); }
+a.romo-btn.romo-btn-inverse, button.romo-btn.romo-btn-inverse, .romo-btn.romo-btn-inverse { @include button-bg($btnInverseBg, $btnInverseBgHover, $btnInverseColor); }
+a.romo-btn.romo-btn-warning, button.romo-btn.romo-btn-warning, .romo-btn.romo-btn-warning { @include button-bg($btnWarningBg, $btnWarningBgHover, $btnWarningColor); }
+a.romo-btn.romo-btn-danger, button.romo-btn.romo-btn-danger, .romo-btn.romo-btn-danger { @include button-bg($btnDangerBg, $btnDangerBgHover, $btnDangerColor); }
+a.romo-btn.romo-btn-info, button.romo-btn.romo-btn-info, .romo-btn.romo-btn-info { @include button-bg($btnInfoBg, $btnInfoBgHover, $btnInfoColor); }
+a.romo-btn.romo-btn-success, button.romo-btn.romo-btn-success, .romo-btn.romo-btn-success { @include button-bg($btnSuccessBg, $btnSuccessBgHover, $btnSuccessColor); }
+
+/* explicit colored buttons */
+
+a.romo-btn.romo-btn-dark-red, button.romo-btn.romo-btn-dark-red, .romo-btn.romo-btn-dark-red { @include button-bg($btnDarkRedBg, $btnDarkRedBgHover, $btnDarkRedColor); }
+a.romo-btn.romo-btn-red, button.romo-btn.romo-btn-red, .romo-btn.romo-btn-red { @include button-bg($btnRedBg, $btnRedBgHover, $btnRedColor); }
+a.romo-btn.romo-btn-light-red, button.romo-btn.romo-btn-light-red, .romo-btn.romo-btn-light-red { @include button-bg($btnLightRedBg, $btnLightRedBgHover, $btnLightRedColor); }
+a.romo-btn.romo-btn-pastel-red, button.romo-btn.romo-btn-pastel-red, .romo-btn.romo-btn-pastel-red { @include button-bg($btnPastelRedBg, $btnPastelRedBgHover, $btnPastelRedColor); }
+a.romo-btn.romo-btn-dark-orange, button.romo-btn.romo-btn-dark-orange, .romo-btn.romo-btn-dark-orange { @include button-bg($btnDarkOrangeBg, $btnDarkOrangeBgHover, $btnDarkOrangeColor); }
+a.romo-btn.romo-btn-orange, button.romo-btn.romo-btn-orange, .romo-btn.romo-btn-orange { @include button-bg($btnOrangeBg, $btnOrangeBgHover, $btnOrangeColor); }
+a.romo-btn.romo-btn-yellow, button.romo-btn.romo-btn-yellow, .romo-btn.romo-btn-yellow { @include button-bg($btnYellowBg, $btnYellowBgHover, $btnYellowColor); }
+a.romo-btn.romo-btn-pastel-yellow, button.romo-btn.romo-btn-pastel-yellow, .romo-btn.romo-btn-pastel-yellow { @include button-bg($btnPastelYellowBg, $btnPastelYellowBgHover, $btnPastelYellowColor); }
+a.romo-btn.romo-btn-purple, button.romo-btn.romo-btn-purple, .romo-btn.romo-btn-purple { @include button-bg($btnPurpleBg, $btnPurpleBgHover, $btnPurpleColor); }
+a.romo-btn.romo-btn-light-purple, button.romo-btn.romo-btn-light-purple, .romo-btn.romo-btn-light-purple { @include button-bg($btnLightPurpleBg, $btnLightPurpleBgHover, $btnLightPurpleColor); }
+a.romo-btn.romo-btn-dark-pink, button.romo-btn.romo-btn-dark-pink, .romo-btn.romo-btn-dark-pink { @include button-bg($btnDarkPinkBg, $btnDarkPinkBgHover, $btnDarkPinkColor); }
+a.romo-btn.romo-btn-hot-pink, button.romo-btn.romo-btn-hot-pink, .romo-btn.romo-btn-hot-pink { @include button-bg($btnHotPinkBg, $btnHotPinkBgHover, $btnHotPinkColor); }
+a.romo-btn.romo-btn-pink, button.romo-btn.romo-btn-pink, .romo-btn.romo-btn-pink { @include button-bg($btnPinkBg, $btnPinkBgHover, $btnPinkColor); }
+a.romo-btn.romo-btn-dark-green, button.romo-btn.romo-btn-dark-green, .romo-btn.romo-btn-dark-green { @include button-bg($btnDarkGreenBg, $btnDarkGreenBgHover, $btnDarkGreenColor); }
+a.romo-btn.romo-btn-green, button.romo-btn.romo-btn-green, .romo-btn.romo-btn-green { @include button-bg($btnGreenBg, $btnGreenBgHover, $btnGreenColor); }
+a.romo-btn.romo-btn-light-green, button.romo-btn.romo-btn-light-green, .romo-btn.romo-btn-light-green { @include button-bg($btnLightGreenBg, $btnLightGreenBgHover, $btnLightGreenColor); }
+a.romo-btn.romo-btn-pastel-green, button.romo-btn.romo-btn-pastel-green, .romo-btn.romo-btn-pastel-green { @include button-bg($btnPastelGreenBg, $btnPastelGreenBgHover, $btnPastelGreenColor); }
+a.romo-btn.romo-btn-navy, button.romo-btn.romo-btn-navy, .romo-btn.romo-btn-navy { @include button-bg($btnNavyBg, $btnNavyBgHover, $btnNavyColor); }
+a.romo-btn.romo-btn-dark-blue, button.romo-btn.romo-btn-dark-blue, .romo-btn.romo-btn-dark-blue { @include button-bg($btnDarkBlueBg, $btnDarkBlueBgHover, $btnDarkBlueColor); }
+a.romo-btn.romo-btn-blue, button.romo-btn.romo-btn-blue, .romo-btn.romo-btn-blue { @include button-bg($btnBlueBg, $btnBlueBgHover, $btnBlueColor); }
+a.romo-btn.romo-btn-light-blue, button.romo-btn.romo-btn-light-blue, .romo-btn.romo-btn-light-blue { @include button-bg($btnLightBlueBg, $btnLightBlueBgHover, $btnLightBlueColor); }
+a.romo-btn.romo-btn-pastel-blue, button.romo-btn.romo-btn-pastel-blue, .romo-btn.romo-btn-pastel-blue { @include button-bg($btnPastelBlueBg, $btnPastelBlueBgHover, $btnPastelBlueColor); }
+
+/* link buttons */
+
+a.romo-btn.romo-btn-link, button.romo-btn.romo-btn-link, .romo-btn.romo-btn-link,
+a.romo-btn.romo-btn-link.active, button.romo-btn.romo-btn-link.active, .romo-btn.romo-btn-link.active,
+a.romo-btn.romo-btn-link:active, button.romo-btn.romo-btn-link:active, .romo-btn.romo-btn-link:active,
+a.romo-btn.romo-btn-link.disabled, button.romo-btn.romo-btn-link.disabled, .romo-btn.romo-btn-link.disabled,
+a.romo-btn.romo-btn-link[disabled], button.romo-btn.romo-btn-link[disabled], .romo-btn.romo-btn-link[disabled] {
background-color: transparent;
background-image: none;
@include box-shadow(none);
}
-a.romo-btn.romo-btn-link,
-button.romo-btn.romo-btn-link { color: $linkColor; }
-a.romo-btn.romo-btn-link:hover,
-button.romo-btn.romo-btn-link:hover,
-a.romo-btn.romo-btn-link:focus,
-button.romo-btn.romo-btn-link:focus {
+a.romo-btn.romo-btn-link, button.romo-btn.romo-btn-link { color: $linkColor; }
+
+a.romo-btn.romo-btn-link:hover, button.romo-btn.romo-btn-link:hover,
+a.romo-btn.romo-btn-link:focus, button.romo-btn.romo-btn-link:focus {
color: $linkColorHover;
text-decoration: underline;
background-color: transparent;
}
-a.romo-btn.romo-btn-link.disabled,
-button.romo-btn.romo-btn-link.disabled,
-.romo-btn.romo-btn-link.disabled,
-a.romo-btn.romo-btn-link.disabled:hover,
-button.romo-btn.romo-btn-link.disabled:hover,
-.romo-btn.romo-btn-link.disabled:hover,
-a.romo-btn.romo-btn-link.disabled:focus,
-button.romo-btn.romo-btn-link.disabled:focus,
-.romo-btn.romo-btn-link.disabled:focus,
-a.romo-btn.romo-btn-link[disabled],
-button.romo-btn.romo-btn-link[disabled],
-.romo-btn.romo-btn-link[disabled],
-a.romo-btn.romo-btn-link[disabled]:hover,
-button.romo-btn.romo-btn-link[disabled]:hover,
-.romo-btn.romo-btn-link[disabled]:hover,
-a.romo-btn.romo-btn-link[disabled]:focus,
-button.romo-btn.romo-btn-link[disabled]:focus,
-.romo-btn.romo-btn-link[disabled]:focus { color: $disabledColor; }
+a.romo-btn.romo-btn-link.disabled, button.romo-btn.romo-btn-link.disabled, .romo-btn.romo-btn-link.disabled,
+a.romo-btn.romo-btn-link.disabled:hover, button.romo-btn.romo-btn-link.disabled:hover, .romo-btn.romo-btn-link.disabled:hover,
+a.romo-btn.romo-btn-link.disabled:focus, button.romo-btn.romo-btn-link.disabled:focus, .romo-btn.romo-btn-link.disabled:focus,
+a.romo-btn.romo-btn-link[disabled], button.romo-btn.romo-btn-link[disabled], .romo-btn.romo-btn-link[disabled],
+a.romo-btn.romo-btn-link[disabled]:hover, button.romo-btn.romo-btn-link[disabled]:hover, .romo-btn.romo-btn-link[disabled]:hover,
+a.romo-btn.romo-btn-link[disabled]:focus, button.romo-btn.romo-btn-link[disabled]:focus, .romo-btn.romo-btn-link[disabled]:focus {
+ color: $disabledColor;
+}
+
.romo-btn-group { @include display-inline-flex(!important); }
.romo-btn-group > * { display: inherit; }
.romo-btn-group .romo-btn:not(:last-child) { @include rm-border-right; }
@@ -166,12 +156,12 @@
.romo-btn-group.romo-btn-group-border-radius .romo-btn:last-child,
.romo-btn-group.romo-btn-group-border1-radius .romo-btn:last-child { @include border1-top-right-radius; @include border1-bottom-right-radius; }
.romo-btn-group.romo-btn-group-border0-radius .romo-btn:last-child { @include border0-top-right-radius; @include border0-bottom-right-radius; }
.romo-btn-group.romo-btn-group-border2-radius .romo-btn:last-child { @include border2-top-right-radius; @include border2-bottom-right-radius; }
-.romo-btn-group-vertical { display: inline-block; }
-.romo-btn-group-vertical .romo-btn { display: block; max-width: 100%; }
+.romo-btn-group-vertical { display: inline-block; }
+.romo-btn-group-vertical .romo-btn { display: block; max-width: 100%; }
.romo-btn-group-vertical .romo-btn:not(:last-child) { @include rm-border-bottom; }
.romo-btn-group-vertical.romo-btn-group-border-radius .romo-btn:first-child,
.romo-btn-group-vertical.romo-btn-group-border1-radius .romo-btn:first-child { @include border1-top-left-radius; @include border1-top-right-radius; }
.romo-btn-group-vertical.romo-btn-group-border0-radius .romo-btn:first-child { @include border0-top-left-radius; @include border0-top-right-radius; }
@@ -181,10 +171,10 @@
.romo-btn-group-vertical.romo-btn-group-border1-radius .romo-btn:last-child { @include border1-bottom-left-radius; @include border1-bottom-right-radius; }
.romo-btn-group-vertical.romo-btn-group-border0-radius .romo-btn:last-child { @include border0-bottom-left-radius; @include border0-bottom-right-radius; }
.romo-btn-group-vertical.romo-btn-group-border2-radius .romo-btn:last-child { @include border2-bottom-left-radius; @include border2-bottom-right-radius; }
.romo-btn-group .romo-btn-group-vertical:not(:last-child) .romo-btn { @include rm-border-right; }
-.romo-btn-group .romo-btn-group-vertical:last-child .romo-btn { @include border1-right; }
+.romo-btn-group .romo-btn-group-vertical:last-child .romo-btn { @include border1-right; }
.romo-btn-group.romo-btn-group-border-radius .romo-btn-group-vertical .romo-btn,
.romo-btn-group.romo-btn-group-border1-radius .romo-btn-group-vertical .romo-btn { @include rm-border-radius; }
.romo-btn-group.romo-btn-group-border0-radius .romo-btn-group-vertical .romo-btn { @include rm-border-radius; }
.romo-btn-group.romo-btn-group-border2-radius .romo-btn-group-vertical .romo-btn { @include rm-border-radius; }