From 6f35b10e18bdd2d998d6df596f99a25f93e209f4 Mon Sep 17 00:00:00 2001 From: jlukic Date: Wed, 10 Sep 2014 20:14:02 -0400 Subject: [PATCH] Add a couple more themes for fun --- .../packages/flat/globals/site.overrides | 3 + .../packages/flat/globals/site.variables | 484 ++++++++++++++++++ server/documents/collections/form.html.eco | 2 +- src/definitions/collections/form.less | 2 + src/definitions/modules/dropdown.less | 6 +- .../chubby/collections/form.overrides | 8 + .../chubby/collections/form.variables | 9 + .../default/collections/form.variables | 1 + .../default/modules/dropdown.variables | 6 +- .../packages/flat/globals/site.overrides | 3 + .../packages/flat/globals/site.variables | 484 ++++++++++++++++++ .../github/collections/form.overrides | 13 + 12 files changed, 1014 insertions(+), 7 deletions(-) create mode 100644 build/less/themes/packages/flat/globals/site.overrides create mode 100644 build/less/themes/packages/flat/globals/site.variables create mode 100755 src/themes/packages/chubby/collections/form.overrides create mode 100755 src/themes/packages/chubby/collections/form.variables create mode 100755 src/themes/packages/flat/globals/site.overrides create mode 100755 src/themes/packages/flat/globals/site.variables diff --git a/build/less/themes/packages/flat/globals/site.overrides b/build/less/themes/packages/flat/globals/site.overrides new file mode 100644 index 000000000..c5c53367f --- /dev/null +++ b/build/less/themes/packages/flat/globals/site.overrides @@ -0,0 +1,3 @@ +/******************************* + Overrides +*******************************/ diff --git a/build/less/themes/packages/flat/globals/site.variables b/build/less/themes/packages/flat/globals/site.variables new file mode 100644 index 000000000..3cb0cd11f --- /dev/null +++ b/build/less/themes/packages/flat/globals/site.variables @@ -0,0 +1,484 @@ +/******************************* + Site Settings +*******************************/ + +/*------------------- + Paths +--------------------*/ + +@imagePath : "../../themes/packages/default/assets/images"; +@fontPath : "../../themes/packages/default/assets/fonts"; + +/*------------------- + Fonts +--------------------*/ + +@headerFont : "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif; +@pageFont : "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif; +@fontSmoothing : antialiased; + +/*------------------- + Site Colors +--------------------*/ + +/*--- Colors ---*/ +@blue : #0074D9; +@green : #2ECC40; +@orange : #FF851B; +@pink : #D9499A; +@purple : #A24096; +@red : #FF4136; +@teal : #39CCCC; +@yellow : #FFCB08; + +@black : #191919; +@grey : #CCCCCC; +@white : #FFFFFF; + +/*--- Light Colors ---*/ +@lightBlue : #54C8FF; +@lightGreen : #2ECC40; +@lightOrange : #FF851B; +@lightPink : #FF8EDF; +@lightPurple : #CDC6FF; +@lightRed : #FF695E; +@lightTeal : #6DFFFF; +@lightYellow : #FFE21F; + +@primaryColor : @blue; +@secondaryColor : @black; + + +/*------------------- + Page +--------------------*/ + +@bodyBackground : #FCFCFC; +@fontSize : 14px; +@textColor : rgba(0, 0, 0, 0.8); + +@headerMargin : 1em 0em 1rem; +@paragraphMargin : 0em 0em 1em; + +@linkColor : #009FDA; +@linkUnderline : none; +@linkHoverColor : lighten( @linkColor, 5); + +@highlightBackground : #FFFFCC; +@highlightColor : @textColor; + + + +/*------------------- + Background Colors +--------------------*/ + +@subtleTransparentBlack : rgba(0, 0, 0, 0.03); +@transparentBlack : rgba(0, 0, 0, 0.05); +@strongTransparentBlack : rgba(0, 0, 0, 0.10); + +@subtleTransparentWhite : rgba(255, 255, 255, 0.01); +@transparentWhite : rgba(255, 255, 255, 0.05); +@strongTransparentWhite : rgba(255, 255, 255, 0.01); + +/* Used for differentiating neutrals */ +@subtleGradient: linear-gradient(transparent, rgba(0, 0, 0, 0.05)); + +/* Used for differentiating layers */ +@subtleShadow: 0px 1px 2px 0 rgba(0, 0, 0, 0.05); + + +/*------------------- + Grid +--------------------*/ + +@columnCount: 16; + +/*------------------- + Breakpoints +--------------------*/ + +@mobileBreakpoint : 320px; +@tabletBreakpoint : 768px; +@computerBreakpoint : 992px; +@largeMonitorBreakpoint : 1400px; +@widescreenMonitorBreakpoint : 1900px; + + +/******************************* + Power-User +*******************************/ + +/*------------------- + Icons +--------------------*/ + +/* Max Width of Icon */ +@iconWidth : 1.23em; + +/*------------------- + Easing +--------------------*/ + +@defaultEasing: ease; + + +/*--- Neutrals ---*/ +@fullBlack : #000000; +@lightBlack : #333333; +@darkGrey : #AAAAAA; +@lightGrey : #DCDDDE; +@offWhite : #FAFAFA; +@darkWhite : #F0F0F0; + +/*--- Colored Backgrounds ---*/ +@blueBackground : #D3E4F3; +@greenBackground : #DEF2E0; +@orangeBackground : #F7E5D6; +@pinkBackground : #F9CEE6; +@purpleBackground : #E0DDF5; +@redBackground : #F8D5D3; +@tealBackground : #D2F5F5; +@yellowBackground : #FCF5D8; + +/*--- Colored Text ---*/ +@blueTextColor : @blue; +@orangeTextColor : @orange; +@pinkTextColor : @pink; +@purpleTextColor : @purple; +@redTextColor : @red; +@greenTextColor : #1EBC30; // Green is difficult to read +@tealTextColor : #10A3A3; // Teal text is difficult to read +@yellowTextColor : #B58105; // Yellow text is difficult to read + +/*--- Colored Headers ---*/ +@blueHeaderColor : darken(@blueTextColor, 5); +@greenHeaderColor : darken(@greenTextColor, 5); +@orangeHeaderColor : darken(@orangeTextColor, 5); +@pinkHeaderColor : darken(@pinkTextColor, 5); +@purpleHeaderColor : darken(@purpleTextColor, 5); +@redHeaderColor : darken(@redTextColor, 5); +@tealHeaderColor : darken(@tealTextColor, 5); +@yellowHeaderColor : darken(@yellowTextColor, 5); + + + +/*------------------- + Emotive Colors +--------------------*/ + +/* Mood */ +@positiveBackgroundColor : #E4F5DD; +@negativeBackgroundColor : #FAE8E8; + +@positiveBorderColor : #B7CAA7; +@negativeBorderColor : #DBB1B1; + +/* Solid Background Color */ +@positiveColor : @green; +@negativeColor : @red; + +@positiveTextColor : #3C763D; +@negativeTextColor : #A94442; + + +/* Status */ +@infoBackgroundColor : #E5F6FB; +@warningBackgroundColor : #FCF8E3; +@successBackgroundColor : @positiveBackgroundColor; +@errorBackgroundColor : @negativeBackgroundColor; + +@infoBorderColor : #AAD6DF; +@warningBorderColor : #D3C4A5; +@successBorderColor : @positiveBorderColor; +@errorBorderColor : @negativeBorderColor; + +@infoTextColor : #337B92; +@warningTextColor : #8A6D3B; +@successTextColor : @positiveTextColor; +@errorTextColor : @negativeTextColor; + +/* Darkened Headers */ +@positiveHeaderColor : darken(@positiveTextColor, 5); +@negativeHeaderColor : darken(@negativeTextColor, 5); +@infoHeaderColor : darken(@infoTextColor, 5); +@warningHeaderColor : darken(@warningTextColor, 5); +@successHeaderColor : darken(@successTextColor, 5); +@errorHeaderColor : darken(@errorTextColor, 5); + +/*------------------- + Neutral Text +--------------------*/ + +@darkTextColor : rgba(0, 0, 0, 0.85); +@lightTextColor : rgba(0, 0, 0, 0.4); + +@invertedTextColor : rgba(255, 255, 255, 1); +@invertedLightTextColor : rgba(255, 255, 255, 0.8); +@invertedUnselectedTextColor : rgba(255, 255, 255, 0.5); +@invertedSelectedTextColor : rgba(255, 255, 255, 1); +@invertedDisabledTextColor : rgba(255, 255, 255, 0.3); + +@unselectedTextColor : rgba(0, 0, 0, 0.4); +@selectedTextColor : rgba(0, 0, 0, 0.8); +@disabledTextColor : rgba(0, 0, 0, 0.2); + +/*------------------- + Brand Colors +--------------------*/ + +@facebookColor : #3B579D; +@twitterColor : #4092CC; +@googlePlusColor : #D34836; +@linkedInColor : #1F88BE; +@youtubeColor : #CC181E; +@instagramColor : #49769C; +@pinterestColor : #00ACED; +@vkColor : #4D7198; + +/*------------------- + Grid Columns +--------------------*/ + +@oneWide : (1 / @columnCount * 100%); +@twoWide : (2 / @columnCount * 100%); +@threeWide : (3 / @columnCount * 100%); +@fourWide : (4 / @columnCount * 100%); +@fiveWide : (5 / @columnCount * 100%); +@sixWide : (6 / @columnCount * 100%); +@sevenWide : (7 / @columnCount * 100%); +@eightWide : (8 / @columnCount * 100%); +@nineWide : (9 / @columnCount * 100%); +@tenWide : (10 / @columnCount * 100%); +@elevenWide : (11 / @columnCount * 100%); +@twelveWide : (12 / @columnCount * 100%); +@thirteenWide : (13 / @columnCount * 100%); +@fourteenWide : (14 / @columnCount * 100%); +@fifteenWide : (15 / @columnCount * 100%); +@sixteenWide : (16 / @columnCount * 100%); + +@oneColumn : (1 / 1 * 100%); +@twoColumn : (1 / 2 * 100%); +@threeColumn : (1 / 3 * 100%); +@fourColumn : (1 / 4 * 100%); +@fiveColumn : (1 / 5 * 100%); +@sixColumn : (1 / 6 * 100%); +@sevenColumn : (1 / 7 * 100%); +@eightColumn : (1 / 8 * 100%); +@nineColumn : (1 / 9 * 100%); +@tenColumn : (1 / 10 * 100%); +@elevenColumn : (1 / 11 * 100%); +@twelveColumn : (1 / 12 * 100%); +@thirteenColumn : (1 / 13 * 100%); +@fourteenColumn : (1 / 14 * 100%); +@fifteenColumn : (1 / 15 * 100%); +@sixteenColumn : (1 / 16 * 100%); + +/*------------------- + Borders +--------------------*/ + +@circularRadius : 500rem; + +@borderColor : rgba(0, 0, 0, 0.1); +@selectedBorderColor : rgba(0, 0, 0, 0.2); + +@solidBorderColor : #DDDDDD; +@solidSelectedBorderColor : #B0B0B0; + +@whiteBorderColor : rgba(255, 255, 255, 0.2); +@selectedWhiteBorderColor : rgba(255, 255, 255, 0.8); + +@solidWhiteBorderColor : #555555; +@selectedSolidWhiteBorderColor : #999999; + +/*------------------- + Sizes +--------------------*/ + +@mini : 0.7em; +@tiny : 0.8em; +@small : 0.875em; +@medium : 1em; +@large : 1.125em; +@big : 1.25em; +@huge : 1.375em; +@massive : 1.5em; + + +/*------------------- + Transitions +--------------------*/ + +@transitionDuration : 0.25s; +@transitionEasing : ease; + + +/******************************* + States +*******************************/ + +/*------------------- + Disabled +--------------------*/ + +@disabledOpacity: 0.3; + +/*------------------- + Hover +--------------------*/ + +/*--- Colors ---*/ +@primaryColorHover : lighten( @primaryColor, 7); +@secondaryColorHover : lighten( @secondaryColor, 7); + +@blueHover : lighten( @blue, 7); +@greenHover : lighten( @green, 7); +@orangeHover : lighten( @orange, 7); +@pinkHover : lighten( @pink, 7); +@purpleHover : lighten( @purple, 7); +@redHover : lighten( @red, 7); +@tealHover : lighten( @teal, 7); +@yellowHover : lighten( @yellow, 7); + +@lightBlueHover : lighten( @lightBlue, 7); +@lightGreenHover : lighten( @lightGreen, 7); +@lightOrangeHover : lighten( @lightOrange, 7); +@lightPinkHover : lighten( @lightPink, 7); +@lightPurpleHover : lighten( @lightPurple, 7); +@lightRedHover : lighten( @lightRed, 7); +@lightTealHover : lighten( @lightTeal, 7); +@lightYellowHover : lighten( @lightYellow, 7); + +/*--- Emotive ---*/ +@positiveColorHover : lighten( @positiveColor, 7); +@negativeColorHover : lighten( @negativeColor, 7); + +/*--- Neutrals ---*/ +@fullBlackHover : lighten( @fullBlack, 7); +@blackHover : lighten( @black, 7); +@lightBlackHover : lighten( @lightBlack, 7); + +@lightGreyHover : lighten( @lightGrey, 7); +@greyHover : lighten( @grey, 7); +@darkGreyHover : lighten( @darkGrey, 7); + +@whiteHover : lighten( @white, 7); +@offWhiteHover : lighten( @offWhite, 7); +@darkWhiteHover : lighten( @darkWhite, 7); + +@facebookHoverColor : lighten( @facebookColor, 7); +@twitterHoverColor : lighten( @twitterColor, 7); +@googlePlusHoverColor : lighten( @googlePlusColor, 7); +@linkedInHoverColor : lighten( @linkedInColor, 7); +@youtubeHoverColor : lighten( @youtubeColor, 7); +@instagramHoverColor : lighten( @instagramColor, 7); +@pinterestHoverColor : lighten( @pinterestColor, 7); +@vkHoverColor : lighten( @vkColor, 7); + + +/*------------------- + Down (:active) +--------------------*/ + + +/*--- Colors ---*/ +@primaryColorDown : darken(@primaryColor, 7); +@secondaryColorDown : darken(@secondaryColor, 7); + +@blueDown : darken(@blue, 7); +@greenDown : darken(@green, 7); +@orangeDown : darken(@orange, 7); +@pinkDown : darken(@pink, 7); +@purpleDown : darken(@purple, 7); +@redDown : darken(@red, 7); +@tealDown : darken(@teal, 7); +@yellowDown : darken(@yellow, 7); + +@lightBlueDown : darken(@lightBlue, 7); +@lightGreenDown : darken(@lightGreen, 7); +@lightOrangeDown : darken(@lightOrange, 7); +@lightPinkDown : darken(@lightPink, 7); +@lightPurpleDown : darken(@lightPurple, 7); +@lightRedDown : darken(@lightRed, 7); +@lightTealDown : darken(@lightTeal, 7); +@lightYellowDown : darken(@lightYellow, 7); + +/*--- Emotive ---*/ +@positiveColorDown : darken(@positiveColor, 7); +@negativeColorDown : darken(@negativeColor, 7); + +/*--- Neutrals ---*/ +@fullBlackDown : darken(@fullBlack, 7); +@blackDown : darken(@black, 7); +@lightBlackDown : darken(@lightBlack, 7); + +@lightGreyDown : darken(@lightGrey, 7); +@greyDown : darken(@grey, 7); +@darkGreyDown : darken(@darkGrey, 7); + +@whiteDown : darken(@white, 7); +@offWhiteDown : darken(@offWhite, 7); +@darkWhiteDown : darken(@darkWhite, 7); + +@facebookDownColor : darken(@facebookColor, 7); +@twitterDownColor : darken(@twitterColor, 7); +@googlePlusDownColor : darken(@googlePlusColor, 7); +@linkedInDownColor : darken(@linkedInColor, 7); +@youtubeDownColor : darken(@youtubeColor, 7); +@instagramDownColor : darken(@instagramColor, 7); +@pinterestDownColor : darken(@pinterestColor, 7); +@vkDownColor : darken(@vkColor, 7); + + +/*------------------- + Active +--------------------*/ + +/*--- Standard ---*/ +@primaryColorActive : darken(@primaryColor, 5); +@secondaryColorActive : darken(@secondaryColor, 5); + +@blueActive : darken(@blue, 5); +@greenActive : darken(@green, 5); +@orangeActive : darken(@orange, 5); +@pinkActive : darken(@pink, 5); +@purpleActive : darken(@purple, 5); +@redActive : darken(@red, 5); +@tealActive : darken(@teal, 5); +@yellowActive : darken(@yellow, 5); + +@lightBlueActive : darken(@lightBlue, 5); +@lightGreenActive : darken(@lightGreen, 5); +@lightOrangeActive : darken(@lightOrange, 5); +@lightPinkActive : darken(@lightPink, 5); +@lightPurpleActive : darken(@lightPurple, 5); +@lightRedActive : darken(@lightRed, 5); +@lightTealActive : darken(@lightTeal, 5); +@lightYellowActive : darken(@lightYellow, 5); + +/*--- Emotive ---*/ +@positiveColorActive : darken(@positiveColor, 5); +@negativeColorActive : darken(@negativeColor, 5); + +/*--- Neutrals ---*/ +@fullBlackActive : darken(@fullBlack, 5); +@blackActive : darken(@black, 5); +@lightBlackActive : darken(@lightBlack, 5); + +@lightGreyActive : darken(@lightGrey, 5); +@greyActive : darken(@grey, 5); +@darkGreyActive : darken(@darkGrey, 5); + +@whiteActive : darken(@white, 5); +@offWhiteActive : darken(@offWhite, 5); +@darkWhiteActive : darken(@darkWhite, 5); + +@facebookActiveColor : darken(@facebookColor, 5); +@twitterActiveColor : darken(@twitterColor, 5); +@googlePlusActiveColor : darken(@googlePlusColor, 5); +@linkedInActiveColor : darken(@linkedInColor, 5); +@youtubeActiveColor : darken(@youtubeColor, 5); +@instagramActiveColor : darken(@instagramColor, 5); +@pinterestActiveColor : darken(@pinterestColor, 5); +@vkActiveColor : darken(@vkColor, 5); diff --git a/server/documents/collections/form.html.eco b/server/documents/collections/form.html.eco index 4c6cd5d26..c100516ad 100755 --- a/server/documents/collections/form.html.eco +++ b/server/documents/collections/form.html.eco @@ -9,7 +9,7 @@ title : 'Form' description : 'A form is a collection of user input elements' type : 'UI Collection' -themes : ['Default', 'GitHub'] +themes : ['Default', 'Chubby', 'GitHub'] --- diff --git a/src/definitions/collections/form.less b/src/definitions/collections/form.less index a6317a93a..b6614f192 100755 --- a/src/definitions/collections/form.less +++ b/src/definitions/collections/form.less @@ -65,6 +65,7 @@ color: @labelColor; font-size: @labelFontSize; font-weight: @labelFontWeight; + text-transform: @labelTextTransform; } /*-------------------- @@ -109,6 +110,7 @@ transition: @inputTransition; } + .ui.textarea, .ui.form textarea { margin: 0em; diff --git a/src/definitions/modules/dropdown.less b/src/definitions/modules/dropdown.less index ee6dfb683..359611fe5 100755 --- a/src/definitions/modules/dropdown.less +++ b/src/definitions/modules/dropdown.less @@ -345,13 +345,13 @@ select.ui.dropdown { /* Hover */ .ui.selection.dropdown:hover { - border: @selectionHoverBorder; + border-color: @selectionHoverBorderColor; box-shadow: @selectionHoverBoxShadow; } /* Visible Hover */ .ui.selection.visible.dropdown:hover { - border: @selectionVisibleHoverBorder; + border-color: @selectionVisibleHoverBorderColor; box-shadow: @selectionVisibleHoverBoxShadow; } .ui.selection.visible.dropdown:hover .menu { @@ -361,7 +361,7 @@ select.ui.dropdown { /* Visible */ .ui.selection.dropdown.visible { - border: @selectionVisibleBorder; + border-color: @selectionVisibleBorderColor; box-shadow: @selectionVisibleBoxShadow; } .ui.visible.selection.dropdown > .dropdown.icon { diff --git a/src/themes/packages/chubby/collections/form.overrides b/src/themes/packages/chubby/collections/form.overrides new file mode 100755 index 000000000..59f10e8f9 --- /dev/null +++ b/src/themes/packages/chubby/collections/form.overrides @@ -0,0 +1,8 @@ +/*------------------- + Form Variables +--------------------*/ + +.ui.form .selection.dropdown { + padding: 1.1em 1.2em; + border-width: 2px; +} \ No newline at end of file diff --git a/src/themes/packages/chubby/collections/form.variables b/src/themes/packages/chubby/collections/form.variables new file mode 100755 index 000000000..1b7e327bf --- /dev/null +++ b/src/themes/packages/chubby/collections/form.variables @@ -0,0 +1,9 @@ +/*------------------- + Form Variables +--------------------*/ + +@labelTextTransform: uppercase; +@labelFontSize: 0.8em; + +@inputPadding: 1em 1.2em; +@inputBorder: 2px solid @borderColor; \ No newline at end of file diff --git a/src/themes/packages/default/collections/form.variables b/src/themes/packages/default/collections/form.variables index 26a84d9d3..9e410a6ce 100755 --- a/src/themes/packages/default/collections/form.variables +++ b/src/themes/packages/default/collections/form.variables @@ -18,6 +18,7 @@ @labelFontWeight: bold; @labelDistance: 0.3rem; @labelColor: @textColor; +@labelTextTransform: none; /* Input */ @inputWidth: 100%; diff --git a/src/themes/packages/default/modules/dropdown.variables b/src/themes/packages/default/modules/dropdown.variables index c684bd937..38ee726f7 100755 --- a/src/themes/packages/default/modules/dropdown.variables +++ b/src/themes/packages/default/modules/dropdown.variables @@ -128,17 +128,17 @@ b Types ; /* Hover */ -@selectionHoverBorder: 1px solid @selectedBorderColor; +@selectionHoverBorderColor: @selectedBorderColor; @selectionHoverBoxShadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.05); /* Visible */ -@selectionVisibleBorder: 1px solid @borderColor; +@selectionVisibleBorderColor: @borderColor; @selectionVisibleBoxShadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.08); @selectionVisibleTextFontWeight: normal; @selectionVisibleTextColor: @selectedTextColor; /* Visible Hover */ -@selectionVisibleHoverBorder: 1px solid @selectedBorderColor; +@selectionVisibleHoverBorderColor: @selectedBorderColor; @selectionVisibleHoverBoxShadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.08); @selectionVisibleHoverMenuBorder: 1px solid @selectedBorderColor; @selectionVisibleHoverMenuBoxShadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.08); diff --git a/src/themes/packages/flat/globals/site.overrides b/src/themes/packages/flat/globals/site.overrides new file mode 100755 index 000000000..c5c53367f --- /dev/null +++ b/src/themes/packages/flat/globals/site.overrides @@ -0,0 +1,3 @@ +/******************************* + Overrides +*******************************/ diff --git a/src/themes/packages/flat/globals/site.variables b/src/themes/packages/flat/globals/site.variables new file mode 100755 index 000000000..3cb0cd11f --- /dev/null +++ b/src/themes/packages/flat/globals/site.variables @@ -0,0 +1,484 @@ +/******************************* + Site Settings +*******************************/ + +/*------------------- + Paths +--------------------*/ + +@imagePath : "../../themes/packages/default/assets/images"; +@fontPath : "../../themes/packages/default/assets/fonts"; + +/*------------------- + Fonts +--------------------*/ + +@headerFont : "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif; +@pageFont : "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif; +@fontSmoothing : antialiased; + +/*------------------- + Site Colors +--------------------*/ + +/*--- Colors ---*/ +@blue : #0074D9; +@green : #2ECC40; +@orange : #FF851B; +@pink : #D9499A; +@purple : #A24096; +@red : #FF4136; +@teal : #39CCCC; +@yellow : #FFCB08; + +@black : #191919; +@grey : #CCCCCC; +@white : #FFFFFF; + +/*--- Light Colors ---*/ +@lightBlue : #54C8FF; +@lightGreen : #2ECC40; +@lightOrange : #FF851B; +@lightPink : #FF8EDF; +@lightPurple : #CDC6FF; +@lightRed : #FF695E; +@lightTeal : #6DFFFF; +@lightYellow : #FFE21F; + +@primaryColor : @blue; +@secondaryColor : @black; + + +/*------------------- + Page +--------------------*/ + +@bodyBackground : #FCFCFC; +@fontSize : 14px; +@textColor : rgba(0, 0, 0, 0.8); + +@headerMargin : 1em 0em 1rem; +@paragraphMargin : 0em 0em 1em; + +@linkColor : #009FDA; +@linkUnderline : none; +@linkHoverColor : lighten( @linkColor, 5); + +@highlightBackground : #FFFFCC; +@highlightColor : @textColor; + + + +/*------------------- + Background Colors +--------------------*/ + +@subtleTransparentBlack : rgba(0, 0, 0, 0.03); +@transparentBlack : rgba(0, 0, 0, 0.05); +@strongTransparentBlack : rgba(0, 0, 0, 0.10); + +@subtleTransparentWhite : rgba(255, 255, 255, 0.01); +@transparentWhite : rgba(255, 255, 255, 0.05); +@strongTransparentWhite : rgba(255, 255, 255, 0.01); + +/* Used for differentiating neutrals */ +@subtleGradient: linear-gradient(transparent, rgba(0, 0, 0, 0.05)); + +/* Used for differentiating layers */ +@subtleShadow: 0px 1px 2px 0 rgba(0, 0, 0, 0.05); + + +/*------------------- + Grid +--------------------*/ + +@columnCount: 16; + +/*------------------- + Breakpoints +--------------------*/ + +@mobileBreakpoint : 320px; +@tabletBreakpoint : 768px; +@computerBreakpoint : 992px; +@largeMonitorBreakpoint : 1400px; +@widescreenMonitorBreakpoint : 1900px; + + +/******************************* + Power-User +*******************************/ + +/*------------------- + Icons +--------------------*/ + +/* Max Width of Icon */ +@iconWidth : 1.23em; + +/*------------------- + Easing +--------------------*/ + +@defaultEasing: ease; + + +/*--- Neutrals ---*/ +@fullBlack : #000000; +@lightBlack : #333333; +@darkGrey : #AAAAAA; +@lightGrey : #DCDDDE; +@offWhite : #FAFAFA; +@darkWhite : #F0F0F0; + +/*--- Colored Backgrounds ---*/ +@blueBackground : #D3E4F3; +@greenBackground : #DEF2E0; +@orangeBackground : #F7E5D6; +@pinkBackground : #F9CEE6; +@purpleBackground : #E0DDF5; +@redBackground : #F8D5D3; +@tealBackground : #D2F5F5; +@yellowBackground : #FCF5D8; + +/*--- Colored Text ---*/ +@blueTextColor : @blue; +@orangeTextColor : @orange; +@pinkTextColor : @pink; +@purpleTextColor : @purple; +@redTextColor : @red; +@greenTextColor : #1EBC30; // Green is difficult to read +@tealTextColor : #10A3A3; // Teal text is difficult to read +@yellowTextColor : #B58105; // Yellow text is difficult to read + +/*--- Colored Headers ---*/ +@blueHeaderColor : darken(@blueTextColor, 5); +@greenHeaderColor : darken(@greenTextColor, 5); +@orangeHeaderColor : darken(@orangeTextColor, 5); +@pinkHeaderColor : darken(@pinkTextColor, 5); +@purpleHeaderColor : darken(@purpleTextColor, 5); +@redHeaderColor : darken(@redTextColor, 5); +@tealHeaderColor : darken(@tealTextColor, 5); +@yellowHeaderColor : darken(@yellowTextColor, 5); + + + +/*------------------- + Emotive Colors +--------------------*/ + +/* Mood */ +@positiveBackgroundColor : #E4F5DD; +@negativeBackgroundColor : #FAE8E8; + +@positiveBorderColor : #B7CAA7; +@negativeBorderColor : #DBB1B1; + +/* Solid Background Color */ +@positiveColor : @green; +@negativeColor : @red; + +@positiveTextColor : #3C763D; +@negativeTextColor : #A94442; + + +/* Status */ +@infoBackgroundColor : #E5F6FB; +@warningBackgroundColor : #FCF8E3; +@successBackgroundColor : @positiveBackgroundColor; +@errorBackgroundColor : @negativeBackgroundColor; + +@infoBorderColor : #AAD6DF; +@warningBorderColor : #D3C4A5; +@successBorderColor : @positiveBorderColor; +@errorBorderColor : @negativeBorderColor; + +@infoTextColor : #337B92; +@warningTextColor : #8A6D3B; +@successTextColor : @positiveTextColor; +@errorTextColor : @negativeTextColor; + +/* Darkened Headers */ +@positiveHeaderColor : darken(@positiveTextColor, 5); +@negativeHeaderColor : darken(@negativeTextColor, 5); +@infoHeaderColor : darken(@infoTextColor, 5); +@warningHeaderColor : darken(@warningTextColor, 5); +@successHeaderColor : darken(@successTextColor, 5); +@errorHeaderColor : darken(@errorTextColor, 5); + +/*------------------- + Neutral Text +--------------------*/ + +@darkTextColor : rgba(0, 0, 0, 0.85); +@lightTextColor : rgba(0, 0, 0, 0.4); + +@invertedTextColor : rgba(255, 255, 255, 1); +@invertedLightTextColor : rgba(255, 255, 255, 0.8); +@invertedUnselectedTextColor : rgba(255, 255, 255, 0.5); +@invertedSelectedTextColor : rgba(255, 255, 255, 1); +@invertedDisabledTextColor : rgba(255, 255, 255, 0.3); + +@unselectedTextColor : rgba(0, 0, 0, 0.4); +@selectedTextColor : rgba(0, 0, 0, 0.8); +@disabledTextColor : rgba(0, 0, 0, 0.2); + +/*------------------- + Brand Colors +--------------------*/ + +@facebookColor : #3B579D; +@twitterColor : #4092CC; +@googlePlusColor : #D34836; +@linkedInColor : #1F88BE; +@youtubeColor : #CC181E; +@instagramColor : #49769C; +@pinterestColor : #00ACED; +@vkColor : #4D7198; + +/*------------------- + Grid Columns +--------------------*/ + +@oneWide : (1 / @columnCount * 100%); +@twoWide : (2 / @columnCount * 100%); +@threeWide : (3 / @columnCount * 100%); +@fourWide : (4 / @columnCount * 100%); +@fiveWide : (5 / @columnCount * 100%); +@sixWide : (6 / @columnCount * 100%); +@sevenWide : (7 / @columnCount * 100%); +@eightWide : (8 / @columnCount * 100%); +@nineWide : (9 / @columnCount * 100%); +@tenWide : (10 / @columnCount * 100%); +@elevenWide : (11 / @columnCount * 100%); +@twelveWide : (12 / @columnCount * 100%); +@thirteenWide : (13 / @columnCount * 100%); +@fourteenWide : (14 / @columnCount * 100%); +@fifteenWide : (15 / @columnCount * 100%); +@sixteenWide : (16 / @columnCount * 100%); + +@oneColumn : (1 / 1 * 100%); +@twoColumn : (1 / 2 * 100%); +@threeColumn : (1 / 3 * 100%); +@fourColumn : (1 / 4 * 100%); +@fiveColumn : (1 / 5 * 100%); +@sixColumn : (1 / 6 * 100%); +@sevenColumn : (1 / 7 * 100%); +@eightColumn : (1 / 8 * 100%); +@nineColumn : (1 / 9 * 100%); +@tenColumn : (1 / 10 * 100%); +@elevenColumn : (1 / 11 * 100%); +@twelveColumn : (1 / 12 * 100%); +@thirteenColumn : (1 / 13 * 100%); +@fourteenColumn : (1 / 14 * 100%); +@fifteenColumn : (1 / 15 * 100%); +@sixteenColumn : (1 / 16 * 100%); + +/*------------------- + Borders +--------------------*/ + +@circularRadius : 500rem; + +@borderColor : rgba(0, 0, 0, 0.1); +@selectedBorderColor : rgba(0, 0, 0, 0.2); + +@solidBorderColor : #DDDDDD; +@solidSelectedBorderColor : #B0B0B0; + +@whiteBorderColor : rgba(255, 255, 255, 0.2); +@selectedWhiteBorderColor : rgba(255, 255, 255, 0.8); + +@solidWhiteBorderColor : #555555; +@selectedSolidWhiteBorderColor : #999999; + +/*------------------- + Sizes +--------------------*/ + +@mini : 0.7em; +@tiny : 0.8em; +@small : 0.875em; +@medium : 1em; +@large : 1.125em; +@big : 1.25em; +@huge : 1.375em; +@massive : 1.5em; + + +/*------------------- + Transitions +--------------------*/ + +@transitionDuration : 0.25s; +@transitionEasing : ease; + + +/******************************* + States +*******************************/ + +/*------------------- + Disabled +--------------------*/ + +@disabledOpacity: 0.3; + +/*------------------- + Hover +--------------------*/ + +/*--- Colors ---*/ +@primaryColorHover : lighten( @primaryColor, 7); +@secondaryColorHover : lighten( @secondaryColor, 7); + +@blueHover : lighten( @blue, 7); +@greenHover : lighten( @green, 7); +@orangeHover : lighten( @orange, 7); +@pinkHover : lighten( @pink, 7); +@purpleHover : lighten( @purple, 7); +@redHover : lighten( @red, 7); +@tealHover : lighten( @teal, 7); +@yellowHover : lighten( @yellow, 7); + +@lightBlueHover : lighten( @lightBlue, 7); +@lightGreenHover : lighten( @lightGreen, 7); +@lightOrangeHover : lighten( @lightOrange, 7); +@lightPinkHover : lighten( @lightPink, 7); +@lightPurpleHover : lighten( @lightPurple, 7); +@lightRedHover : lighten( @lightRed, 7); +@lightTealHover : lighten( @lightTeal, 7); +@lightYellowHover : lighten( @lightYellow, 7); + +/*--- Emotive ---*/ +@positiveColorHover : lighten( @positiveColor, 7); +@negativeColorHover : lighten( @negativeColor, 7); + +/*--- Neutrals ---*/ +@fullBlackHover : lighten( @fullBlack, 7); +@blackHover : lighten( @black, 7); +@lightBlackHover : lighten( @lightBlack, 7); + +@lightGreyHover : lighten( @lightGrey, 7); +@greyHover : lighten( @grey, 7); +@darkGreyHover : lighten( @darkGrey, 7); + +@whiteHover : lighten( @white, 7); +@offWhiteHover : lighten( @offWhite, 7); +@darkWhiteHover : lighten( @darkWhite, 7); + +@facebookHoverColor : lighten( @facebookColor, 7); +@twitterHoverColor : lighten( @twitterColor, 7); +@googlePlusHoverColor : lighten( @googlePlusColor, 7); +@linkedInHoverColor : lighten( @linkedInColor, 7); +@youtubeHoverColor : lighten( @youtubeColor, 7); +@instagramHoverColor : lighten( @instagramColor, 7); +@pinterestHoverColor : lighten( @pinterestColor, 7); +@vkHoverColor : lighten( @vkColor, 7); + + +/*------------------- + Down (:active) +--------------------*/ + + +/*--- Colors ---*/ +@primaryColorDown : darken(@primaryColor, 7); +@secondaryColorDown : darken(@secondaryColor, 7); + +@blueDown : darken(@blue, 7); +@greenDown : darken(@green, 7); +@orangeDown : darken(@orange, 7); +@pinkDown : darken(@pink, 7); +@purpleDown : darken(@purple, 7); +@redDown : darken(@red, 7); +@tealDown : darken(@teal, 7); +@yellowDown : darken(@yellow, 7); + +@lightBlueDown : darken(@lightBlue, 7); +@lightGreenDown : darken(@lightGreen, 7); +@lightOrangeDown : darken(@lightOrange, 7); +@lightPinkDown : darken(@lightPink, 7); +@lightPurpleDown : darken(@lightPurple, 7); +@lightRedDown : darken(@lightRed, 7); +@lightTealDown : darken(@lightTeal, 7); +@lightYellowDown : darken(@lightYellow, 7); + +/*--- Emotive ---*/ +@positiveColorDown : darken(@positiveColor, 7); +@negativeColorDown : darken(@negativeColor, 7); + +/*--- Neutrals ---*/ +@fullBlackDown : darken(@fullBlack, 7); +@blackDown : darken(@black, 7); +@lightBlackDown : darken(@lightBlack, 7); + +@lightGreyDown : darken(@lightGrey, 7); +@greyDown : darken(@grey, 7); +@darkGreyDown : darken(@darkGrey, 7); + +@whiteDown : darken(@white, 7); +@offWhiteDown : darken(@offWhite, 7); +@darkWhiteDown : darken(@darkWhite, 7); + +@facebookDownColor : darken(@facebookColor, 7); +@twitterDownColor : darken(@twitterColor, 7); +@googlePlusDownColor : darken(@googlePlusColor, 7); +@linkedInDownColor : darken(@linkedInColor, 7); +@youtubeDownColor : darken(@youtubeColor, 7); +@instagramDownColor : darken(@instagramColor, 7); +@pinterestDownColor : darken(@pinterestColor, 7); +@vkDownColor : darken(@vkColor, 7); + + +/*------------------- + Active +--------------------*/ + +/*--- Standard ---*/ +@primaryColorActive : darken(@primaryColor, 5); +@secondaryColorActive : darken(@secondaryColor, 5); + +@blueActive : darken(@blue, 5); +@greenActive : darken(@green, 5); +@orangeActive : darken(@orange, 5); +@pinkActive : darken(@pink, 5); +@purpleActive : darken(@purple, 5); +@redActive : darken(@red, 5); +@tealActive : darken(@teal, 5); +@yellowActive : darken(@yellow, 5); + +@lightBlueActive : darken(@lightBlue, 5); +@lightGreenActive : darken(@lightGreen, 5); +@lightOrangeActive : darken(@lightOrange, 5); +@lightPinkActive : darken(@lightPink, 5); +@lightPurpleActive : darken(@lightPurple, 5); +@lightRedActive : darken(@lightRed, 5); +@lightTealActive : darken(@lightTeal, 5); +@lightYellowActive : darken(@lightYellow, 5); + +/*--- Emotive ---*/ +@positiveColorActive : darken(@positiveColor, 5); +@negativeColorActive : darken(@negativeColor, 5); + +/*--- Neutrals ---*/ +@fullBlackActive : darken(@fullBlack, 5); +@blackActive : darken(@black, 5); +@lightBlackActive : darken(@lightBlack, 5); + +@lightGreyActive : darken(@lightGrey, 5); +@greyActive : darken(@grey, 5); +@darkGreyActive : darken(@darkGrey, 5); + +@whiteActive : darken(@white, 5); +@offWhiteActive : darken(@offWhite, 5); +@darkWhiteActive : darken(@darkWhite, 5); + +@facebookActiveColor : darken(@facebookColor, 5); +@twitterActiveColor : darken(@twitterColor, 5); +@googlePlusActiveColor : darken(@googlePlusColor, 5); +@linkedInActiveColor : darken(@linkedInColor, 5); +@youtubeActiveColor : darken(@youtubeColor, 5); +@instagramActiveColor : darken(@instagramColor, 5); +@pinterestActiveColor : darken(@pinterestColor, 5); +@vkActiveColor : darken(@vkColor, 5); diff --git a/src/themes/packages/github/collections/form.overrides b/src/themes/packages/github/collections/form.overrides index c5c53367f..89df9c036 100755 --- a/src/themes/packages/github/collections/form.overrides +++ b/src/themes/packages/github/collections/form.overrides @@ -1,3 +1,16 @@ /******************************* Overrides *******************************/ + +.ui.selection.dropdown { + background-color: #FAFAFA; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075) inset; + border-color: #CCCCCC; +} + +.ui.selection.dropdown:focus { + box-shadow: + 0px 1px 2px rgba(0, 0, 0, 0.075) inset, + 0px 0px 5px rgba(81, 167, 232, 0.5) + ; +} \ No newline at end of file