From 7995bd8150f55e4f9acb7011e848645896d169e8 Mon Sep 17 00:00:00 2001 From: jlukic Date: Fri, 1 Nov 2013 22:36:02 -0400 Subject: [PATCH] Adds travel distance to button active state, fixing issues with uneven padding --- server/documents/modules/dropdown.html.eco | 6 +- server/layouts/default.html.eco | 2 +- src/elements/button.less | 18 +++--- src/global.variables | 72 +++++++++++----------- 4 files changed, 51 insertions(+), 47 deletions(-) diff --git a/server/documents/modules/dropdown.html.eco b/server/documents/modules/dropdown.html.eco index 8867d3e99..849136a7f 100755 --- a/server/documents/modules/dropdown.html.eco +++ b/server/documents/modules/dropdown.html.eco @@ -76,7 +76,7 @@ type : 'UI Module'

A dropdown menu can appear to be floating below an element.

Save
-
+
Edit Post
@@ -413,7 +413,7 @@ type : 'UI Module'

A button can be formatted with a dropdown

Update Post
-
+
Edit Post
@@ -524,7 +524,7 @@ type : 'UI Module'

A dropdown can have different transitions.

Toggle
-
+
Horizontal Flip
diff --git a/server/layouts/default.html.eco b/server/layouts/default.html.eco index 7a19b0a8f..ddb3f93f3 100755 --- a/server/layouts/default.html.eco +++ b/server/layouts/default.html.eco @@ -61,7 +61,7 @@ - + diff --git a/src/elements/button.less b/src/elements/button.less index 6860a4af1..71dda420a 100755 --- a/src/elements/button.less +++ b/src/elements/button.less @@ -34,18 +34,18 @@ @fontWeight: bold; @textColor: rgba(0, 0, 0, 0.6); +@borderRadius: 0.25em; +@shadowDistance: 0.133em; + @verticalPadding: 0.8em; @horizontalPadding: 1.5em; @compactVerticalPadding: (@verticalPadding * 0.75); @compactHorizontalPadding: (@horizontalPadding * 0.75); -@borderRadius: 0.25em; - @backgroundColor: #FAFAFA; @backgroundImage: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05)); -@shadowDistance: 0.133em; @boxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08) inset, 0px -@shadowDistance 0px 0px rgba(0, 0, 0, 0.1) inset @@ -106,7 +106,7 @@ color: @textColor; margin: 0em; - padding: @verticalPadding @horizontalPadding ( @verticalPadding + (@shadowDistance / 2) ); + padding: @verticalPadding @horizontalPadding ( @verticalPadding + @shadowDistance ); font-size: 1rem; text-transform: @textTransform; @@ -161,6 +161,8 @@ .ui.active.button:active { background-color: @downBackgroundColor; background-image: @downBackgroundImage; + padding-top: (@verticalPadding + (@shadowDistance / 2)); + padding-bottom: (@verticalPadding + (@shadowDistance / 2)); color: @selectedTextColor; box-shadow: @downBoxShadow; } @@ -173,6 +175,8 @@ .ui.active.button { background-color: @activeBackgroundColor; background-image: @activeBackgroundImage; + padding-top: (@verticalPadding + (@shadowDistance / 2)); + padding-bottom: (@verticalPadding + (@shadowDistance / 2)); box-shadow: @activeBoxShadow; color: @textColor; } @@ -533,11 +537,11 @@ .ui.compact.buttons .button, .ui.compact.button { - padding: @compactVerticalPadding @compactHorizontalPadding ( @compactVerticalPadding + (@shadowDistance / 2) ); + padding: @compactVerticalPadding @compactHorizontalPadding ( @compactVerticalPadding + @shadowDistance ); } .ui.compact.icon.buttons .button, .ui.compact.buttons .icon.button { - padding: @compactVerticalPadding @compactVerticalPadding ( @compactVerticalPadding + (@shadowDistance / 2) ); + padding: @compactVerticalPadding @compactVerticalPadding ( @compactVerticalPadding + @shadowDistance ); } @@ -631,7 +635,7 @@ .ui.icon.buttons .button, .ui.icon.button { - padding: @verticalPadding @verticalPadding ( @verticalPadding + (@shadowDistance / 2) ); + padding: @verticalPadding @verticalPadding ( @verticalPadding + @shadowDistance ); } .ui.icon.buttons .button > .icon, .ui.icon.button > .icon { diff --git a/src/global.variables b/src/global.variables index 16c4c0141..49a21176d 100755 --- a/src/global.variables +++ b/src/global.variables @@ -251,44 +251,44 @@ --------------------*/ /*--- Standard ---*/ -@primaryColorActive : lighten(@primaryColor, 10); -@secondaryColorActive : lighten(@secondaryColor, 10); -@tertiaryColorActive : lighten(@tertiaryColor, 10); - -@blueActive : lighten(@blue, 10); -@greenActive : lighten(@green, 10); -@orangeActive : lighten(@orange, 10); -@pinkActive : lighten(@pink, 10); -@purpleActive : lighten(@purple, 10); -@redActive : lighten(@red, 10); -@tealActive : lighten(@teal, 10); -@yellowActive : lighten(@yellow, 10); +@primaryColorActive : darken(@primaryColor, 10); +@secondaryColorActive : darken(@secondaryColor, 10); +@tertiaryColorActive : darken(@tertiaryColor, 10); + +@blueActive : darken(@blue, 10); +@greenActive : darken(@green, 10); +@orangeActive : darken(@orange, 10); +@pinkActive : darken(@pink, 10); +@purpleActive : darken(@purple, 10); +@redActive : darken(@red, 10); +@tealActive : darken(@teal, 10); +@yellowActive : darken(@yellow, 10); /*--- Emotive ---*/ -@positiveColorActive : lighten(@positiveColor, 10); -@negativeColorActive : lighten(@negativeColor, 10); +@positiveColorActive : darken(@positiveColor, 10); +@negativeColorActive : darken(@negativeColor, 10); -@infoColorActive : lighten(@infoColor, 10); -@warningColorActive : lighten(@warningColor, 10); -@errorColorActive : lighten(@errorColor, 10); +@infoColorActive : darken(@infoColor, 10); +@warningColorActive : darken(@warningColor, 10); +@errorColorActive : darken(@errorColor, 10); /*--- Neutrals ---*/ -@darkBlackActive : lighten(@darkBlack, 10); -@blackActive : lighten(@black, 10); -@lightBlackActive : lighten(@lightBlack, 10); - -@lightGreyActive : lighten(@lightGrey, 10); -@greyActive : lighten(@grey, 10); -@darkGreyActive : lighten(@darkGrey, 10); - -@whiteActive : lighten(@white, 10); -@offWhiteActive : lighten(@offWhite, 10); -@darkWhiteActive : lighten(@darkWhite, 10); - -@facebookActiveColor : lighten(@facebookColor, 10); -@twitterActiveColor : lighten(@twitterColor, 10); -@googlePlusActiveColor : lighten(@googlePlusColor, 10); -@linkedInActiveColor : lighten(@linkedInColor, 10); -@youtubeActiveColor : lighten(@youtubeColor, 10); -@instagramActiveColor : lighten(@instagramColor, 10); -@pinterestActiveColor : lighten(@pinterestColor, 10); +@darkBlackActive : darken(@darkBlack, 10); +@blackActive : darken(@black, 10); +@lightBlackActive : darken(@lightBlack, 10); + +@lightGreyActive : darken(@lightGrey, 10); +@greyActive : darken(@grey, 10); +@darkGreyActive : darken(@darkGrey, 10); + +@whiteActive : darken(@white, 10); +@offWhiteActive : darken(@offWhite, 10); +@darkWhiteActive : darken(@darkWhite, 10); + +@facebookActiveColor : darken(@facebookColor, 10); +@twitterActiveColor : darken(@twitterColor, 10); +@googlePlusActiveColor : darken(@googlePlusColor, 10); +@linkedInActiveColor : darken(@linkedInColor, 10); +@youtubeActiveColor : darken(@youtubeColor, 10); +@instagramActiveColor : darken(@instagramColor, 10); +@pinterestActiveColor : darken(@pinterestColor, 10);