From a13cf04d235272e9677053a279ad1bca6d5e35c2 Mon Sep 17 00:00:00 2001 From: Jack Lukic Date: Tue, 1 Sep 2015 19:14:00 -0400 Subject: [PATCH] Remove label padding to work correctly with compact button --- src/definitions/elements/button.less | 2 +- src/theme.less | 16 +++++--- src/themes/default/elements/button.variables | 4 +- src/themes/github/elements/button.variables | 41 +++++++++++--------- src/themes/github/globals/site.variables | 40 +++---------------- 5 files changed, 42 insertions(+), 61 deletions(-) diff --git a/src/definitions/elements/button.less b/src/definitions/elements/button.less index e7607570a..1eca620da 100755 --- a/src/definitions/elements/button.less +++ b/src/definitions/elements/button.less @@ -867,7 +867,7 @@ width: 100%; top: 50%; text-align: center; - margin-top: -(@lineHeight / 2); + transform: translateY(-50%); } .ui.labeled.icon.buttons .button > .icon { diff --git a/src/theme.less b/src/theme.less index 545bf8f22..54495c581 100644 --- a/src/theme.less +++ b/src/theme.less @@ -2,20 +2,26 @@ Import Directives *******************************/ -@theme : @@element; +/*------------------ + Theme +-------------------*/ +@theme: @@element; /*-------------------- Site Variables ---------------------*/ -/* Default */ +/* Default site.variables */ @import "@{themesFolder}/default/globals/site.variables"; -/* Packaged Theme */ -@import (optional) "@{themesFolder}/@{site}/globals/site.variables"; +/* Packaged site.variables */ +@import "@{themesFolder}/@{site}/globals/site.variables"; -/* Site Theme */ +/* Component's site.variables */ +@import "@{themesFolder}/@{theme}/globals/site.variables"; + +/* Site theme site.variables */ @import (optional) "@{siteFolder}/globals/site.variables"; diff --git a/src/themes/default/elements/button.variables b/src/themes/default/elements/button.variables index 411bbc93f..f759f9299 100644 --- a/src/themes/default/elements/button.variables +++ b/src/themes/default/elements/button.variables @@ -25,7 +25,7 @@ @fontWeight: bold; @textColor: rgba(0, 0, 0, 0.6); @textShadow: none; -@invertedTextShadow: none; +@invertedTextShadow: @textShadow; @borderRadius: @defaultBorderRadius; @verticalAlign: baseline; @@ -162,7 +162,7 @@ /* Labeled */ @labeledLabelFontSize: @medium; @labeledLabelAlign: center; -@labeledLabelPadding: @verticalPadding @horizontalPadding; +@labeledLabelPadding: ''; @labeledLabelFontSize: @relativeMedium; @labeledLabelBorderColor: @borderColor; @labeledLabelBorderOffset: -@borderBoxShadowWidth; diff --git a/src/themes/github/elements/button.variables b/src/themes/github/elements/button.variables index 46e74a491..c4edca42b 100644 --- a/src/themes/github/elements/button.variables +++ b/src/themes/github/elements/button.variables @@ -1,11 +1,30 @@ +/*------------------- + Globals +--------------------*/ + +/* These are also defined in site.variables but allow for stand-alone usage */ + + + /*------------------- Button Variables --------------------*/ +/* Sizes */ +@mini: 10px; +@tiny: 11px; +@small: 12px; +@medium: 13px; +@large: 15px; +@big: 16px; +@huge: 18px; +@massive: 24px; + /* Text Style */ @textTransform: none; @fontWeight: bold; @textColor: #333333; +@invertedTextShadow: 0 -1px 0 rgba(0, 0, 0, 0.15); @transition: opacity @defaultDuration @defaultEasing, @@ -19,8 +38,8 @@ @iconDistance: @relative4px; @lineHeight: 1.53184em; -@verticalPadding: @relative6px; -@horizontalPadding: @relative10px; +@verticalPadding: @relative7px; +@horizontalPadding: @relative12px; @backgroundColor: #FBFBFB; @backgroundImage: linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.05)); @@ -58,7 +77,7 @@ @labeledIconPadding: (@horizontalPadding + 2.25em); @labeledLabelFontSize: @relative11px; -@labeledLabelAlign: flex-end; +@labeledLabelAlign: center; @basicFontWeight: bold; @basicTextColor: @linkColor; @@ -66,22 +85,6 @@ @basicHoverBackground: #E0E0E0; -@blue: #3072B3; -@green: #60B044; -@black: #5D5D5D; - -@primaryColor: @blue; -@secondaryColor: @black; @positiveColor: #84D767; @positiveColorHover: #5DC438; - -/* Sizes */ -@mini: 10px; -@tiny: 11px; -@small: 12px; -@medium: 13px; -@large: 15px; -@big: 16px; -@huge: 18px; -@massive: 24px; \ No newline at end of file diff --git a/src/themes/github/globals/site.variables b/src/themes/github/globals/site.variables index 77fdac7f3..b5879ee8f 100644 --- a/src/themes/github/globals/site.variables +++ b/src/themes/github/globals/site.variables @@ -18,14 +18,18 @@ /* Colors */ @blue: #80A6CD; -@green: #60B044; +@green: #78CB5B; @orange: #D26911; @black: #333333; +@primaryColor: @green; +@secondaryColor: @black; +/* Links */ @linkColor: #4078C0; @linkHoverColor: @linkColor; @linkHoverUnderline: underline; +/* Borders */ @borderColor: rgba(0, 0, 0, 0.13); @solidBorderColor: #DDDDDD; @internalBorderColor: rgba(0, 0, 0, 0.06); @@ -40,36 +44,4 @@ @infoTextColor: #4E575B; @warningTextColor: #613A00; -@errorTextColor: #991111; - - -/* Derived EM */ -@1px : unit( (1 / @emSize), rem); -@2px : unit( (2 / @emSize), rem); -@3px : unit( (3 / @emSize), rem); -@4px : unit( (4 / @emSize), rem); -@5px : unit( (5 / @emSize), rem); -@6px : unit( (6 / @emSize), rem); -@7px : unit( (7 / @emSize), rem); -@8px : unit( (8 / @emSize), rem); -@9px : unit( (9 / @emSize), rem); -@10px : unit( (10 / @emSize), rem); -@11px : unit( (11 / @emSize), rem); -@12px : unit( (12 / @emSize), rem); -@13px : unit( (13 / @emSize), rem); -@14px : unit( (14 / @emSize), rem); - -@relative1px : unit( (1 / @emSize), em); -@relative2px : unit( (2 / @emSize), em); -@relative3px : unit( (3 / @emSize), em); -@relative4px : unit( (4 / @emSize), em); -@relative5px : unit( (5 / @emSize), em); -@relative6px : unit( (6 / @emSize), em); -@relative7px : unit( (7 / @emSize), em); -@relative8px : unit( (8 / @emSize), em); -@relative9px : unit( (9 / @emSize), em); -@relative10px : unit( (10 / @emSize), em); -@relative11px : unit( (11 / @emSize), em); -@relative12px : unit( (12 / @emSize), em); -@relative13px : unit( (13 / @emSize), em); -@relative14px : unit( (14 / @emSize), em); \ No newline at end of file +@errorTextColor: #991111; \ No newline at end of file