From 4c424c3a795b92021a850cdf0ab6479ce69b5ec1 Mon Sep 17 00:00:00 2001 From: jlukic Date: Fri, 15 Aug 2014 12:54:25 -0400 Subject: [PATCH] Several fixes for inversion with form, checkbox, segment, header --- src/definitions/collections/form.less | 9 +- src/definitions/elements/header.less | 13 + src/definitions/elements/segment.less | 5 + .../default/collections/form.variables | 2 +- .../default/elements/header.variables | 19 +- .../packages/default/globals/site.overrides | 327 +----------------- .../packages/default/globals/site.variables | 10 +- 7 files changed, 42 insertions(+), 343 deletions(-) diff --git a/src/definitions/collections/form.less b/src/definitions/collections/form.less index 0ed01748e..b3f65198b 100755 --- a/src/definitions/collections/form.less +++ b/src/definitions/collections/form.less @@ -492,9 +492,12 @@ ---------------------*/ .ui.inverted.form label, -.ui.inverted.form .ui.checkbox label:hover, -.ui.inverted.form .ui.checkbox .box:hover { - color: @invertedFormColor; +.ui.form .inverted.segment label, +.ui.form .inverted.segment .ui.checkbox label, +.ui.form .inverted.segment .ui.checkbox .box, +.ui.inverted.form .ui.checkbox label, +.ui.inverted.form .ui.checkbox .box { + color: @invertedLabelColor; } .ui.inverted.form.loading:after { background: @formInvertedLoaderDimmerColor url(@formInvertedLoaderPath) no-repeat @formLoaderPosition; diff --git a/src/definitions/elements/header.less b/src/definitions/elements/header.less index 75a6fd904..9ec583fe2 100755 --- a/src/definitions/elements/header.less +++ b/src/definitions/elements/header.less @@ -257,6 +257,14 @@ h5.ui.header { .ui.inverted.header .sub.header { color: @invertedSubHeaderColor; } +.ui.inverted.attached.header { + background: @invertedAttachedBackground; + box-shadow: none; +} +.ui.inverted.block.header { + background: @invertedBlockBackground; + box-shadow: none; +} /*------------------- @@ -358,6 +366,10 @@ h5.ui.header { margin-bottom: @dividedIconPadding; } +.ui.inverted.dividing.header { + border-bottom-color: @invertedDividedBorderColor; +} + /*------------------- Block @@ -417,6 +429,7 @@ h5.ui.header { border-radius: 0em 0em @attachedBorderRadius @attachedBorderRadius; } +/* Attached Sizes */ .ui.tiny.attached.header { font-size: @tinyAttached; } diff --git a/src/definitions/elements/segment.less b/src/definitions/elements/segment.less index 9aca1cfb3..baa5b3f38 100755 --- a/src/definitions/elements/segment.less +++ b/src/definitions/elements/segment.less @@ -375,6 +375,11 @@ color: @white; } +.ui.inverted.block.segment, +.ui.inverted.attached.segment { + box-shadow: none !important; +} + /*------------------- Ordinality --------------------*/ diff --git a/src/themes/packages/default/collections/form.variables b/src/themes/packages/default/collections/form.variables index e02380d33..c70d7e790 100755 --- a/src/themes/packages/default/collections/form.variables +++ b/src/themes/packages/default/collections/form.variables @@ -114,7 +114,7 @@ @requiredVerticalOffset: -0.2em; /* Inverted */ -@invertedFormColor: @invertedTextColor; +@invertedLabelColor: @invertedTextColor; @formInvertedLoaderPath: "@{imagePath}/loader-large-inverted.gif"; @formInvertedLoaderDimmerColor: rgba(0, 0, 0, 0.8); diff --git a/src/themes/packages/default/elements/header.variables b/src/themes/packages/default/elements/header.variables index 027bc18f6..b97e6ca4c 100755 --- a/src/themes/packages/default/elements/header.variables +++ b/src/themes/packages/default/elements/header.variables @@ -59,10 +59,6 @@ @circularHeaderIconSize: 2em; @squareHeaderIconSize: 2em; -/* Inverted */ -@invertedColor: @white; -@invertedSubHeaderColor: rgba(255, 255, 255, 0.85); - /* Divided */ @dividedBorder: 1px solid rgba(0, 0, 0, 0.1); @dividedColoredBorderWidth: 3px; @@ -75,8 +71,8 @@ @blockBackground: @darkWhite @subtleGradient; @blockBoxShadow: @subtleShadow; @blockBorder: 1px solid @solidBorderColor; -@blockHorizontalPadding: 1em; -@blockVerticalPadding: 0.5em; +@blockHorizontalPadding: 1rem; +@blockVerticalPadding: 0.75rem; @blockBorderRadius: 0.3125rem; @tinyBlock: 0.875em; @@ -88,8 +84,8 @@ /* Attached */ @attachedOffset: 0px; @attachedBoxShadow: 0px 0px 0px 1px @solidBorderColor; -@attachedVerticalPadding: 0.7em; -@attachedHorizontalPadding: 1rem; +@attachedVerticalPadding: @blockVerticalPadding; +@attachedHorizontalPadding: @blockHorizontalPadding; @attachedBackground: @blockBackground; @attachedBorder: none; @attachedBorderRadius: @blockBorderRadius; @@ -100,5 +96,12 @@ @largeAttached: @largeBlock; @hugeAttached: @hugeBlock; +/* Inverted */ +@invertedColor: @white; +@invertedSubHeaderColor: rgba(255, 255, 255, 0.85); +@invertedDividedBorderColor: @whiteBorderColor; +@invertedBlockBackground: @lightBlack @subtleGradient; +@invertedAttachedBackground: @invertedBlockBackground; + /* Floated */ @floatedMargin: 0.5em; diff --git a/src/themes/packages/default/globals/site.overrides b/src/themes/packages/default/globals/site.overrides index 391fbdb2a..d756a1003 100755 --- a/src/themes/packages/default/globals/site.overrides +++ b/src/themes/packages/default/globals/site.overrides @@ -1,328 +1,3 @@ /******************************* - Global Variables + Global Overrides *******************************/ - -/*------------------- - Paths ---------------------*/ - -@imagePath : "../themes/default/images"; -@fontPath : "../themes/default/fonts"; - -/*------------------- - Page ---------------------*/ - -@bodyBackground : #FCFCFC; -@fontSize : 14px; -@textColor : rgba(0, 0, 0, 0.7); - -@paragraphMargin : 1em 0em; - -@linkColor : #009FDA; -@linkUnderline : none; -@linkHoverColor : lighten( @linkColor, 5); - -@highlightBackground : #FFFFCC; -@highlightColor : @textColor; - -/*------------------- - Breakpoints ---------------------*/ - -@mobileBreakpoint : 320px; -@tabletBreakpoint : 768px; -@computerBreakpoint : 992px; -@largeMonitorBreakpoint : 1400px; -@widescreenMonitorBreakpoint : 1900px; - -/*------------------- - Fonts ---------------------*/ - -@pageFont : Open Sans, Helvetica Neue, Helvetica, Arial, sans-serif; - -/*------------------- - Icons ---------------------*/ - -/* Width of largest icon */ -@iconWidth : 1.23em; - -/******************************* - BG Colors -*******************************/ - -@subtleTransparentBlack : rgba(0, 0, 0, 0.01); -@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); - - -/******************************* - Colors -*******************************/ - -/*------------------- - Background ---------------------*/ - -/*--- Colors ---*/ -@blue : #6ECFF5; -@green : #5BBD72; -@orange : #E96633; -@pink : #D9499A; -@purple : #564F8A; -@red : #D95C5C; -@teal : #00B5AD; -@yellow : #FFCB08; - -@primaryColor : @teal; -@secondaryColor : @black; -@tertiaryColor : @orange; - -/*--- Emotive ---*/ -@positiveColor : @green; -@negativeColor : @red; - -@infoColor : #E6F4F9; -@warningColor : #96904D; -@errorColor : #D95C5C; - -/*--- Neutrals ---*/ -@darkBlack : #232323; -@black : #555555; -@lightBlack : #999999; - -@darkGrey : #AAAAAA; -@grey : #CCCCCC; -@lightGrey : #DCDDDE; - -@white : #FFFFFF; -@offWhite : #FAFAFA; -@darkWhite : #F0F0F0; - -/*------------------- - Text Colors ---------------------*/ - -@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(0, 0, 0, 0.2); - -@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; - -/*------------------- - Borders ---------------------*/ - -@circularRadius : 500rem; - -@borderColor : rgba(0, 0, 0, 0.1); -@selectedBorderColor : rgba(0, 0, 0, 0.2); -@solidBorderColor : #DDDDDD; - -@whiteBorderColor : rgba(255, 255, 255, 0.3); -@selectedWhiteBorderColor : rgba(255, 255, 255, 0.8); - -/*------------------- - 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, 5); -@secondaryColorHover : lighten( @secondaryColor, 5); -@tertiaryColorHover : lighten( @tertiaryColor, 5); - -@blueHover : lighten( @blue, 5); -@greenHover : lighten( @green, 5); -@orangeHover : lighten( @orange, 5); -@pinkHover : lighten( @pink, 5); -@purpleHover : lighten( @purple, 5); -@redHover : lighten( @red, 5); -@tealHover : lighten( @teal, 5); -@yellowHover : lighten( @yellow, 5); - -/*--- Emotive ---*/ -@positiveColorHover : lighten( @positiveColor, 5); -@negativeColorHover : lighten( @negativeColor, 5); - -@infoColorHover : lighten( @infoColor, 5); -@warningColorHover : lighten( @warningColor, 5); -@errorColorHover : lighten( @errorColor, 5); - -/*--- Neutrals ---*/ -@darkBlackHover : lighten( @darkBlack, 5); -@blackHover : lighten( @black, 5); -@lightBlackHover : lighten( @lightBlack, 5); - -@lightGreyHover : lighten( @lightGrey, 5); -@greyHover : lighten( @grey, 5); -@darkGreyHover : lighten( @darkGrey, 5); - -@whiteHover : lighten( @white, 5); -@offWhiteHover : lighten( @offWhite, 5); -@darkWhiteHover : lighten( @darkWhite, 5); - -@facebookHoverColor : lighten( @facebookColor, 5); -@twitterHoverColor : lighten( @twitterColor, 5); -@googlePlusHoverColor : lighten( @googlePlusColor, 5); -@linkedInHoverColor : lighten( @linkedInColor, 5); -@youtubeHoverColor : lighten( @youtubeColor, 5); -@instagramHoverColor : lighten( @instagramColor, 5); -@pinterestHoverColor : lighten( @pinterestColor, 5); -@vkHoverColor : lighten( @vkColor, 5); - - -/*------------------- - Down (:active) ---------------------*/ - - -/*--- Colors ---*/ -@primaryColorDown : darken(@primaryColor, 7); -@secondaryColorDown : darken(@secondaryColor, 7); -@tertiaryColorDown : darken(@tertiaryColor, 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); - -/*--- Emotive ---*/ -@positiveColorDown : darken(@positiveColor, 7); -@negativeColorDown : darken(@negativeColor, 7); - -@infoColorDown : darken(@infoColor, 7); -@warningColorDown : darken(@warningColor, 7); -@errorColorDown : darken(@errorColor, 7); - -/*--- Neutrals ---*/ -@darkBlackDown : darken(@darkBlack, 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); -@tertiaryColorActive : darken(@tertiaryColor, 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); - -/*--- Emotive ---*/ -@positiveColorActive : darken(@positiveColor, 5); -@negativeColorActive : darken(@negativeColor, 5); - -@infoColorActive : darken(@infoColor, 5); -@warningColorActive : darken(@warningColor, 5); -@errorColorActive : darken(@errorColor, 5); - -/*--- Neutrals ---*/ -@darkBlackActive : darken(@darkBlack, 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/default/globals/site.variables b/src/themes/packages/default/globals/site.variables index 585ce72a0..6c7c371f0 100755 --- a/src/themes/packages/default/globals/site.variables +++ b/src/themes/packages/default/globals/site.variables @@ -123,8 +123,8 @@ @lightYellow : #FFE21F; /*--- Neutrals ---*/ -@darkBlack : #232323; -@lightBlack : #555555; +@fullBlack : #000000; +@lightBlack : #333333; @darkGrey : #AAAAAA; @lightGrey : #DCDDDE; @offWhite : #FAFAFA; @@ -346,7 +346,7 @@ @negativeColorHover : lighten( @negativeColor, 5); /*--- Neutrals ---*/ -@darkBlackHover : lighten( @darkBlack, 5); +@fullBlackHover : lighten( @fullBlack, 5); @blackHover : lighten( @black, 5); @lightBlackHover : lighten( @lightBlack, 5); @@ -392,7 +392,7 @@ @negativeColorDown : darken(@negativeColor, 7); /*--- Neutrals ---*/ -@darkBlackDown : darken(@darkBlack, 7); +@fullBlackDown : darken(@fullBlack, 7); @blackDown : darken(@black, 7); @lightBlackDown : darken(@lightBlack, 7); @@ -437,7 +437,7 @@ @negativeColorActive : darken(@negativeColor, 5); /*--- Neutrals ---*/ -@darkBlackActive : darken(@darkBlack, 5); +@fullBlackActive : darken(@fullBlack, 5); @blackActive : darken(@black, 5); @lightBlackActive : darken(@lightBlack, 5);