From 22fc88442ef2637b6016250bec1cd8dfbcf191b6 Mon Sep 17 00:00:00 2001 From: Jack Lukic Date: Fri, 1 Apr 2016 12:07:00 -0400 Subject: [PATCH] Fix input spacing rule on dropdown, add colored box shadows, add border colors to message --- RELEASE-NOTES.md | 1 + src/definitions/collections/message.less | 20 ++++++++ src/definitions/modules/dropdown.js | 8 ++-- src/definitions/modules/dropdown.less | 2 +- .../default/collections/message.variables | 48 ++++++++++++++++++- src/themes/default/globals/site.variables | 13 +++++ 6 files changed, 86 insertions(+), 6 deletions(-) diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md index 6b10f07e3..587567747 100644 --- a/RELEASE-NOTES.md +++ b/RELEASE-NOTES.md @@ -59,6 +59,7 @@ - **Table** - `striped selectable` table would not correctly show hover color on striped rows **Enhancements** +- **Site** - Added colored box shadow defaults. `ui message` now includes individual colored border shadows based on new site defaults. - **Dropdown** - Added `1px` offset for current text so that the text position cursor does not overlap first pixel of text. - **Dropdown** - Added new convenience method `restore placeholder text` - **Rating** - Added new setting `fireOnInit` for rating, which defaults to `false`. When set to true `onRate` will fire when rating is initialized #3712 diff --git a/src/definitions/collections/message.less b/src/definitions/collections/message.less index 83d4232e5..1e4129ff3 100755 --- a/src/definitions/collections/message.less +++ b/src/definitions/collections/message.less @@ -351,6 +351,7 @@ .ui.red.message { background-color: @redBackground; color: @redTextColor; + box-shadow: @redBoxShadow; } .ui.red.message .header { color: @redHeaderColor; @@ -359,6 +360,7 @@ .ui.orange.message { background-color: @orangeBackground; color: @orangeTextColor; + box-shadow: @orangeBoxShadow; } .ui.orange.message .header { color: @orangeHeaderColor; @@ -367,6 +369,7 @@ .ui.yellow.message { background-color: @yellowBackground; color: @yellowTextColor; + box-shadow: @yellowBoxShadow; } .ui.yellow.message .header { color: @yellowHeaderColor; @@ -375,6 +378,7 @@ .ui.olive.message { background-color: @oliveBackground; color: @oliveTextColor; + box-shadow: @oliveBoxShadow; } .ui.olive.message .header { color: @oliveHeaderColor; @@ -383,6 +387,7 @@ .ui.green.message { background-color: @greenBackground; color: @greenTextColor; + box-shadow: @greenBoxShadow; } .ui.green.message .header { color: @greenHeaderColor; @@ -391,6 +396,7 @@ .ui.teal.message { background-color: @tealBackground; color: @tealTextColor; + box-shadow: @tealBoxShadow; } .ui.teal.message .header { color: @tealHeaderColor; @@ -399,6 +405,7 @@ .ui.blue.message { background-color: @blueBackground; color: @blueTextColor; + box-shadow: @blueBoxShadow; } .ui.blue.message .header { color: @blueHeaderColor; @@ -407,6 +414,7 @@ .ui.violet.message { background-color: @violetBackground; color: @violetTextColor; + box-shadow: @violetBoxShadow; } .ui.violet.message .header { color: @violetHeaderColor; @@ -415,6 +423,7 @@ .ui.purple.message { background-color: @purpleBackground; color: @purpleTextColor; + box-shadow: @purpleBoxShadow; } .ui.purple.message .header { color: @purpleHeaderColor; @@ -423,6 +432,7 @@ .ui.pink.message { background-color: @pinkBackground; color: @pinkTextColor; + box-shadow: @pinkBoxShadow; } .ui.pink.message .header { color: @pinkHeaderColor; @@ -431,6 +441,7 @@ .ui.brown.message { background-color: @brownBackground; color: @brownTextColor; + box-shadow: @brownBoxShadow; } .ui.brown.message .header { color: @brownHeaderColor; @@ -440,6 +451,12 @@ Sizes ---------------*/ +.ui.mini.message { + font-size: @relativeMini; +} +.ui.tiny.message { + font-size: @relativeTiny; +} .ui.small.message { font-size: @relativeSmall; } @@ -449,6 +466,9 @@ .ui.large.message { font-size: @relativeLarge; } +.ui.big.message { + font-size: @relativeBig; +} .ui.huge.message { font-size: @relativeHuge; } diff --git a/src/definitions/modules/dropdown.js b/src/definitions/modules/dropdown.js index e3d1250cb..a9546a431 100644 --- a/src/definitions/modules/dropdown.js +++ b/src/definitions/modules/dropdown.js @@ -3325,10 +3325,10 @@ $.fn.dropdown.settings = { apiSettings : false, - saveRemoteData : true, // Whether remote name/value pairs should be stored in sessionStorage to allow remote data to be restored on page refresh - throttle : 200, // How long to wait after last user input to search remotely + saveRemoteData : true, // Whether remote name/value pairs should be stored in sessionStorage to allow remote data to be restored on page refresh + throttle : 200, // How long to wait after last user input to search remotely - context : window, // Context to use when determining if on screen + context : window, // Context to use when determining if on screen direction : 'auto', // Whether dropdown should always open in one direction keepOnScreen : true, // Whether dropdown should check whether it is on screen before showing @@ -3357,7 +3357,7 @@ $.fn.dropdown.settings = { transition : 'auto', // auto transition will slide down or up based on direction duration : 200, // duration of transition - glyphWidth : 1.037, // widest glyph width in em (W is 1.037 em) used to calculate multiselect input width + glyphWidth : 1.037, // widest glyph width in em (W is 1.037 em) used to calculate multiselect input width // label settings on multi-select label: { diff --git a/src/definitions/modules/dropdown.less b/src/definitions/modules/dropdown.less index a2ccd2329..fbd73597d 100755 --- a/src/definitions/modules/dropdown.less +++ b/src/definitions/modules/dropdown.less @@ -667,7 +667,7 @@ select.ui.dropdown { line-height: @multipleSelectionChildLineHeight; } .ui.multiple.dropdown > .label ~ input.search { - margin-left: @multipleSelectionSearchAfterLabelDistance; + margin-left: @multipleSelectionSearchAfterLabelDistance !important; } .ui.multiple.dropdown > .label ~ .text { display: none; diff --git a/src/themes/default/collections/message.variables b/src/themes/default/collections/message.variables index dc756e1f0..c2e53187f 100644 --- a/src/themes/default/collections/message.variables +++ b/src/themes/default/collections/message.variables @@ -84,6 +84,52 @@ @floatingShadow ; +/* Colors */ +@redBoxShadow: + 0px 0px 0px @borderWidth @redBorderColor inset, + @shadowShadow +; +@orangeBoxShadow: + 0px 0px 0px @borderWidth @orangeBorderColor inset, + @shadowShadow +; +@yellowBoxShadow: + 0px 0px 0px @borderWidth @yellowBorderColor inset, + @shadowShadow +; +@oliveBoxShadow: + 0px 0px 0px @borderWidth @oliveBorderColor inset, + @shadowShadow +; +@greenBoxShadow: + 0px 0px 0px @borderWidth @greenBorderColor inset, + @shadowShadow +; +@tealBoxShadow: + 0px 0px 0px @borderWidth @tealBorderColor inset, + @shadowShadow +; +@blueBoxShadow: + 0px 0px 0px @borderWidth @blueBorderColor inset, + @shadowShadow +; +@violetBoxShadow: + 0px 0px 0px @borderWidth @violetBorderColor inset, + @shadowShadow +; +@purpleBoxShadow: + 0px 0px 0px @borderWidth @purpleBorderColor inset, + @shadowShadow +; +@pinkBoxShadow: + 0px 0px 0px @borderWidth @pinkBorderColor inset, + @shadowShadow +; +@brownBoxShadow: + 0px 0px 0px @borderWidth @brownBorderColor inset, + @shadowShadow +; + /* Warning / Positive / Negative / Info */ @positiveBoxShadow: 0px 0px 0px @borderWidth @positiveBorderColor inset, @@ -108,4 +154,4 @@ @successBoxShadow: 0px 0px 0px @borderWidth @successBorderColor inset, @shadowShadow -; \ No newline at end of file +; diff --git a/src/themes/default/globals/site.variables b/src/themes/default/globals/site.variables index c4da557f8..cf2bf83d0 100644 --- a/src/themes/default/globals/site.variables +++ b/src/themes/default/globals/site.variables @@ -261,6 +261,19 @@ @pinkTextColor : @pink; @brownTextColor : @brown; +/*--- Colored Border ---*/ +@redBorderColor : @redTextColor; +@orangeBorderColor : @orangeTextColor; +@yellowBorderColor : @yellowTextColor; +@oliveBorderColor : @oliveTextColor; +@greenBorderColor : @greenTextColor; +@tealBorderColor : @tealTextColor; +@blueBorderColor : @blueTextColor; +@violetBorderColor : @violetTextColor; +@purpleBorderColor : @purpleTextColor; +@pinkBorderColor : @pinkTextColor; +@brownBorderColor : @brownTextColor; + /*------------------- Alpha Colors --------------------*/