From 8d81e87f16aa59764f790a5173c195b9cd643e3d Mon Sep 17 00:00:00 2001 From: jlukic Date: Fri, 5 Sep 2014 12:49:35 -0400 Subject: [PATCH] Fixes attached message styles, modifies, info/warning/error colors, fixes error form colors somewhat. Moves list to elements --- src/definitions/collections/message.less | 83 +- src/definitions/elements/list.less | 715 ++++++++++++++++++ .../default/collections/form.variables | 2 +- .../default/collections/message.variables | 3 +- .../packages/default/globals/site.variables | 18 +- 5 files changed, 796 insertions(+), 25 deletions(-) create mode 100755 src/definitions/elements/list.less diff --git a/src/definitions/collections/message.less b/src/definitions/collections/message.less index 3e21e8628..eac81aad4 100755 --- a/src/definitions/collections/message.less +++ b/src/definitions/collections/message.less @@ -78,6 +78,12 @@ margin: @listMargin 0em 0em; padding: 0em; } +.ui.message ul.list:first-child { + margin-top: 0em; +} +.ui.message ul.list:last-child { + margin-bottom: 0em; +} .ui.message ul.list li { position: relative; list-style-type: none; @@ -156,20 +162,20 @@ ---------------*/ .ui.attached.message { - margin-left: @attachedOffset; - margin-right: @attachedOffset; - margin-bottom: @attachedOffset; + margin-bottom: @attachedYOffset; border-radius: @borderRadius @borderRadius 0em 0em; box-shadow: @attachedBoxShadow ; + margin-left: @attachedXOffset; + margin-right: @attachedXOffset; } .ui.attached + .ui.attached.message:not(.top):not(.bottom) { - margin-top: @attachedOffset; + margin-top: @attachedYOffset; border-radius: 0em; } .ui.bottom.attached.message { - margin-top: @attachedOffset; + margin-top: @attachedYOffset; border-radius: 0em 0em @borderRadius @borderRadius; box-shadow: @attachedBottomBoxShadow; } @@ -230,61 +236,110 @@ Types ---------------*/ -/* Inverted */ -.ui.inverted.message, -.ui.black.message { - background-color: @black; - color: @invertedTextColor; -} - -/* Positive / Negative */ +/* Positive */ .ui.positive.message { background-color: @positiveBackgroundColor; color: @positiveTextColor; } +.ui.positive.message, +.ui.attached.positive.message { + box-shadow: + 0px 0px 0px 1px @positiveBorderColor inset, + @subtleShadow + ; +} .ui.positive.message .header { color: @positiveHeaderColor; } + +/* Negative */ .ui.negative.message { background-color: @negativeBackgroundColor; color: @negativeTextColor; } +.ui.negative.message, +.ui.attached.negative.message { + box-shadow: + 0px 0px 0px 1px @negativeBorderColor inset, + @subtleShadow + ; +} .ui.negative.message .header { color: @negativeHeaderColor; } -/* User Action */ +/* Info */ .ui.info.message { background-color: @infoBackgroundColor; color: @infoTextColor; } +.ui.info.message, +.ui.attached.info.message { + box-shadow: + 0px 0px 0px 1px @infoBorderColor inset, + @subtleShadow + ; +} .ui.info.message .header { color: @infoHeaderColor; } + +/* Warning */ .ui.warning.message { background-color: @warningBackgroundColor; color: @warningTextColor; } +.ui.warning.message, +.ui.attached.warning.message { + box-shadow: + 0px 0px 0px 1px @warningBorderColor inset, + @subtleShadow + ; +} .ui.warning.message .header { color: @warningHeaderColor; } + +/* Error */ .ui.error.message { background-color: @errorBackgroundColor; color: @errorTextColor; } +.ui.error.message, +.ui.attached.error.message { + box-shadow: + 0px 0px 0px 1px @errorBorderColor inset, + @subtleShadow + ; +} .ui.error.message .header { color: @errorHeaderColor; } + +/* Success */ .ui.success.message { background-color: @successBackgroundColor; color: @successTextColor; } +.ui.success.message, +.ui.attached.success.message { + box-shadow: + 0px 0px 0px 1px @successBorderColor inset, + @subtleShadow + ; +} .ui.success.message .header { color: @successHeaderColor; } /* Colors */ +.ui.inverted.message, +.ui.black.message { + background-color: @black; + color: @invertedTextColor; +} + .ui.blue.message { background-color: @blueBackground; color: @blueTextColor; diff --git a/src/definitions/elements/list.less b/src/definitions/elements/list.less new file mode 100755 index 000000000..03e35aef5 --- /dev/null +++ b/src/definitions/elements/list.less @@ -0,0 +1,715 @@ + /* + * # Semantic - List + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2014 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Theme +*******************************/ + +@type : 'element'; +@element : 'list'; + +@import '../../semantic.config'; + +/******************************* + List +*******************************/ + +ul.ui.list, +ol.ui.list, +.ui.list { + list-style-type: @listStyleType; + margin: @margin; + padding: @verticalPadding @horizontalPadding; +} + +ul.ui.list:first-child, +ol.ui.list:first-child, +.ui.list:first-child { + margin-top: 0em; + padding-top: 0em; +} + +ul.ui.list:last-child, +ol.ui.list:last-child, +.ui.list:last-child { + margin-bottom: 0em; + padding-bottom: 0em; +} + +/******************************* + Content +*******************************/ + +/* List Item */ +ul.ui.list li, +ol.ui.list li, +.ui.list .item { + display: list-item; + table-layout: fixed; + list-style-type: @listStyleType; + list-style-position: @listStylePosition; + + padding: @itemVerticalPadding @itemHorizontalPadding; + line-height: @itemLineHeight; +} + +ul.ui.list > li:first-child:after, +ol.ui.list > li:first-child:after, +.ui.list .item:after { + content: ''; + display: block; + height: 0; + clear: both; + visibility: hidden; +} + +ul.ui.list li:first-child, +ol.ui.list li:first-child, +.ui.list .item:first-child { + padding-top: 0em; +} +ul.ui.list li:last-child, +ol.ui.list li:last-child, +.ui.list .item:last-child { + padding-bottom: 0em; +} + +/* Child List */ +ul.ui.list ul, +ol.ui.list ol, +.ui.list .list { + clear: both; + margin: 0em; + padding: @childListPadding; +} + +/* Icon */ +.ui.list .item > .icon { + display: table-cell; + margin: 0em; + padding-top: @iconOffset; + padding-right: @iconDistance; + vertical-align: @iconContentVerticalAlign; + transition: @iconTransition; +} +.ui.list .item > .top.aligned.icon { + vertical-align: top; +} +.ui.list .item > .icon:only-child { + display: inline-block; + vertical-align: @iconVerticalAlign; +} + + +/* Image */ +.ui.list .item > .image { + display: table-cell; + background-color: transparent; + margin: 0em; + padding-right: @imageDistance; + vertical-align: @imageAlign; +} +.ui.list .item > .top.aligned.image { + vertical-align: top; +} +.ui.list .item > .image img { + vertical-align: @imageAlign; +} +.ui.list .item > img.image, +.ui.list .item > .image:only-child { + display: inline-block; + padding-right: 0em; +} + +/* Content */ +.ui.list .item > .content { + line-height: @contentLineHeight; +} +.ui.list .item > .image + .content, +.ui.list .item > .icon + .content { + display: table-cell; + padding-left: @contentDistance; + vertical-align: @contentVerticalAlign; +} +.ui.list .item > .image + .content, +.ui.list .item > .icon + .content { + display: table-cell; + padding-left: @contentDistance; + vertical-align: @contentVerticalAlign; +} +.ui.list .item > img.image + .content { + display: inline-block; +} +.ui.list .item > .content > .list { + margin-left: 0em; + padding-left: 0em; +} + +/* Link */ +.ui.list a { + cursor: pointer; + color: @itemLinkColor; +} +.ui.list a:hover { + color: @itemLinkHoverColor; +} +.ui.list a .icon { + color: @itemLinkIconColor; +} + +/* Header */ +.ui.list .header { + display: block; + margin: 0em; + font-family: @itemHeaderFontFamily; + font-weight: @itemHeaderFontWeight; + color: @itemHeaderColor; +} +.ui.list .description { + display: block; + color: @itemDescriptionColor; +} + +/* Floated Content */ +.ui.list .item > .left.floated { + float: left; + margin-right: @floatMargin; +} +.ui.list .item > .right.floated { + float: right; + margin-left: @floatMargin; +} + +/******************************* + Coupling +*******************************/ + +.ui.menu .ui.list .item:before { + border: none; + background: none; +} + + +/******************************* + Types +*******************************/ + +/*------------------- + Horizontal +--------------------*/ + +.ui.horizontal.list { + display: inline-block; + font-size: 0em; +} +.ui.horizontal.list > .item { + display: inline-block; + margin-left: @horizontalSpacing; + font-size: 1rem; +} +.ui.horizontal.list > .item:first-child { + margin-left: 0em; +} +.ui.horizontal.list .list { + padding-left: 0em; + padding-bottom: 0em; +} + +/* Padding on all elements */ +.ui.horizontal.list > .item:first-child, +.ui.horizontal.list > .item:last-child { + padding-top: @itemVerticalPadding; + padding-bottom: @itemVerticalPadding; +} + +/* Horizontal List */ +.ui.horizontal.list .item > .icon { + margin: 0em; + padding: 0em @horizontalIconDistance 0em 0em; +} +.ui.horizontal.list .item > .icon, +.ui.horizontal.list .item > .icon + .content { + float: none; + display: inline-block; +} + + +/******************************* + States +*******************************/ + +/*------------------- + Hover +--------------------*/ + +.ui.list a:hover .icon { + color: @itemLinkIconHoverColor; +} + + +/******************************* + Variations +*******************************/ + +/*------------------- + Inverted +--------------------*/ + +.ui.inverted.list a .icon { + color: @invertedIconLinkColor; +} +.ui.inverted.list .header { + color: @invertedHeaderColor; +} +.ui.inverted.list .description { + color: @invertedDescriptionColor; +} + +/*------------------- + Link +--------------------*/ + +.ui.link.list .item, +.ui.link.list a.item, +.ui.link.list .item a { + color: @linkListItemColor; +} +.ui.link.list a.item:hover, +.ui.link.list .item a:hover { + color:@linkListItemHoverColor; +} +.ui.link.list a.item:active, +.ui.link.list .item a:active { + color:@linkListItemDownColor; +} +.ui.link.list a.active.item, +.ui.link.list .active.item a { + color: @linkListItemActiveColor; +} + +/* Inverted */ +.ui.inverted.link.list .item, +.ui.inverted.link.list a.item, +.ui.inverted.link.list .item a { + color: @invertedLinkListItemColor; +} +.ui.inverted.link.list a.item:hover, +.ui.inverted.link.list .item a:hover { + color: @invertedLinkListItemHoverColor; +} +.ui.inverted.link.list a.item:active, +.ui.inverted.link.list .item a:active { + color: @invertedLinkListItemDownColor; +} +.ui.inverted.link.list a.active.item, +.ui.inverted.link.list .active.item a { + color: @invertedLinkListItemActiveColor; +} + +/*------------------- + Selection +--------------------*/ + +.ui.selection.list .item { + cursor: pointer; + background: @selectionListBackground; + padding: @selectionListItemVerticalPadding @selectionListItemHorizontalPadding; + color: @selectionListColor; + transition: @selectionListTransition; +} +.ui.selection.list .item:hover { + background: @selectionListHoverBackground; + color: @selectionListHoverColor; +} +.ui.selection.list .item:active { + background: @selectionListDownBackground; + color: @selectionListDownColor; +} +.ui.selection.list .item.active { + background: @selectionListActiveBackground; + color: @selectionListActiveColor; +} + +/* Inverted */ + +.ui.inverted.selection.list .item { + background: @invertedSelectionListBackground; + color: @selectionListColor; +} +.ui.inverted.selection.list .item:hover { + background: @invertedSelectionListHoverBackground; + color: @invertedSelectionListHoverColor; +} +.ui.inverted.selection.list .item:active { + background: @invertedSelectionListDownBackground; + color: @invertedSelectionListDownColor; +} +.ui.inverted.selection.list .item.active { + background: @invertedSelectionListActiveBackground; + color: @invertedSelectionListActiveColor; +} + +/*------------------- + Animated +--------------------*/ + +.ui.animated.list .item { + transition: @animatedListTransition; +} +.ui.animated.list:not(.horizontal) .item:hover { + padding-left: @animatedListIndent; +} +.ui.animated.list:not(.horizontal) .item:hover .item:hover { + padding-left: @animatedListChildIndent; +} + + +/*------------------- + Fitted +--------------------*/ + +.ui.fitted.list:not(.selection) .item { + padding-left: 0em; + padding-right: 0em; +} + +.ui.fitted.selection.list .item { + margin-left: -@selectionListItemHorizontalPadding; + margin-right: -@selectionListItemHorizontalPadding; +} + +/*------------------- + Bulleted +--------------------*/ + +ul.ui.list, +.ui.bulleted.list { + margin-left: @bulletDistance; +} +ul.ui.list li, +.ui.bulleted.list .item { + position: relative; +} +ul.ui.list li:before, +.ui.bulleted.list .item:before { + position: absolute; + left: @bulletOffset; + content: @bulletCharacter; + opacity: @bulletOpacity; + vertical-align: @bulletVerticalAlign; +} + +ul.ui.list ul, +.ui.bulleted.list .list { + padding-left: @bulletChildDistance; +} + +/* Horizontal Bulleted */ +ul.ui.horizontal.bulleted.list, +.ui.horizontal.bulleted.list { + margin-left: 0em; +} +ul.ui.horizontal.bulleted.list li, +.ui.horizontal.bulleted.list .item { + margin-left: @horizontalBulletSpacing; +} +ul.ui.horizontal.bulleted.list li:before, +.ui.horizontal.bulleted.list .item:before { + left: @horizontalBulletOffset; +} +ul.ui.horizontal.bulleted.list li:first-child, +.ui.horizontal.bulleted.list .item:first-child { + margin-left: 0em; +} +ul.ui.horizontal.bulleted.list li:first-child::before, +.ui.horizontal.bulleted.list .item:first-child::before { + display: none; +} + +/*------------------- + Ordered +--------------------*/ + +ol.ui.list, +.ui.ordered.list, +.ui.ordered.list .list, +ol.ui.list ol { + counter-reset: ordered; + margin-left: @orderedCountDistance; + list-style-type: none; +} +ol.ui.list li, +.ui.ordered.list .item { + list-style-type: none; + position: relative; +} +ol.ui.list li:before, +.ui.ordered.list .item:before { + position: absolute; + left: -(@orderedCountDistance); + counter-increment: @orderedCountName; + content: @orderedCountContent; + text-align: @orderedCountTextAlign; + vertical-align: @orderedCountVerticalAlign; + opacity: @orderedCountOpacity; +} + + +/* Child Lists */ +ol.ui.list ol, +.ui.ordered.list .list { + margin-left: @orderedChildCountDistance; +} +ol.ui.list ol li:before, +.ui.ordered.list .list .item:before { + left: @orderedChildCountOffset; +} + +/* Horizontal Ordered */ +ol.ui.horizontal.list, +.ui.ordered.horizontal.list { + margin-left: 0em; +} +ol.ui.horizontal.list li:before, +.ui.ordered.horizontal.list .item:before { + position: static; + margin: 0em @horizontalOrderedCountDistance 0em 0em; +} + + +/*------------------- + Divided +--------------------*/ + +.ui.divided.list .item { + border-top: @dividedBorder; +} +.ui.divided.list .list .item { + border-top: @dividedChildListBorder; +} +.ui.divided.list .item .menu .item { + border-top: @dividedChildItemBorder; +} +.ui.divided.list .item:first-child { + border-top: none; +} + +/* Sub Menu */ +.ui.divided.list:not(.horizontal) .list .item:first-child { + border-top-width: @dividedBorderWidth; +} + +/* Divided bulleted */ +.ui.divided.bulleted.list:not(.horizontal), +.ui.divided.bulleted.list .list { + margin-left: 0em; + padding-left: 0em; +} +.ui.divided.bulleted.list .item:not(.horizontal) { + padding-left: @bulletDistance; +} +.ui.divided.bulleted.list .item:before { + left: 0em; +} + +/* Divided Ordered */ +.ui.divided.ordered.list { + margin-left: 0em; +} +.ui.divided.ordered.list .item { + padding-left: @orderedCountDistance; +} +.ui.divided.ordered.list .item:before { + left: 0em; +} +.ui.divided.ordered.list .item .list { + margin-left: 0em; + margin-right: 0em; + padding-bottom: @itemVerticalPadding; +} +.ui.divided.ordered.list .item .list .item { + padding-left: @orderedChildCountDistance; +} + + +/* Divided horizontal */ +.ui.divided.horizontal.list { + margin-left: 0em; +} +.ui.divided.horizontal.list > .item { + border-top: none; + border-left: @dividedBorder; + margin: 0em; + padding-left: @horizontalDividedSpacing; + padding-right: @horizontalDividedSpacing; + line-height: @horizontalDividedLineHeight; +} +.ui.horizontal.divided.list > .item:first-child { + border-left: none; + padding-left: 0em; +} + +/* Inverted */ +.ui.divided.inverted.list > .item, +.ui.divided.inverted.list > .list, +.ui.divided.inverted.horizontal.list .item { + border-color: @dividedInvertedBorderColor; +} + + +/*------------------- + Celled +--------------------*/ + +.ui.celled.list > .item, +.ui.celled.list > .list { + border-top: @celledBorder; + padding-left: @celledHorizontalPadding; + padding-right: @celledHorizontalPadding; +} +.ui.celled.list > .item:last-child { + border-bottom: @celledBorder; +} + +/* Padding on all elements */ +.ui.celled.list > .item:first-child, +.ui.celled.list > .item:last-child { + padding-top: @itemVerticalPadding; + padding-bottom: @itemVerticalPadding; +} + +/* Sub Menu */ +.ui.celled.list .item .list .item { + border-width: 0px; +} +.ui.celled.list .list .item:first-child { + border-top-width: 0px; +} + +/* Celled Bulleted */ +.ui.celled.bulleted.list { + margin-left: 0em; +} +.ui.celled.bulleted.list .item { + padding-left: (@bulletDistance); +} +.ui.celled.bulleted.list .item:before { + left: 0em; +} +.ui.celled.bulleted.list .item .list { + margin-left: -(@bulletDistance); + margin-right: -(@bulletDistance); + padding-bottom: @itemVerticalPadding; +} + +/* Celled Ordered */ +.ui.celled.ordered.list { + margin-left: 0em; +} +.ui.celled.ordered.list .item { + padding-left: @orderedCountDistance; +} +.ui.celled.ordered.list .item:before { + left: 0em; +} +.ui.celled.ordered.list .item .list { + margin-left: 0em; + margin-right: 0em; + padding-bottom: @itemVerticalPadding; +} +.ui.celled.ordered.list .item .list .item { + padding-left: @orderedChildCountDistance; +} + +/* Celled Horizontal */ +.ui.horizontal.celled.list { + margin-left: 0em; +} +.ui.horizontal.celled.list .item { + border-top: none; + border-left: @celledBorder; + margin: 0em; + padding-left: @horizontalCelledSpacing; + padding-right: @horizontalCelledSpacing; + + line-height: @horizontalCelledLineHeight; +} +.ui.horizontal.celled.list .item:last-child { + border-bottom: none; + border-right: @celledBorder; +} + +/* Inverted */ +.ui.celled.inverted.list > .item, +.ui.celled.inverted.list > .list { + border-color: @celledInvertedBorder; +} +.ui.celled.inverted.horizontal.list .item { + border-color: @celledInvertedBorder; +} + +/*------------------- + Relaxed +--------------------*/ + +.ui.relaxed.list:not(.horizontal) .item { + padding-top: @relaxedVerticalPadding; + padding-bottom: @relaxedVerticalPadding; +} +.ui.relaxed.list .header { + /*margin-bottom: @relaxedHeaderMargin;*/ +} +.ui.horizontal.relaxed.list .item { + padding-left: @relaxedHorizontalPadding; + padding-right: @relaxedHorizontalPadding; +} +.ui.very.relaxed.list:not(.horizontal) .item { + padding-top: @veryRelaxedVerticalPadding; + padding-bottom: @veryRelaxedVerticalPadding; +} +.ui.very.relaxed.list .header { + /*margin-bottom: @veryRelaxedHeaderMargin;*/ +} +.ui.horizontal.very.relaxed.list .item { + padding-left: @veryRelaxedHorizontalPadding; + padding-right: @veryRelaxedHorizontalPadding; +} + +/*------------------- + Sizes +--------------------*/ + +.ui.mini.list .item { + font-size: @mini; +} +.ui.tiny.list .item { + font-size: @tiny; +} +.ui.small.list .item { + font-size: @small; +} +.ui.list .item { + font-size: @medium; +} +.ui.large.list .item { + font-size: @large; +} +.ui.big.list .item { + font-size: @big; +} +.ui.huge.list .item { + font-size: @huge; +} +.ui.massive.list .item { + font-size: @massive; +} + +.loadUIOverrides(); diff --git a/src/themes/packages/default/collections/form.variables b/src/themes/packages/default/collections/form.variables index 49bff0887..5fce0e99b 100755 --- a/src/themes/packages/default/collections/form.variables +++ b/src/themes/packages/default/collections/form.variables @@ -79,7 +79,7 @@ @formErrorBackground: @negativeBackgroundColor; /* Input Error */ -@inputErrorPointerSize: 3px; +@inputErrorPointerSize: 2px; @inputErrorBorderRadius: 0em @inputBorderRadius @inputBorderRadius 0em; @inputErrorBoxShadow: @inputErrorPointerSize 0em 0em 0em @formErrorColor inset; diff --git a/src/themes/packages/default/collections/message.variables b/src/themes/packages/default/collections/message.variables index 5e908f4bc..6b4a31630 100755 --- a/src/themes/packages/default/collections/message.variables +++ b/src/themes/packages/default/collections/message.variables @@ -69,7 +69,8 @@ @circularIconContentDistance: 2em; /* Attached */ -@attachedOffset: -1px; +@attachedXOffset: -1px; +@attachedYOffset: 0px; @attachedBoxShadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.1) inset; @attachedBottomBoxShadow: @attachedBoxShadow, diff --git a/src/themes/packages/default/globals/site.variables b/src/themes/packages/default/globals/site.variables index 3e7af5911..a4d5f6737 100755 --- a/src/themes/packages/default/globals/site.variables +++ b/src/themes/packages/default/globals/site.variables @@ -143,11 +143,11 @@ /*--- Colored Text ---*/ @blueTextColor : @blue; -@greenTextColor : @green; @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 @@ -168,11 +168,11 @@ --------------------*/ /* Mood */ -@positiveBackgroundColor : #DFF0D8; -@negativeBackgroundColor : #F2DEDE; +@positiveBackgroundColor : #E4F5DD; +@negativeBackgroundColor : #FAF1F1; -@positiveBorderColor : #D6E9C6; -@negativeBorderColor : #DA9797; +@positiveBorderColor : #B7CAA7; +@negativeBorderColor : #DBB1B1; /* Solid Background Color */ @positiveColor : @green; @@ -183,17 +183,17 @@ /* Status */ -@infoBackgroundColor : #D9EDF7; +@infoBackgroundColor : #E5F6FB; @warningBackgroundColor : #FCF8E3; @successBackgroundColor : @positiveBackgroundColor; @errorBackgroundColor : @negativeBackgroundColor; -@infoBorderColor : #BCE8F1; -@warningBorderColor : #FAEBCC; +@infoBorderColor : #AAD6DF; +@warningBorderColor : #D3C4A5; @successBorderColor : @positiveBorderColor; @errorBorderColor : @negativeBorderColor; -@infoTextColor : #31708F; +@infoTextColor : #337B92; @warningTextColor : #8A6D3B; @successTextColor : @positiveTextColor; @errorTextColor : @negativeTextColor;