richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Add a couple more themes for fun

pull/1129/head
jlukic 10 years ago
parent
6e8637f24e
commit
6f35b10e18
12 changed files with 1014 additions and 7 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      build/less/themes/packages/flat/globals/site.overrides
  2. 484
      build/less/themes/packages/flat/globals/site.variables
  3. 2
      server/documents/collections/form.html.eco
  4. 2
      src/definitions/collections/form.less
  5. 6
      src/definitions/modules/dropdown.less
  6. 8
      src/themes/packages/chubby/collections/form.overrides
  7. 9
      src/themes/packages/chubby/collections/form.variables
  8. 1
      src/themes/packages/default/collections/form.variables
  9. 6
      src/themes/packages/default/modules/dropdown.variables
  10. 3
      src/themes/packages/flat/globals/site.overrides
  11. 484
      src/themes/packages/flat/globals/site.variables
  12. 13
      src/themes/packages/github/collections/form.overrides

3
build/less/themes/packages/flat/globals/site.overrides
View File

@ -0,0 +1,3 @@
/*******************************
Overrides
*******************************/

484
build/less/themes/packages/flat/globals/site.variables
View File

@ -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);

2
server/documents/collections/form.html.eco
View File

@ -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']
---
<link rel="stylesheet/less" type="text/css" href="/build/less/definitions/collections/form.less" />
<script src="/javascript/form.js"></script>

2
src/definitions/collections/form.less
View File

@ -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;

6
src/definitions/modules/dropdown.less
View File

@ -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 {

8
src/themes/packages/chubby/collections/form.overrides
View File

@ -0,0 +1,8 @@
/*-------------------
Form Variables
--------------------*/
.ui.form .selection.dropdown {
padding: 1.1em 1.2em;
border-width: 2px;
}

9
src/themes/packages/chubby/collections/form.variables
View File

@ -0,0 +1,9 @@
/*-------------------
Form Variables
--------------------*/
@labelTextTransform: uppercase;
@labelFontSize: 0.8em;
@inputPadding: 1em 1.2em;
@inputBorder: 2px solid @borderColor;

1
src/themes/packages/default/collections/form.variables
View File

@ -18,6 +18,7 @@
@labelFontWeight: bold;
@labelDistance: 0.3rem;
@labelColor: @textColor;
@labelTextTransform: none;
/* Input */
@inputWidth: 100%;

6
src/themes/packages/default/modules/dropdown.variables
View File

@ -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);

3
src/themes/packages/flat/globals/site.overrides
View File

@ -0,0 +1,3 @@
/*******************************
Overrides
*******************************/

484
src/themes/packages/flat/globals/site.variables
View File

@ -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);

13
src/themes/packages/github/collections/form.overrides
View File

@ -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)
;
}
Write Preview
Loading…
Cancel
Save