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

Several fixes for inversion with form, checkbox, segment, header

pull/1063/head
jlukic 10 years ago
parent
361a37c455
commit
4c424c3a79
7 changed files with 42 additions and 343 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 9
      src/definitions/collections/form.less
  2. 13
      src/definitions/elements/header.less
  3. 5
      src/definitions/elements/segment.less
  4. 2
      src/themes/packages/default/collections/form.variables
  5. 19
      src/themes/packages/default/elements/header.variables
  6. 327
      src/themes/packages/default/globals/site.overrides
  7. 10
      src/themes/packages/default/globals/site.variables

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

@ -492,9 +492,12 @@
---------------------*/ ---------------------*/
.ui.inverted.form label, .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 { .ui.inverted.form.loading:after {
background: @formInvertedLoaderDimmerColor url(@formInvertedLoaderPath) no-repeat @formLoaderPosition; background: @formInvertedLoaderDimmerColor url(@formInvertedLoaderPath) no-repeat @formLoaderPosition;

13
src/definitions/elements/header.less
View File

@ -257,6 +257,14 @@ h5.ui.header {
.ui.inverted.header .sub.header { .ui.inverted.header .sub.header {
color: @invertedSubHeaderColor; 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; margin-bottom: @dividedIconPadding;
} }
.ui.inverted.dividing.header {
border-bottom-color: @invertedDividedBorderColor;
}
/*------------------- /*-------------------
Block Block
@ -417,6 +429,7 @@ h5.ui.header {
border-radius: 0em 0em @attachedBorderRadius @attachedBorderRadius; border-radius: 0em 0em @attachedBorderRadius @attachedBorderRadius;
} }
/* Attached Sizes */
.ui.tiny.attached.header { .ui.tiny.attached.header {
font-size: @tinyAttached; font-size: @tinyAttached;
} }

5
src/definitions/elements/segment.less
View File

@ -375,6 +375,11 @@
color: @white; color: @white;
} }
.ui.inverted.block.segment,
.ui.inverted.attached.segment {
box-shadow: none !important;
}
/*------------------- /*-------------------
Ordinality Ordinality
--------------------*/ --------------------*/

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

@ -114,7 +114,7 @@
@requiredVerticalOffset: -0.2em; @requiredVerticalOffset: -0.2em;
/* Inverted */ /* Inverted */
@invertedFormColor: @invertedTextColor;
@invertedLabelColor: @invertedTextColor;
@formInvertedLoaderPath: "@{imagePath}/loader-large-inverted.gif"; @formInvertedLoaderPath: "@{imagePath}/loader-large-inverted.gif";
@formInvertedLoaderDimmerColor: rgba(0, 0, 0, 0.8); @formInvertedLoaderDimmerColor: rgba(0, 0, 0, 0.8);

19
src/themes/packages/default/elements/header.variables
View File

@ -59,10 +59,6 @@
@circularHeaderIconSize: 2em; @circularHeaderIconSize: 2em;
@squareHeaderIconSize: 2em; @squareHeaderIconSize: 2em;
/* Inverted */
@invertedColor: @white;
@invertedSubHeaderColor: rgba(255, 255, 255, 0.85);
/* Divided */ /* Divided */
@dividedBorder: 1px solid rgba(0, 0, 0, 0.1); @dividedBorder: 1px solid rgba(0, 0, 0, 0.1);
@dividedColoredBorderWidth: 3px; @dividedColoredBorderWidth: 3px;
@ -75,8 +71,8 @@
@blockBackground: @darkWhite @subtleGradient; @blockBackground: @darkWhite @subtleGradient;
@blockBoxShadow: @subtleShadow; @blockBoxShadow: @subtleShadow;
@blockBorder: 1px solid @solidBorderColor; @blockBorder: 1px solid @solidBorderColor;
@blockHorizontalPadding: 1em;
@blockVerticalPadding: 0.5em;
@blockHorizontalPadding: 1rem;
@blockVerticalPadding: 0.75rem;
@blockBorderRadius: 0.3125rem; @blockBorderRadius: 0.3125rem;
@tinyBlock: 0.875em; @tinyBlock: 0.875em;
@ -88,8 +84,8 @@
/* Attached */ /* Attached */
@attachedOffset: 0px; @attachedOffset: 0px;
@attachedBoxShadow: 0px 0px 0px 1px @solidBorderColor; @attachedBoxShadow: 0px 0px 0px 1px @solidBorderColor;
@attachedVerticalPadding: 0.7em;
@attachedHorizontalPadding: 1rem;
@attachedVerticalPadding: @blockVerticalPadding;
@attachedHorizontalPadding: @blockHorizontalPadding;
@attachedBackground: @blockBackground; @attachedBackground: @blockBackground;
@attachedBorder: none; @attachedBorder: none;
@attachedBorderRadius: @blockBorderRadius; @attachedBorderRadius: @blockBorderRadius;
@ -100,5 +96,12 @@
@largeAttached: @largeBlock; @largeAttached: @largeBlock;
@hugeAttached: @hugeBlock; @hugeAttached: @hugeBlock;
/* Inverted */
@invertedColor: @white;
@invertedSubHeaderColor: rgba(255, 255, 255, 0.85);
@invertedDividedBorderColor: @whiteBorderColor;
@invertedBlockBackground: @lightBlack @subtleGradient;
@invertedAttachedBackground: @invertedBlockBackground;
/* Floated */ /* Floated */
@floatedMargin: 0.5em; @floatedMargin: 0.5em;

327
src/themes/packages/default/globals/site.overrides
View File

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

10
src/themes/packages/default/globals/site.variables
View File

@ -123,8 +123,8 @@
@lightYellow : #FFE21F; @lightYellow : #FFE21F;
/*--- Neutrals ---*/ /*--- Neutrals ---*/
@darkBlack : #232323;
@lightBlack : #555555;
@fullBlack : #000000;
@lightBlack : #333333;
@darkGrey : #AAAAAA; @darkGrey : #AAAAAA;
@lightGrey : #DCDDDE; @lightGrey : #DCDDDE;
@offWhite : #FAFAFA; @offWhite : #FAFAFA;
@ -346,7 +346,7 @@
@negativeColorHover : lighten( @negativeColor, 5); @negativeColorHover : lighten( @negativeColor, 5);
/*--- Neutrals ---*/ /*--- Neutrals ---*/
@darkBlackHover : lighten( @darkBlack, 5);
@fullBlackHover : lighten( @fullBlack, 5);
@blackHover : lighten( @black, 5); @blackHover : lighten( @black, 5);
@lightBlackHover : lighten( @lightBlack, 5); @lightBlackHover : lighten( @lightBlack, 5);
@ -392,7 +392,7 @@
@negativeColorDown : darken(@negativeColor, 7); @negativeColorDown : darken(@negativeColor, 7);
/*--- Neutrals ---*/ /*--- Neutrals ---*/
@darkBlackDown : darken(@darkBlack, 7);
@fullBlackDown : darken(@fullBlack, 7);
@blackDown : darken(@black, 7); @blackDown : darken(@black, 7);
@lightBlackDown : darken(@lightBlack, 7); @lightBlackDown : darken(@lightBlack, 7);
@ -437,7 +437,7 @@
@negativeColorActive : darken(@negativeColor, 5); @negativeColorActive : darken(@negativeColor, 5);
/*--- Neutrals ---*/ /*--- Neutrals ---*/
@darkBlackActive : darken(@darkBlack, 5);
@fullBlackActive : darken(@fullBlack, 5);
@blackActive : darken(@black, 5); @blackActive : darken(@black, 5);
@lightBlackActive : darken(@lightBlack, 5); @lightBlackActive : darken(@lightBlack, 5);

Write Preview
Loading…
Cancel
Save