assets/css/romo/_vars.scss in romo-0.17.1 vs assets/css/romo/_vars.scss in romo-0.18.0
- old
+ new
@@ -37,120 +37,282 @@
/* colors */
$baseColor: #444;
$altColor: #444;
+$inverseColor: #fff;
$disabledColor: #999;
-$baseBgColor: #fff;
-$altBgColor: #ececec;
-$stripedBgColor: #fafafa;
-$bgColorHover: #f5f5f5;
+$baseBgColor: #fff;
+$altBgColor: #ececec;
+$inverseBgColor: #333;
+$disabledBgColor: #f9f9f9;
+$stripedBgColor: #fafafa;
+$bgColorHover: #f5f5f5;
-$baseBorderColor: #ccc;
-$altBorderColor: #fff;
+$baseBorderColor: #ccc;
+$altBorderColor: #fff;
+$inverseBorderColor: #000;
-$linkColor: #08c;
+$darkRed: #ce040d;
+$red: #ee4136;
+$lightRed: #ff725c;
+$pastelRed: #ffdfdf;
+$darkOrange: #ff6300;
+$orange: #ffa700;
+$yellow: #ffde37;
+$pastelYellow: #fbf5d5;
+$purple: #5e2ca5;
+$lightPurple: #a463f2;
+$darkPink: #d5008f;
+$hotPink: #ff41b4;
+$pink: #ff8fd2;
+$darkGreen: #137752;
+$green: #51a351;
+$lightGreen: #9eebcf;
+$pastelGreen: #dff0d8;
+$navy: #001b44;
+$darkBlue: #00449e;
+$blue: #357edd;
+$lightBlue: #96ccff;
+$pastelBlue: #d9edf7;
+
+/* basics colors */
+
+$linkColor: $blue;
$linkColorHover: darken($linkColor, 15%);
-$inputBgColor: #fff;
-$inputAltBgColor: #eee;
-$inputColor: #444;
-$inputDisabledColor: #eee;
+$inputBgColor: $baseBgColor;
+$inputColor: $baseColor;
+$inputDisabledColor: $altBgColor;
$inputFocusColor: rgba(82, 168, 236, 0.8);
-$inputHighlightBgColor: #3c83c7;
+$inputHighlightBgColor: $blue;
-$btnBorder: $baseBorderColor;
-$btnBackground: $baseBgColor;
-$btnBackgroundHighlight: darken($btnBackground, 10%);
-$btnColor: $baseColor;
-$btnColorHover: #333;
+$tabBgColor: $altBgColor;
+$tabBgColorHover: darken($altBgColor, 5%);
+$tabBgColorActive: $inverseBgColor;
+$tabColor: $baseColor;
+$tabColorActive: $inverseColor;
+$tabColorDisabled: $disabledColor;
-$btnAltBackground: $altBgColor;
-$btnAltBackgroundHighlight: darken($btnAltBackground, 10%);
-$btnAltColor: $btnColor;
+$tooltipBgColor: $inverseBgColor;
+$tooltipColor: $inverseColor;
-$btnPrimaryBackground: $linkColor;
-$btnPrimaryBackgroundHighlight: adjust_hue($btnPrimaryBackground, 20%);
-$btnPrimaryColor: #fff;
+$btnBorder: $baseBorderColor;
+$btnBg: darken($baseBgColor, 3%);
+$btnBgHover: darken($btnBg, 10%);
+$btnColor: $baseColor;
+$btnColorHover: #333;
-$btnWarningBackgroundHighlight: #f89406;
-$btnWarningBackground: lighten($btnWarningBackgroundHighlight, 15%);
-$btnWarningColor: #fff;
+$btnAltBg: darken($altBgColor, 4%);
+$btnAltBgHover: darken($btnAltBg, 10%);
+$btnAltColor: $btnColor;
-$btnDangerBackground: #ee5f5b;
-$btnDangerBackgroundHighlight: #bd362f;
-$btnDangerColor: #fff;
+$baseText: $baseColor;
+$baseTextHover: $baseText;
+$baseBg: $baseBgColor;
+$baseBgHover: $baseBg;
+$baseBorder: $baseBorderColor;
-$btnInfoBackground: #5bc0de;
-$btnInfoBackgroundHighlight: #2f96b4;
-$btnInfoColor: #fff;
+$altText: $altColor;
+$altTextHover: $altColor;
+$altBg: $altBgColor;
+$altBgHover: $altBg;
+$altBorder: $altBorderColor;
-$btnSuccessBackground: #62c462;
-$btnSuccessBackgroundHighlight: #51a351;
-$btnSuccessColor: #fff;
+$mutedText: $disabledColor;
+$mutedTextHover: darken($mutedText, 10%);
+$mutedBg: $disabledBgColor;
+$mutedBgHover: darken($mutedBg, 5%);
+$mutedBorder: darken(adjust_hue($mutedBg, -10), 7%);
-$btnInverseBackground: #444;
-$btnInverseBackgroundHighlight: #222;
-$btnInverseColor: #fff;
+/* emphasis colors */
-$baseText: $baseColor;
-$baseTextHover: $baseText;
-$baseBackground: $baseBgColor;
-$baseBackgroundHover: $baseBackground;
-$baseBorder: $baseBorderColor;
+$btnWarningBg: $orange;
+$btnWarningBgHover: darken($btnWarningBg, 5%);
+$btnWarningColor: $inverseColor;
-$altText: $altColor;
-$altTextHover: $altColor;
-$altBackground: $altBgColor;
-$altBackgroundHover: $altBackground;
-$altBorder: $altBorderColor;
+$btnDangerBg: $red;
+$btnDangerBgHover: darken($btnDangerBg, 10%);
+$btnDangerColor: $inverseColor;
-$mutedText: #999999;
-$mutedTextHover: darken($mutedText, 10%);
-$mutedBackground: #f9f9f9;
-$mutedBackgroundHover: darken($mutedBackground, 5%);
-$mutedBorder: darken(adjust_hue($mutedBackground, -10), 5%);
+$btnInfoBg: $blue;
+$btnInfoBgHover: darken($btnInfoBg, 10%);
+$btnInfoColor: $inverseColor;
-$warningText: #c09853;
-$warningTextHover: darken($warningText, 10%);
-$warningBackground: #fcf8e3;
-$warningBackgroundHover: darken($warningBackground, 5%);
-$warningBorder: darken(adjust_hue($warningBackground, -10), 3%);
+$btnSuccessBg: $green;
+$btnSuccessBgHover: darken($btnSuccessBg, 10%);
+$btnSuccessColor: $inverseColor;
-$errorText: #b94a48;
-$errorTextHover: darken($errorText, 10%);
-$errorBackground: #f2dede;
-$errorBackgroundHover: darken($errorBackground, 5%);
-$errorBorder: darken(adjust_hue($errorBackground, -10), 3%);
+$btnInverseBg: $inverseBgColor;
+$btnInverseBgHover: darken($btnInverseBg, 10%);
+$btnInverseColor: $inverseColor;
-$infoText: #3a87ad;
-$infoTextHover: darken($infoText, 10%);
-$infoBackground: #d9edf7;
-$infoBackgroundHover: darken($infoBackground, 5%);
-$infoBorder: darken(adjust_hue($infoBackground, -10), 7%);
+$warningText: darken($orange, 5%);
+$warningTextHover: darken($warningText, 10%);
+$warningBg: $pastelYellow;
+$warningBgHover: darken($warningBg, 5%);
+$warningBorder: darken(adjust_hue($warningBg, -10), 7%);
-$successText: #468847;
-$successTextHover: darken($successText, 10%);
-$successBackground: #dff0d8;
-$successBackgroundHover: darken($successBackground, 5%);
-$successBorder: darken(adjust_hue($successBackground, -10), 5%);
+$dangerText: darken($red, 5%);
+$dangerTextHover: darken($dangerText, 10%);
+$dangerBg: $pastelRed;
+$dangerBgHover: darken($dangerBg, 5%);
+$dangerBorder: darken(adjust_hue($dangerBg, -10), 7%);
-$inverseText: #ffffff;
-$inverseTextHover: darken($inverseText, 10%);
-$inverseBackground: #444444;
-$inverseBackgroundHover: darken($inverseBackground, 5%);
-$inverseBorder: darken(adjust_hue($inverseBackground, -10), 3%);
+$infoText: darken($blue, 5%);
+$infoTextHover: darken($infoText, 10%);
+$infoBg: $pastelBlue;
+$infoBgHover: darken($infoBg, 5%);
+$infoBorder: darken(adjust_hue($infoBg, -10), 7%);
-$tabBgColor: $altBgColor;
-$tabBgColorHover: darken($altBgColor, 5%);
-$tabBgColorActive: #222;
-$tabColor: $baseColor;
-$tabColorActive: #fff;
-$tabColorDisabled: $disabledColor;
+$successText: darken($green, 5%);
+$successTextHover: darken($successText, 10%);
+$successBg: $pastelGreen;
+$successBgHover: darken($successBg, 5%);
+$successBorder: darken(adjust_hue($successBg, -10), 7%);
-$tooltipBgColor: #222;
-$tooltipColor: #eee;
+$inverseText: $inverseColor;
+$inverseTextHover: darken($inverseText, 10%);
+$inverseBg: $inverseBgColor;
+$inverseBgHover: darken($inverseBg, 5%);
+$inverseBorder: darken(adjust_hue($inverseBg, -10), 7%);
+
+/* explicit colors */
+
+$darkRedTextHover: darken($darkRed, 10%);
+$darkRedBgHover: darken($darkRed, 5%);
+$redTextHover: darken($red, 10%);
+$redBgHover: darken($red, 5%);
+$lightRedTextHover: darken($lightRed, 10%);
+$lightRedBgHover: darken($lightRed, 5%);
+$pastelRedTextHover: darken($pastelRed, 10%);
+$pastelRedBgHover: darken($pastelRed, 5%);
+$darkOrangeTextHover: darken($darkOrange, 10%);
+$darkOrangeBgHover: darken($darkOrange, 5%);
+$orangeTextHover: darken($orange, 10%);
+$orangeBgHover: darken($orange, 5%);
+$yellowTextHover: darken($yellow, 10%);
+$yellowBgHover: darken($yellow, 10%);
+$pastelYellowTextHover: darken($pastelYellow, 10%);
+$pastelYellowBgHover: darken($pastelYellow, 5%);
+$purpleTextHover: darken($purple, 10%);
+$purpleBgHover: darken($purple, 5%);
+$lightPurpleTextHover: darken($lightPurple, 10%);
+$lightPurpleBgHover: darken($lightPurple, 5%);
+$darkPinkTextHover: darken($darkPink, 10%);
+$darkPinkBgHover: darken($darkPink, 5%);
+$hotPinkTextHover: darken($hotPink, 10%);
+$hotPinkBgHover: darken($hotPink, 5%);
+$pinkTextHover: darken($pink, 10%);
+$pinkBgHover: darken($pink, 5%);
+$darkGreenTextHover: darken($darkGreen, 10%);
+$darkGreenBgHover: darken($darkGreen, 5%);
+$greenTextHover: darken($green, 10%);
+$greenBgHover: darken($green, 5%);
+$lightGreenTextHover: darken($lightGreen, 10%);
+$lightGreenBgHover: darken($lightGreen, 5%);
+$pastelGreenTextHover: darken($pastelGreen, 10%);
+$pastelGreenBgHover: darken($pastelGreen, 5%);
+$navyTextHover: darken($navy, 10%);
+$navyBgHover: darken($navy, 5%);
+$darkBlueTextHover: darken($darkBlue, 10%);
+$darkBlueBgHover: darken($darkBlue, 5%);
+$blueTextHover: darken($blue, 10%);
+$blueBgHover: darken($blue, 5%);
+$lightBlueTextHover: darken($lightBlue, 10%);
+$lightBlueBgHover: darken($lightBlue, 5%);
+$pastelBlueTextHover: darken($pastelBlue, 10%);
+$pastelBlueBgHover: darken($pastelBlue, 5%);
+
+
+$btnDarkRedBg: $darkRed;
+$btnDarkRedBgHover: $darkRedBgHover;
+$btnDarkRedColor: $inverseColor;
+
+$btnRedBg: $red;
+$btnRedBgHover: $redBgHover;
+$btnRedColor: $inverseColor;
+
+$btnLightRedBg: $lightRed;
+$btnLightRedBgHover: $lightRedBgHover;
+$btnLightRedColor: $inverseColor;
+
+$btnPastelRedBg: $pastelRed;
+$btnPastelRedBgHover: $pastelRedBgHover;
+$btnPastelRedColor: $baseColor;
+
+$btnDarkOrangeBg: $darkOrange;
+$btnDarkOrangeBgHover: $darkOrangeBgHover;
+$btnDarkOrangeColor: $inverseColor;
+
+$btnOrangeBg: $orange;
+$btnOrangeBgHover: $orangeBgHover;
+$btnOrangeColor: $inverseColor;
+
+$btnYellowBg: $yellow;
+$btnYellowBgHover: $yellowBgHover;
+$btnYellowColor: $baseColor;
+
+$btnPastelYellowBg: $pastelYellow;
+$btnPastelYellowBgHover: $pastelYellowBgHover;
+$btnPastelYellowColor: $baseColor;
+
+$btnPurpleBg: $purple;
+$btnPurpleBgHover: $purpleBgHover;
+$btnPurpleColor: $inverseColor;
+
+$btnLightPurpleBg: $lightPurple;
+$btnLightPurpleBgHover: $lightPurpleBgHover;
+$btnLightPurpleColor: $inverseColor;
+
+$btnDarkPinkBg: $darkPink;
+$btnDarkPinkBgHover: $darkPinkBgHover;
+$btnDarkPinkColor: $inverseColor;
+
+$btnHotPinkBg: $hotPink;
+$btnHotPinkBgHover: $hotPinkBgHover;
+$btnHotPinkColor: $inverseColor;
+
+$btnPinkBg: $pink;
+$btnPinkBgHover: $pinkBgHover;
+$btnPinkColor: $inverseColor;
+
+$btnDarkGreenBg: $darkGreen;
+$btnDarkGreenBgHover: $darkGreenBgHover;
+$btnDarkGreenColor: $inverseColor;
+
+$btnGreenBg: $green;
+$btnGreenBgHover: $greenBgHover;
+$btnGreenColor: $inverseColor;
+
+$btnLightGreenBg: $lightGreen;
+$btnLightGreenBgHover: $lightGreenBgHover;
+$btnLightGreenColor: $baseColor;
+
+$btnPastelGreenBg: $pastelGreen;
+$btnPastelGreenBgHover: $pastelGreenBgHover;
+$btnPastelGreenColor: $baseColor;
+
+$btnNavyBg: $navy;
+$btnNavyBgHover: $navyBgHover;
+$btnNavyColor: $inverseColor;
+
+$btnDarkBlueBg: $darkBlue;
+$btnDarkBlueBgHover: $darkBlueBgHover;
+$btnDarkBlueColor: $inverseColor;
+
+$btnBlueBg: $blue;
+$btnBlueBgHover: $blueBgHover;
+$btnBlueColor: $inverseColor;
+
+$btnLightBlueBg: $lightBlue;
+$btnLightBlueBgHover: $lightBlueBgHover;
+$btnLightBlueColor: $inverseColor;
+
+$btnPastelBlueBg: $pastelBlue;
+$btnPastelBlueBgHover: $pastelBlueBgHover;
+$btnPastelBlueColor: $baseColor;
/* borders */
$borderSize1: 1px;
$borderSize0: $borderSize1 * 1;