assets/css/romo/_mixins.scss in romo-0.17.1 vs assets/css/romo/_mixins.scss in romo-0.18.0
- old
+ new
@@ -127,76 +127,210 @@
@mixin text-decoration-line-through($i:"") { text-decoration: line-through #{$i}; }
@mixin text-decoration-none($i:"") { text-decoration: none #{$i}; }
/* text alignment */
-@mixin align-left($i:"") { text-align: left #{$i}; }
+@mixin align-left($i:"") { text-align: left #{$i}; }
@mixin align-center($i:"") { text-align: center #{$i}; }
-@mixin align-right($i:"") { text-align: right #{$i}; }
+@mixin align-right($i:"") { text-align: right #{$i}; }
-@mixin align-top($i:"") { vertical-align: top #{$i}; }
+@mixin align-top($i:"") { vertical-align: top #{$i}; }
@mixin align-middle($i:"") { vertical-align: middle #{$i}; }
@mixin align-bottom($i:"") { vertical-align: bottom #{$i}; }
/* color emphasis */
@mixin bg-striped($i:"") { background-color: $stripedBgColor #{$i}; }
-@mixin bg-hover($i:"") { background-color: $bgColorHover #{$i}; }
+@mixin bg-hover($i:"") { background-color: $bgColorHover #{$i}; }
@mixin text-border-base($i:"") { color: $baseBorderColor #{$i}; }
-@mixin text-border-alt($i:"") { color: $altBorderColor #{$i}; }
+@mixin text-border-alt($i:"") { color: $altBorderColor #{$i}; }
@mixin text-disabled($i:"") { color: $disabledColor #{$i}; }
-@mixin text-base($i:"") { color: $baseText #{$i}; }
-@mixin text-base-hover($i:"") { color: $baseTextHover #{$i}; }
-@mixin bg-base($i:"") { background-color: $baseBackground #{$i}; }
-@mixin bg-base-hover($i:"") { background-color: $baseBackgroundHover #{$i}; }
-@mixin border-base($i:"") { border-color: $baseBorder #{$i}; }
+@mixin text-base($i:"") { color: $baseText #{$i}; }
+@mixin text-base-hover($i:"") { color: $baseTextHover #{$i}; }
+@mixin bg-base($i:"") { background-color: $baseBg #{$i}; }
+@mixin bg-base-hover($i:"") { background-color: $baseBgHover #{$i}; }
+@mixin border-base($i:"") { border-color: $baseBorder #{$i}; }
-@mixin text-alt($i:"") { color: $altText #{$i}; }
-@mixin text-alt-hover($i:"") { color: $altTextHover #{$i}; }
-@mixin bg-alt($i:"") { background-color: $altBackground #{$i}; }
-@mixin bg-alt-hover($i:"") { background-color: $altBackgroundHover #{$i}; }
-@mixin border-alt($i:"") { border-color: $altBorder #{$i}; }
+@mixin text-alt($i:"") { color: $altText #{$i}; }
+@mixin text-alt-hover($i:"") { color: $altTextHover #{$i}; }
+@mixin bg-alt($i:"") { background-color: $altBg #{$i}; }
+@mixin bg-alt-hover($i:"") { background-color: $altBgHover #{$i}; }
+@mixin border-alt($i:"") { border-color: $altBorder #{$i}; }
-@mixin text-muted($i:"") { color: $mutedText #{$i}; }
-@mixin text-muted-hover($i:"") { color: $mutedTextHover #{$i}; }
-@mixin bg-muted($i:"") { background-color: $mutedBackground #{$i}; }
-@mixin bg-muted-hover($i:"") { background-color: $mutedBackgroundHover #{$i}; }
-@mixin border-muted($i:"") { border-color: $mutedBorder #{$i}; }
+@mixin text-muted($i:"") { color: $mutedText #{$i}; }
+@mixin text-muted-hover($i:"") { color: $mutedTextHover #{$i}; }
+@mixin bg-muted($i:"") { background-color: $mutedBg #{$i}; }
+@mixin bg-muted-hover($i:"") { background-color: $mutedBgHover #{$i}; }
+@mixin border-muted($i:"") { border-color: $mutedBorder #{$i}; }
-@mixin text-warning($i:"") { color: $warningText #{$i}; }
-@mixin text-warning-hover($i:"") { color: $warningTextHover #{$i}; }
-@mixin bg-warning($i:"") { background-color: $warningBackground #{$i}; }
-@mixin bg-warning-hover($i:"") { background-color: $warningBackgroundHover #{$i}; }
-@mixin border-warning($i:"") { border-color: $warningBorder #{$i}; }
+@mixin text-warning($i:"") { color: $warningText #{$i}; }
+@mixin text-warning-hover($i:"") { color: $warningTextHover #{$i}; }
+@mixin bg-warning($i:"") { background-color: $warningBg #{$i}; }
+@mixin bg-warning-hover($i:"") { background-color: $warningBgHover #{$i}; }
+@mixin border-warning($i:"") { border-color: $warningBorder #{$i}; }
-@mixin text-error($i:"") { color: $errorText #{$i}; }
-@mixin text-error-hover($i:"") { color: $errorTextHover #{$i}; }
-@mixin bg-error($i:"") { background-color: $errorBackground #{$i}; }
-@mixin bg-error-hover($i:"") { background-color: $errorBackgroundHover #{$i}; }
-@mixin border-error($i:"") { border-color: $errorBorder #{$i}; }
+@mixin text-danger($i:"") { color: $dangerText #{$i}; }
+@mixin text-danger-hover($i:"") { color: $dangerTextHover #{$i}; }
+@mixin bg-danger($i:"") { background-color: $dangerBg #{$i}; }
+@mixin bg-danger-hover($i:"") { background-color: $dangerBgHover #{$i}; }
+@mixin border-danger($i:"") { border-color: $dangerBorder #{$i}; }
-@mixin text-info($i:"") { color: $infoText #{$i}; }
-@mixin text-info-hover($i:"") { color: $infoTextHover #{$i}; }
-@mixin bg-info($i:"") { background-color: $infoBackground #{$i}; }
-@mixin bg-info-hover($i:"") { background-color: $infoBackgroundHover #{$i}; }
-@mixin border-info($i:"") { border-color: $infoBorder #{$i}; }
+@mixin text-info($i:"") { color: $infoText #{$i}; }
+@mixin text-info-hover($i:"") { color: $infoTextHover #{$i}; }
+@mixin bg-info($i:"") { background-color: $infoBg #{$i}; }
+@mixin bg-info-hover($i:"") { background-color: $infoBgHover #{$i}; }
+@mixin border-info($i:"") { border-color: $infoBorder #{$i}; }
-@mixin text-success($i:"") { color: $successText #{$i}; }
-@mixin text-success-hover($i:"") { color: $successTextHover #{$i}; }
-@mixin bg-success($i:"") { background-color: $successBackground #{$i}; }
-@mixin bg-success-hover($i:"") { background-color: $successBackgroundHover #{$i}; }
-@mixin border-success($i:"") { border-color: $successBorder #{$i}; }
+@mixin text-success($i:"") { color: $successText #{$i}; }
+@mixin text-success-hover($i:"") { color: $successTextHover #{$i}; }
+@mixin bg-success($i:"") { background-color: $successBg #{$i}; }
+@mixin bg-success-hover($i:"") { background-color: $successBgHover #{$i}; }
+@mixin border-success($i:"") { border-color: $successBorder #{$i}; }
-@mixin text-inverse($i:"") { color: $inverseText #{$i}; }
-@mixin text-inverse-hover($i:"") { color: $inverseTextHover #{$i}; }
-@mixin bg-inverse($i:"") { background-color: $inverseBackground #{$i}; }
-@mixin bg-inverse-hover($i:"") { background-color: $inverseBackgroundHover #{$i}; }
-@mixin border-inverse($i:"") { border-color: $inverseBorder #{$i}; }
+@mixin text-inverse($i:"") { color: $inverseText #{$i}; }
+@mixin text-inverse-hover($i:"") { color: $inverseTextHover #{$i}; }
+@mixin bg-inverse($i:"") { background-color: $inverseBg #{$i}; }
+@mixin bg-inverse-hover($i:"") { background-color: $inverseBgHover #{$i}; }
+@mixin border-inverse($i:"") { border-color: $inverseBorder #{$i}; }
+/* explicit colors */
+
+@mixin text-dark-red($i:"") { color: $darkRed #{$i}; }
+@mixin text-dark-red-hover($i:"") { color: $darkRedTextHover #{$i}; }
+@mixin bg-dark-red($i:"") { background-color: $darkRed #{$i}; }
+@mixin bg-dark-red-hover($i:"") { background-color: $darkRedBgHover #{$i}; }
+@mixin border-dark-red($i:"") { border-color: $darkRed #{$i}; }
+
+@mixin text-red($i:"") { color: $red #{$i}; }
+@mixin text-red-hover($i:"") { color: $redTextHover #{$i}; }
+@mixin bg-red($i:"") { background-color: $red #{$i}; }
+@mixin bg-red-hover($i:"") { background-color: $redBgHover #{$i}; }
+@mixin border-red($i:"") { border-color: $red #{$i}; }
+
+@mixin text-light-red($i:"") { color: $lightRed #{$i}; }
+@mixin text-light-red-hover($i:"") { color: $lightRedTextHover #{$i}; }
+@mixin bg-light-red($i:"") { background-color: $lightRed #{$i}; }
+@mixin bg-light-red-hover($i:"") { background-color: $lightRedBgHover #{$i}; }
+@mixin border-light-red($i:"") { border-color: $lightRed #{$i}; }
+
+@mixin text-pastel-red($i:"") { color: $pastelRed #{$i}; }
+@mixin text-pastel-red-hover($i:"") { color: $pastelRedTextHover #{$i}; }
+@mixin bg-pastel-red($i:"") { background-color: $pastelRed #{$i}; }
+@mixin bg-pastel-red-hover($i:"") { background-color: $pastelRedBgHover #{$i}; }
+@mixin border-pastel-red($i:"") { border-color: $pastelRed #{$i}; }
+
+@mixin text-dark-orange($i:"") { color: $darkOrange #{$i}; }
+@mixin text-dark-orange-hover($i:"") { color: $darkOrangeTextHover #{$i}; }
+@mixin bg-dark-orange($i:"") { background-color: $darkOrange #{$i}; }
+@mixin bg-dark-orange-hover($i:"") { background-color: $darkOrangeBgHover #{$i}; }
+@mixin border-dark-orange($i:"") { border-color: $darkOrange #{$i}; }
+
+@mixin text-orange($i:"") { color: $orange #{$i}; }
+@mixin text-orange-hover($i:"") { color: $orangeTextHover #{$i}; }
+@mixin bg-orange($i:"") { background-color: $orange #{$i}; }
+@mixin bg-orange-hover($i:"") { background-color: $orangeBgHover #{$i}; }
+@mixin border-orange($i:"") { border-color: $orange #{$i}; }
+
+@mixin text-yellow($i:"") { color: $yellow #{$i}; }
+@mixin text-yellow-hover($i:"") { color: $yellowTextHover #{$i}; }
+@mixin bg-yellow($i:"") { background-color: $yellow #{$i}; }
+@mixin bg-yellow-hover($i:"") { background-color: $yellowBgHover #{$i}; }
+@mixin border-yellow($i:"") { border-color: $yellow #{$i}; }
+
+@mixin text-pastel-yellow($i:"") { color: $pastelYellow #{$i}; }
+@mixin text-pastel-yellow-hover($i:"") { color: $pastelYellowTextHover #{$i}; }
+@mixin bg-pastel-yellow($i:"") { background-color: $pastelYellow #{$i}; }
+@mixin bg-pastel-yellow-hover($i:"") { background-color: $pastelYellowBgHover #{$i}; }
+@mixin border-pastel-yellow($i:"") { border-color: $pastelYellow #{$i}; }
+
+@mixin text-purple($i:"") { color: $purple #{$i}; }
+@mixin text-purple-hover($i:"") { color: $purpleTextHover #{$i}; }
+@mixin bg-purple($i:"") { background-color: $purple #{$i}; }
+@mixin bg-purple-hover($i:"") { background-color: $purpleBgHover #{$i}; }
+@mixin border-purple($i:"") { border-color: $purple #{$i}; }
+
+@mixin text-light-purple($i:"") { color: $lightPurple #{$i}; }
+@mixin text-light-purple-hover($i:"") { color: $lightPurpleTextHover #{$i}; }
+@mixin bg-light-purple($i:"") { background-color: $lightPurple #{$i}; }
+@mixin bg-light-purple-hover($i:"") { background-color: $lightPurpleBgHover #{$i}; }
+@mixin border-light-purple($i:"") { border-color: $lightPurple #{$i}; }
+
+@mixin text-dark-pink($i:"") { color: $darkPink #{$i}; }
+@mixin text-dark-pink-hover($i:"") { color: $darkPinkTextHover #{$i}; }
+@mixin bg-dark-pink($i:"") { background-color: $darkPink #{$i}; }
+@mixin bg-dark-pink-hover($i:"") { background-color: $darkPinkBgHover #{$i}; }
+@mixin border-dark-pink($i:"") { border-color: $darkPink #{$i}; }
+
+@mixin text-hot-pink($i:"") { color: $hotPink #{$i}; }
+@mixin text-hot-pink-hover($i:"") { color: $hotPinkTextHover #{$i}; }
+@mixin bg-hot-pink($i:"") { background-color: $hotPink #{$i}; }
+@mixin bg-hot-pink-hover($i:"") { background-color: $hotPinkBgHover #{$i}; }
+@mixin border-hot-pink($i:"") { border-color: $hotPink #{$i}; }
+
+@mixin text-pink($i:"") { color: $pink #{$i}; }
+@mixin text-pink-hover($i:"") { color: $pinkTextHover #{$i}; }
+@mixin bg-pink($i:"") { background-color: $pink #{$i}; }
+@mixin bg-pink-hover($i:"") { background-color: $pinkBgHover #{$i}; }
+@mixin border-pink($i:"") { border-color: $pink #{$i}; }
+
+@mixin text-dark-green($i:"") { color: $darkGreen #{$i}; }
+@mixin text-dark-green-hover($i:"") { color: $darkGreenTextHover #{$i}; }
+@mixin bg-dark-green($i:"") { background-color: $darkGreen #{$i}; }
+@mixin bg-dark-green-hover($i:"") { background-color: $darkGreenBgHover #{$i}; }
+@mixin border-dark-green($i:"") { border-color: $darkGreen #{$i}; }
+
+@mixin text-green($i:"") { color: $green #{$i}; }
+@mixin text-green-hover($i:"") { color: $greenTextHover #{$i}; }
+@mixin bg-green($i:"") { background-color: $green #{$i}; }
+@mixin bg-green-hover($i:"") { background-color: $greenBgHover #{$i}; }
+@mixin border-green($i:"") { border-color: $green #{$i}; }
+
+@mixin text-light-green($i:"") { color: $lightGreen #{$i}; }
+@mixin text-light-green-hover($i:"") { color: $lightGreenTextHover #{$i}; }
+@mixin bg-light-green($i:"") { background-color: $lightGreen #{$i}; }
+@mixin bg-light-green-hover($i:"") { background-color: $lightGreenBgHover #{$i}; }
+@mixin border-light-green($i:"") { border-color: $lightGreen #{$i}; }
+
+@mixin text-pastel-green($i:"") { color: $pastelGreen #{$i}; }
+@mixin text-pastel-green-hover($i:"") { color: $pastelGreenTextHover #{$i}; }
+@mixin bg-pastel-green($i:"") { background-color: $pastelGreen #{$i}; }
+@mixin bg-pastel-green-hover($i:"") { background-color: $pastelGreenBgHover #{$i}; }
+@mixin border-pastel-green($i:"") { border-color: $pastelGreen #{$i}; }
+
+@mixin text-navy($i:"") { color: $navy #{$i}; }
+@mixin text-navy-hover($i:"") { color: $navyTextHover #{$i}; }
+@mixin bg-navy($i:"") { background-color: $navy #{$i}; }
+@mixin bg-navy-hover($i:"") { background-color: $navyBgHover #{$i}; }
+@mixin border-navy($i:"") { border-color: $navy #{$i}; }
+
+@mixin text-dark-blue($i:"") { color: $darkBlue #{$i}; }
+@mixin text-dark-blue-hover($i:"") { color: $darkBlueTextHover #{$i}; }
+@mixin bg-dark-blue($i:"") { background-color: $darkBlue #{$i}; }
+@mixin bg-dark-blue-hover($i:"") { background-color: $darkBlueBgHover #{$i}; }
+@mixin border-dark-blue($i:"") { border-color: $darkBlue #{$i}; }
+
+@mixin text-blue($i:"") { color: $blue #{$i}; }
+@mixin text-blue-hover($i:"") { color: $blueTextHover #{$i}; }
+@mixin bg-blue($i:"") { background-color: $blue #{$i}; }
+@mixin bg-blue-hover($i:"") { background-color: $blueBgHover #{$i}; }
+@mixin border-blue($i:"") { border-color: $blue #{$i}; }
+
+@mixin text-light-blue($i:"") { color: $lightBlue #{$i}; }
+@mixin text-light-blue-hover($i:"") { color: $lightBlueTextHover #{$i}; }
+@mixin bg-light-blue($i:"") { background-color: $lightBlue #{$i}; }
+@mixin bg-light-blue-hover($i:"") { background-color: $lightBlueBgHover #{$i}; }
+@mixin border-light-blue($i:"") { border-color: $lightBlue #{$i}; }
+
+@mixin text-pastel-blue($i:"") { color: $pastelBlue #{$i}; }
+@mixin text-pastel-blue-hover($i:"") { color: $pastelBlueTextHover #{$i}; }
+@mixin bg-pastel-blue($i:"") { background-color: $pastelBlue #{$i}; }
+@mixin bg-pastel-blue-hover($i:"") { background-color: $pastelBlueBgHover #{$i}; }
+@mixin border-pastel-blue($i:"") { border-color: $pastelBlue #{$i}; }
+
/* Gradients */
/* --------- */
@mixin gradient-horizontal($start, $end) {
background-color: $end;
@@ -244,21 +378,17 @@
}
/* Buttons */
/* ------- */
-@mixin button-bg($start, $end, $text) {
+@mixin button-bg($bg, $hover, $text) {
+ background-color: $bg;
color: $text;
- border-color: $end $end darken($end, 10%);
+ border-color: $hover $hover darken($hover, 10%);
- background-color: mix($start, $end, 60%);
- *background-color: $end; /* Darken IE7 buttons by default so they stand out more given they won't have borders */
-
- /* in these cases the gradient won't cover the background, so we override */
&:hover, &:focus, &.active, &:active, &.disabled, &[disabled] {
color: $text;
- background-color: $end;
- *background-color: darken($end, 5%);
+ background-color: $hover;
}
}
@mixin button-pad($lineHeight) {
$inputHeight: ($lineHeight / 2) * 3; /* 30px */