From 5f3f44d05681613f0b24eeca792b843c161c395d Mon Sep 17 00:00:00 2001 From: jlukic Date: Tue, 5 Aug 2014 13:54:41 -0400 Subject: [PATCH] Fixes for icon message, button shadows, adds Lato as default font for docs only --- src/definitions/collections/message.less | 16 ++++++++----- src/definitions/elements/button.less | 23 ++++--------------- .../default/collections/message.variables | 6 ++++- .../default/elements/button.variables | 20 +++++++++------- .../packages/default/globals/site.variables | 2 +- 5 files changed, 32 insertions(+), 35 deletions(-) diff --git a/src/definitions/collections/message.less b/src/definitions/collections/message.less index 5c3e4bdb7..bad261ba5 100755 --- a/src/definitions/collections/message.less +++ b/src/definitions/collections/message.less @@ -48,7 +48,7 @@ Content ---------------*/ -/* block with headers */ +/* Header */ .ui.message .header { display: @headerDisplay; font-family: @headerFont; @@ -57,7 +57,7 @@ margin: 0em @headerHorizontalDistance 0em 0em; } -/* block with paragraphs */ +/* Paragraph */ .ui.message p { opacity: @messageTextOpacity; margin: @messageParagraphMargin 0em; @@ -72,7 +72,7 @@ margin-top: @headerBottomMargin; } -/* Block with list */ +/* List */ .ui.message ul.list { opacity: @listOpacity; list-style-position: @listStylePosition; @@ -96,6 +96,12 @@ margin-top: 0em; } + +/* Icon */ +.ui.message > .icon { + margin-right: @iconDistance; +} + /* Close Icon */ .ui.message > .close.icon { cursor: pointer; @@ -189,9 +195,7 @@ vertical-align: @iconVerticalAlign; font-size: @iconSize; opacity: @iconOpacity; -} -.ui.icon.message > .icon + .content { - padding-left: @iconDistance; + padding-right: @iconContentDistance; } .ui.icon.message > .content { display: table-cell; diff --git a/src/definitions/elements/button.less b/src/definitions/elements/button.less index cf0293bcb..e0e26d3a8 100755 --- a/src/definitions/elements/button.less +++ b/src/definitions/elements/button.less @@ -505,25 +505,10 @@ ---------------*/ .ui.button > .icon { - margin-right: @iconMargin; - - line-height: 1; - - -webkit-transition: - opacity 0.1s @transitionEasing - ; - -moz-transition: - opacity 0.1s @transitionEasing - ; - -o-transition: - opacity 0.1s @transitionEasing - ; - -ms-transition: - opacity 0.1s @transitionEasing - ; - transition: - opacity 0.1s @transitionEasing - ; + opacity: @iconOpacity; + margin: @iconMargin; + transition: @iconTransition; + vertical-align: @iconVerticalAlign; } /******************************* diff --git a/src/themes/packages/default/collections/message.variables b/src/themes/packages/default/collections/message.variables index da1746c7e..68763704c 100755 --- a/src/themes/packages/default/collections/message.variables +++ b/src/themes/packages/default/collections/message.variables @@ -25,6 +25,7 @@ ; /* Header */ + @headerFontSize: 1.3em; @headerFontWeight: bold; @headerBottomMargin: 0.25em; @@ -43,6 +44,9 @@ @listItemIndent: 1em; @listItemMargin: 0.3em; +/* Icon */ +@iconDistance: 0.6em; + /* Close Icon */ @closeTopDistance: 1em; @closeRightDistance: 0.5em; @@ -56,7 +60,7 @@ /* Icon Message */ @iconSize: 2em; @iconOpacity: 0.8; -@iconDistance: 1.5em; +@iconContentDistance: 1.5em; @iconVerticalAlign: middle; /* Attached */ diff --git a/src/themes/packages/default/elements/button.variables b/src/themes/packages/default/elements/button.variables index 18854bf08..95a60557e 100755 --- a/src/themes/packages/default/elements/button.variables +++ b/src/themes/packages/default/elements/button.variables @@ -14,14 +14,18 @@ @textColor: rgba(0, 0, 0, 0.6); @textShadow: none; @invertedTextShadow: none; - @borderRadius: 0.25em; +/* Shadow */ +@shadowDistance: 0em; +@shadowOffset: (@shadowDistance / 2); +@shadowBoxShadow: 0px -@shadowDistance 0px 0px rgba(0, 0, 0, 0.1) inset; + @backgroundColor: #FAFAFA; @backgroundImage: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.09)); @boxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset, - 0px -@shadowDistance 0px 0px rgba(0, 0, 0, 0.1) inset + @shadowBoxShadow ; /* transitions */ @@ -37,12 +41,12 @@ @verticalPadding: 0.8em; @horizontalPadding: 1.5em; -/* Shadow */ -@shadowDistance: 0em; -@shadowOffset: (@shadowDistance / 2); - /* Icon */ -@iconMargin: 0.6em; +@iconOpacity: 0.8; +@iconDistance: 0.4em; +@iconTransition: opacity @transitionDuration @transitionEasing; +@iconMargin: 0em @iconDistance 0em -@iconDistance; +@iconVerticalAlign: top; /* Loader */ @loaderPath: "@{imagePath}/loader-mini.gif"; @@ -155,7 +159,7 @@ /* Colors */ @coloredBackgroundImage: linear-gradient(rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.1)); -@coloredBoxShadow: none; +@coloredBoxShadow: @shadowBoxShadow; /* Compact */ @compactVerticalPadding: (@verticalPadding * 0.75); diff --git a/src/themes/packages/default/globals/site.variables b/src/themes/packages/default/globals/site.variables index 9a70589f9..f4a82c844 100755 --- a/src/themes/packages/default/globals/site.variables +++ b/src/themes/packages/default/globals/site.variables @@ -166,7 +166,7 @@ @purpleTextColor : @purple; @redTextColor : @red; @tealTextColor : @teal; -@yellowTextColor : #EAB600; // Yellow text illegible +@yellowTextColor : #B58105; // Yellow text illegible /*--- Backgrounds ---*/ @blueBackground : #D3E4F3;