From 5021d26056479afa61be381dbb3cc15de39562e7 Mon Sep 17 00:00:00 2001 From: Daniel Furze Date: Mon, 19 Jan 2015 18:54:11 +0000 Subject: [PATCH] refactor(Mixins): Overhaul of all unused and redundant mixins --- .../less/_mixins/mixins-backgrounds.less | 24 -- .../styles/less/_mixins/mixins-columns.less | 25 --- .../styles/less/_mixins/mixins-fluid.less | 16 +- .../styles/less/_mixins/mixins-misc.less | 11 - .../styles/less/_mixins/mixins-pxtorem.less | 211 ------------------ .../less/_mixins/mixins-transforms.less | 135 ----------- .../less/_mixins/mixins-transitions.less | 31 --- .../styles/less/_mixins/mixins-type.less | 29 --- .../styles/less/_mixins/mixins-utilities.less | 52 ++--- src/assets/styles/less/_order.less | 2 + src/assets/styles/less/_variables.less | 29 ++- src/assets/styles/less/buttons.less | 204 ++++++++--------- src/assets/styles/less/global.less | 6 +- src/assets/styles/less/layout.less | 36 +-- .../{_mixins/mixins-lists.less => lists.less} | 6 +- src/assets/styles/less/type.less | 58 +++-- src/assets/styles/less/utilities.less | 92 ++++---- 17 files changed, 259 insertions(+), 708 deletions(-) delete mode 100644 src/assets/styles/less/_mixins/mixins-columns.less delete mode 100644 src/assets/styles/less/_mixins/mixins-misc.less delete mode 100644 src/assets/styles/less/_mixins/mixins-pxtorem.less delete mode 100644 src/assets/styles/less/_mixins/mixins-transforms.less delete mode 100644 src/assets/styles/less/_mixins/mixins-transitions.less delete mode 100644 src/assets/styles/less/_mixins/mixins-type.less rename src/assets/styles/less/{_mixins/mixins-lists.less => lists.less} (70%) diff --git a/src/assets/styles/less/_mixins/mixins-backgrounds.less b/src/assets/styles/less/_mixins/mixins-backgrounds.less index b64c6ad..3b2d7eb 100644 --- a/src/assets/styles/less/_mixins/mixins-backgrounds.less +++ b/src/assets/styles/less/_mixins/mixins-backgrounds.less @@ -1,27 +1,3 @@ -// Background clipping -// Heads up: FF 3.6 and under need "padding" instead of "padding-box" -.background-clip(@clip) { - -webkit-background-clip: @clip; - -moz-background-clip: @clip; - background-clip: @clip; -} - -// Background sizing -.background-size(@size){ - -webkit-background-size: @size; - -moz-background-size: @size; - -o-background-size: @size; - background-size: @size; -} - -// Background sizing -.background-size(@size1, @size2){ - -webkit-background-size: @size1 @size2; - -moz-background-size: @size1 @size2; - -o-background-size: @size1 @size2; - background-size: @size1 @size2; -} - // RGBA Backgrounds .rgba-bg(@colour, @alpha){ @alphaColour: hsla(hue(@colour), saturation(@colour), lightness(@colour), @alpha); diff --git a/src/assets/styles/less/_mixins/mixins-columns.less b/src/assets/styles/less/_mixins/mixins-columns.less deleted file mode 100644 index 45f5b63..0000000 --- a/src/assets/styles/less/_mixins/mixins-columns.less +++ /dev/null @@ -1,25 +0,0 @@ -// CSS Columns -.columns(@columnCount, @columnGap: @globalGutter) { - -webkit-column-count: @columnCount; - -moz-column-count: @columnCount; - column-count: @columnCount; - -webkit-column-gap: @columnGap; - -moz-column-gap: @columnGap; - column-gap: @columnGap; -} - -.column-gap(@columnGap: @globalGutter) { - -webkit-column-gap: @columnGap !important; - -moz-column-gap: @columnGap !important; - column-gap: @columnGap !important; -} -.column-span(@columnSpan) { - -webkit-column-span: @columnSpan; - -moz-column-span: @columnSpan; - column-span: @columnSpan; -} -.column-rule(@columnRule) { - -webkit-column-rule: @columnRule; - -moz-column-rule: @columnRule; - column-rule: @columnRule; -} diff --git a/src/assets/styles/less/_mixins/mixins-fluid.less b/src/assets/styles/less/_mixins/mixins-fluid.less index 3a4c1b5..242c30a 100644 --- a/src/assets/styles/less/_mixins/mixins-fluid.less +++ b/src/assets/styles/less/_mixins/mixins-fluid.less @@ -1,42 +1,42 @@ -// calculates a "fluid" (percentage) width (Ethan Marcotte: target / context = result method) +// calculates a "fluid" (percentage) width (Ethan Marcotte: target / context = result method: http://alistapart.com/article/fluidgrids) .fluid-width(@target, @context) { width: 100%*(@target/@context); - // ie correct formular to prevent + // IE7 correction *width: (100%*(@target/@context))-@grid-correction; } .fluid-margin-right(@target, @context) { margin-right: 100%*(@target/@context); - // ie correct formular to prevent + // IE7 correction *margin-right: (100%*(@target/@context))-@grid-correction; } .fluid-margin-left(@target, @context) { margin-left: 100%*(@target/@context); - // ie correct formular to prevent + // IE7 correction *margin-left: (100%*(@target/@context))-@grid-correction; } .fluid-padding-right(@target, @context) { padding-right: 100%*(@target/@context); - // ie correct formular to prevent + // IE7 correction *padding-right: (100%*(@target/@context))-@grid-correction; } .fluid-padding-left(@target, @context) { padding-left: 100%*(@target/@context); - // ie correct formular to prevent + // IE7 correction *padding-left: (100%*(@target/@context))-@grid-correction; } .fluid-right(@target, @context) { right: 100%*(@target/@context); - // ie correct formular to prevent + // IE7 correction *right: (100%*(@target/@context))-@grid-correction; } .fluid-left(@target, @context) { left: 100%*(@target/@context); - // ie correct formular to prevent + // IE7 correction *left: (100%*(@target/@context))-@grid-correction; } diff --git a/src/assets/styles/less/_mixins/mixins-misc.less b/src/assets/styles/less/_mixins/mixins-misc.less deleted file mode 100644 index a66b3d3..0000000 --- a/src/assets/styles/less/_mixins/mixins-misc.less +++ /dev/null @@ -1,11 +0,0 @@ -// custom underlines -.underline(@thickness: 1px, @color: #000, @opacity: 100%, @position: 99%) { - text-decoration: none; - .background-image( linear-gradient(to bottom, fade(@color,0%) 50%, fade(@color,@opacity) 50%) ); - background-repeat: repeat-x; - background-size: @thickness*2 @thickness*2; - background-position: 0 @position; -} -.underline-reset() { - background: none; -} diff --git a/src/assets/styles/less/_mixins/mixins-pxtorem.less b/src/assets/styles/less/_mixins/mixins-pxtorem.less deleted file mode 100644 index 593f646..0000000 --- a/src/assets/styles/less/_mixins/mixins-pxtorem.less +++ /dev/null @@ -1,211 +0,0 @@ -// px to rem mixins - -// REM Margins -.margin(@pxValue){ - @remValue: ~`parseInt("@{pxValue}", 10) / parseInt("@{rem-base}", 10)`; - margin: @pxValue; - margin: ~"@{remValue}rem"; -} - -.margin(@pxVertical; @pxHorizontal){ - @remVertical: ~`parseInt("@{pxVertical}", 10) / parseInt("@{rem-base}", 10)`; - @remHorizontal: ~`parseInt("@{pxHorizontal}", 10) / parseInt("@{rem-base}", 10)`; - margin: @pxVertical @pxHorizontal; - margin: ~"@{remVertical}rem @{remHorizontal}rem"; -} - -.margin(@pxTop; @pxHorizontal; @pxBottom){ - @remTop: ~`parseInt("@{pxTop}", 10) / parseInt("@{rem-base}", 10)`; - @remHorizontal: ~`parseInt("@{pxHorizontal}", 10) / parseInt("@{rem-base}", 10)`; - @remBottom: ~`parseInt("@{pxBottom}", 10) / parseInt("@{rem-base}", 10)`; - margin: @pxTop @pxHorizontal @pxBottom; - margin: ~"@{remTop}rem @{remHorizontal}rem @{remBottom}rem"; -} - -.margin(@pxTop; @pxRight; @pxBottom; @pxLeft){ - @remTop: ~`parseInt("@{pxTop}", 10) / parseInt("@{rem-base}", 10)`; - @remRight: ~`parseInt("@{pxRight}", 10) / parseInt("@{rem-base}", 10)`; - @remBottom: ~`parseInt("@{pxBottom}", 10) / parseInt("@{rem-base}", 10)`; - @remLeft: ~`parseInt("@{pxLeft}", 10) / parseInt("@{rem-base}", 10)`; - margin: @pxTop @pxRight @pxBottom @pxLeft; - margin: ~"@{remTop}rem @{remRight}rem @{remBottom}rem @{remLeft}rem"; -} - -.margin-top(@pxValue){ - @remValue: ~`parseInt("@{pxValue}", 10) / parseInt("@{rem-base}", 10)`; - margin-top: @pxValue; - margin-top: ~"@{remValue}rem"; -} - -.margin-bottom(@pxValue){ - @remValue: ~`parseInt("@{pxValue}", 10) / parseInt("@{rem-base}", 10)`; - margin-bottom: @pxValue; - margin-bottom: ~"@{remValue}rem"; -} - -.margin-right(@pxValue){ - @remValue: ~`parseInt("@{pxValue}", 10) / parseInt("@{rem-base}", 10)`; - margin-right: @pxValue; - margin-right: ~"@{remValue}rem"; -} - -.margin-left(@pxValue){ - @remValue: ~`parseInt("@{pxValue}", 10) / parseInt("@{rem-base}", 10)`; - margin-left: @pxValue; - margin-left: ~"@{remValue}rem"; -} - - -// REM Padding -.padding(@pxValue){ - @remValue: ~`parseInt("@{pxValue}", 10) / parseInt("@{rem-base}", 10)`; - padding: @pxValue; - padding: ~"@{remValue}rem"; -} - -.padding(@pxVertical; @pxHorizontal){ - @remVertical: ~`parseInt("@{pxVertical}", 10) / parseInt("@{rem-base}", 10)`; - @remHorizontal: ~`parseInt("@{pxHorizontal}", 10) / parseInt("@{rem-base}", 10)`; - padding: @pxVertical @pxHorizontal; - padding: ~"@{remVertical}rem @{remHorizontal}rem"; -} - -.padding(@pxTop; @pxHorizontal; @pxBottom){ - @remTop: ~`parseInt("@{pxTop}", 10) / parseInt("@{rem-base}", 10)`; - @remHorizontal: ~`parseInt("@{pxHorizontal}", 10) / parseInt("@{rem-base}", 10)`; - @remBottom: ~`parseInt("@{pxBottom}", 10) / parseInt("@{rem-base}", 10)`; - padding: @pxTop @pxHorizontal @pxBottom; - padding: ~"@{remTop}rem @{remHorizontal}rem @{remBottom}rem"; -} - -.padding(@pxTop; @pxRight; @pxBottom; @pxLeft){ - @remTop: ~`parseInt("@{pxTop}", 10) / parseInt("@{rem-base}", 10)`; - @remRight: ~`parseInt("@{pxRight}", 10) / parseInt("@{rem-base}", 10)`; - @remBottom: ~`parseInt("@{pxBottom}", 10) / parseInt("@{rem-base}", 10)`; - @remLeft: ~`parseInt("@{pxLeft}", 10) / parseInt("@{rem-base}", 10)`; - padding: @pxTop @pxRight @pxBottom @pxLeft; - padding: ~"@{remTop}rem @{remRight}rem @{remBottom}rem @{remLeft}rem"; -} - -.padding-top(@pxValue){ - @remValue: ~`parseInt("@{pxValue}", 10) / parseInt("@{rem-base}", 10)`; - padding-top: @pxValue; - padding-top: ~"@{remValue}rem"; -} - -.padding-bottom(@pxValue){ - @remValue: ~`parseInt("@{pxValue}", 10) / parseInt("@{rem-base}", 10)`; - padding-bottom: @pxValue; - padding-bottom: ~"@{remValue}rem"; -} - -.padding-right(@pxValue){ - @remValue: ~`parseInt("@{pxValue}", 10) / parseInt("@{rem-base}", 10)`; - padding-right: @pxValue; - padding-right: ~"@{remValue}rem"; -} - -.padding-left(@pxValue){ - @remValue: ~`parseInt("@{pxValue}", 10) / parseInt("@{rem-base}", 10)`; - padding-left: @pxValue; - padding-left: ~"@{remValue}rem"; -} - -// REM Dimensions -.height(@pxValue){ - @remValue: ~`parseInt("@{pxValue}", 10) / parseInt("@{rem-base}", 10)`; - height: @pxValue; - height: ~"@{remValue}rem"; -} - -.min-height(@pxValue){ - @remValue: ~`parseInt("@{pxValue}", 10) / parseInt("@{rem-base}", 10)`; - min-height: @pxValue; - min-height: ~"@{remValue}rem"; -} - -.max-height(@pxValue){ - @remValue: ~`parseInt("@{pxValue}", 10) / parseInt("@{rem-base}", 10)`; - max-height: @pxValue; - max-height: ~"@{remValue}rem"; -} - -.width(@pxValue){ - @remValue: ~`parseInt("@{pxValue}", 10) / parseInt("@{rem-base}", 10)`; - width: @pxValue; - width: ~"@{remValue}rem"; -} - -.min-width(@pxValue){ - @remValue: ~`parseInt("@{pxValue}", 10) / parseInt("@{rem-base}", 10)`; - min-width: @pxValue; - min-width: ~"@{remValue}rem"; -} - -.max-width(@pxValue){ - @remValue: ~`parseInt("@{pxValue}", 10) / parseInt("@{rem-base}", 10)`; - max-width: @pxValue; - max-width: ~"@{remValue}rem"; -} - -// Generic size mixin - if height not passed in, same as width -.size(@widthValue, @heightValue: @widthValue){ - .height(@heightValue); - .width(@widthValue); -} - -// REM Position -.top(@pxValue) { - @remValue: ~`parseInt("@{pxValue}", 10) / parseInt("@{rem-base}", 10)`; - top: @pxValue; - top: ~"@{remValue}rem"; -} - -.right(@pxValue) { - @remValue: ~`parseInt("@{pxValue}", 10) / parseInt("@{rem-base}", 10)`; - right: @pxValue; - right: ~"@{remValue}rem"; -} - -.bottom(@pxValue) { - @remValue: ~`parseInt("@{pxValue}", 10) / parseInt("@{rem-base}", 10)`; - bottom: @pxValue; - bottom: ~"@{remValue}rem"; -} - -.left(@pxValue) { - @remValue: ~`parseInt("@{pxValue}", 10) / parseInt("@{rem-base}", 10)`; - left: @pxValue; - left: ~"@{remValue}rem"; -} - -// REM Border -.border(@pxValue, @string) { - @remValue: ~`parseInt("@{pxValue}", 10) / parseInt("@{rem-base}", 10)`; - border: @pxValue @string; - border: ~"@{remValue}rem" @string; -} - -.border-top(@pxValue, @string) { - @remValue: ~`parseInt("@{pxValue}", 10) / parseInt("@{rem-base}", 10)`; - border-top: @pxValue @string; - border-top: ~"@{remValue}rem" @string; -} - -.border-right(@pxValue, @string) { - @remValue: ~`parseInt("@{pxValue}", 10) / parseInt("@{rem-base}", 10)`; - border-right: @pxValue @string; - border-right: ~"@{remValue}rem" @string; -} - -.border-bottom(@pxValue, @string) { - @remValue: ~`parseInt("@{pxValue}", 10) / parseInt("@{rem-base}", 10)`; - border-bottom: @pxValue @string; - border-bottom: ~"@{remValue}rem" @string; -} - -.border-left(@pxValue, @string) { - @remValue: ~`parseInt("@{pxValue}", 10) / parseInt("@{rem-base}", 10)`; - border-left: @pxValue @string; - border-left: ~"@{remValue}rem" @string; -} diff --git a/src/assets/styles/less/_mixins/mixins-transforms.less b/src/assets/styles/less/_mixins/mixins-transforms.less deleted file mode 100644 index 1297417..0000000 --- a/src/assets/styles/less/_mixins/mixins-transforms.less +++ /dev/null @@ -1,135 +0,0 @@ -// Backface visibility -// Prevent browsers from flickering when using CSS 3D transforms. -// Default value is `visible`, but can be changed to `hidden -// See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples -.backface-visibility(@visibility){ - -webkit-backface-visibility: @visibility; - -moz-backface-visibility: @visibility; - -ms-backface-visibility: @visibility; - backface-visibility: @visibility; -} -.transform(@string){ - -webkit-transform: @string; - -moz-transform: @string; - -ms-transform: @string; - -o-transform: @string; - transform: @string; -} -.transform-origin(@origin){ - -webkit-transform-origin: @origin; - -moz-transform-origin: @origin; - -ms-transform-origin: @origin; - -o-transform-origin: @origin; - transform-origin: @origin; -} -.rotate(@degrees) { - -webkit-transform: rotate(@degrees); - -moz-transform: rotate(@degrees); - -ms-transform: rotate(@degrees); - -o-transform: rotate(@degrees); - transform: rotate(@degrees); -} -.scale(@ratio) { - -webkit-transform: scale(@ratio); - -moz-transform: scale(@ratio); - -ms-transform: scale(@ratio); - -o-transform: scale(@ratio); - transform: scale(@ratio); -} -.translate(@x, @y) { - -webkit-transform: translate(@x, @y); - -moz-transform: translate(@x, @y); - -ms-transform: translate(@x, @y); - -o-transform: translate(@x, @y); - transform: translate(@x, @y); -} -.translateX(@x) { - -webkit-transform: translateX(@x); - -moz-transform: translateX(@x); - -ms-transform: translateX(@x); - -o-transform: translateX(@x); - transform: translateX(@x); -} -.translateY(@y) { - -webkit-transform: translateY(@y); - -moz-transform: translateY(@y); - -ms-transform: translateY(@y); - -o-transform: translateY(@y); - transform: translateY(@y); -} -.skew(@x, @y) { - -webkit-transform: skew(@x, @y); - -moz-transform: skew(@x, @y); - -ms-transform: skew(@x, @y); - -o-transform: skew(@x, @y); - transform: skew(@x, @y); -} -.skewX(@x) { - -webkit-transform: skewX(@x); - -moz-transform: skewX(@x); - -ms-transform: skewX(@x); - -o-transform: skewX(@x); - transform: skewX(@x); -} -.skewY(@y) { - -webkit-transform: skewY(@y); - -moz-transform: skewY(@y); - -ms-transform: skewY(@y); - -o-transform: skewY(@y); - transform: skewY(@y); -} -.translate3d(@x, @y, @z) { - -webkit-transform: translate3d(@x, @y, @z); - -moz-transform: translate3d(@x, @y, @z); - -ms-transform: translate3d(@x, @y, @z); - -o-transform: translate3d(@x, @y, @z); - transform: translate3d(@x, @y, @z); -} -.animation(@string){ - -webkit-animation: @string; - -moz-animation: @string; - -ms-animation: @string; - -o-animation: @string; - animation: @string; -} -.animation-duration(@string){ - -webkit-animation-duration: @string; - -moz-animation-duration: @string; - -ms-animation-duration: @string; - -o-animation-duration: @string; - animation-duration: @string; -} -.animation-delay(@delay) { - -webkit-animation-delay: @delay; - -moz-animation-delay: @delay; - -ms-animation-delay: @delay; - -o-animation-delay: @delay; - animation-delay: @delay; -} -.animation-fill(@fill) { - -webkit-animation-fill-mode: @fill; - -moz-animation-fill-mode: @fill; - -ms-animation-fill-mode: @fill; - -o-animation-fill-mode: @fill; - animation-fill-mode: @fill; -} -.animation-name(@name) { - -webkit-animation-name: @name; - -moz-animation-name: @name; - -o-animation-name: @name; - animation-name: @name; -} -.perspective(@string){ - -webkit-perspective: @string; - -moz-perspective: @string; - -ms-perspective: @string; - -o-perspective: @string; - perspective: @string; -} -.perspective-origin(@origin){ - -webkit-perspective-origin: @origin; - -moz-perspective-origin: @origin; - -ms-perspective-origin: @origin; - -o-perspective-origin: @origin; - perspective-origin: @origin; -} diff --git a/src/assets/styles/less/_mixins/mixins-transitions.less b/src/assets/styles/less/_mixins/mixins-transitions.less deleted file mode 100644 index 33ddbc9..0000000 --- a/src/assets/styles/less/_mixins/mixins-transitions.less +++ /dev/null @@ -1,31 +0,0 @@ -// Transitions -.transition(@transition) { - -webkit-transition: @transition; - -moz-transition: @transition; - -ms-transition: @transition; - -o-transition: @transition; - transition: @transition; -} - -.transition-duration(@time) { - -webkit-transition-duration: @time; - -moz-transition-duration: @time; - -ms-transition-duration: @time; - -o-transition-duration: @time; - transition-duration: @time; -} - -.transition-property(@string) { - -webkit-transition-property: @string; - -moz-transition-property: @string; - -ms-transition-property: @string; - -o-transition-property: @string; - transition-property: @string; -} -.transition-delay(@delay) { - -webkit-transition-delay: @delay; - -moz-transition-delay: @delay; - -ms-transition-delay: @delay; - -o-transition-delay: @delay; - transition-delay: @delay; -} diff --git a/src/assets/styles/less/_mixins/mixins-type.less b/src/assets/styles/less/_mixins/mixins-type.less deleted file mode 100644 index 50d3c71..0000000 --- a/src/assets/styles/less/_mixins/mixins-type.less +++ /dev/null @@ -1,29 +0,0 @@ -// type mixins - -// px to rem Line Height -.line-height(@pxValue){ - @remValue: ~`parseInt("@{pxValue}", 10) / parseInt("@{rem-base}", 10)`; - line-height: @pxValue; - line-height: ~"@{remValue}rem"; -} - -// px to rem Font Size -.font-size(@pxValue){ - @remValue: ~`parseInt("@{pxValue}", 10) / parseInt("@{rem-base}", 10)`; - font-size: @pxValue; - font-size: ~"@{remValue}rem"; -} - -// pt to rem Line Height -.line-height-pt(@ptValue){ - @remValue: ~`(parseInt("@{ptValue}", 10) * 1.3) / parseInt("@{rem-base}", 10)`; - line-height: @ptValue; - line-height: ~"@{remValue}rem"; -} - -// pt to rem Font Size -.font-size-pt(@ptValue){ - @remValue: ~`(parseInt("@{ptValue}", 10) * 1.3) / parseInt("@{rem-base}", 10)`; - font-size: @ptValue; - font-size: ~"@{remValue}rem"; -} diff --git a/src/assets/styles/less/_mixins/mixins-utilities.less b/src/assets/styles/less/_mixins/mixins-utilities.less index 76b03db..efa51c6 100644 --- a/src/assets/styles/less/_mixins/mixins-utilities.less +++ b/src/assets/styles/less/_mixins/mixins-utilities.less @@ -82,39 +82,6 @@ } } -// Border Radius -.border-radius(@radius) { - -webkit-border-radius: @radius; - -moz-border-radius: @radius; - border-radius: @radius; -} - -// Drop shadows -.box-shadow(@shadow) { - -webkit-box-shadow: @shadow; - -moz-box-shadow: @shadow; - box-shadow: @shadow; -} - - -// Box sizing -.box-sizing(@boxmodel) { - -webkit-box-sizing: @boxmodel; - -moz-box-sizing: @boxmodel; - -ms-box-sizing: @boxmodel; - box-sizing: @boxmodel; -} - -// User select -// For selecting text on the page -.user-select(@select) { - -webkit-user-select: @select; - -moz-user-select: @select; - -ms-user-select: @select; - -o-user-select: @select; - user-select: @select; -} - // Opacity .opacity(@opacity) { opacity: @opacity / 100; @@ -134,3 +101,22 @@ text-decoration: none; } } + +// custom underlines +.underline(@thickness: 1px, @color: #000, @opacity: 100%, @position: 99%) { + text-decoration: none; + .background-image( linear-gradient(to bottom, fade(@color,0%) 50%, fade(@color,@opacity) 50%) ); + background-repeat: repeat-x; + background-size: @thickness*2 @thickness*2; + background-position: 0 @position; +} + +.underline-reset() { + background: none; +} + +// Generic block size mixin +.size(@width, @height: @width){ + height: @height; + width: @width; +} diff --git a/src/assets/styles/less/_order.less b/src/assets/styles/less/_order.less index eaf93b2..3ab7fd4 100644 --- a/src/assets/styles/less/_order.less +++ b/src/assets/styles/less/_order.less @@ -8,6 +8,7 @@ @import "global"; @import "layout"; @import "type"; +@import "lists"; @import "forms"; @import "buttons"; @@ -21,3 +22,4 @@ // Monitor media queries @import "_monitor-mq"; + diff --git a/src/assets/styles/less/_variables.less b/src/assets/styles/less/_variables.less index df5ff9f..ffa18ab 100644 --- a/src/assets/styles/less/_variables.less +++ b/src/assets/styles/less/_variables.less @@ -31,10 +31,10 @@ @font-family-base: @font-family-sans-serif; // Font Sizing -@font-size-base: 16px; // use .font-size(pxValue) to define font sizes +@font-size-base: 16px; @font-size-small: 14px; -@line-height-base: @vertical-rhythm*4; // 24px -@line-height-small: @vertical-rhythm*3; // 18px +@line-height-base: @vr*4; // 24px +@line-height-small: @vr*3; // 18px @font-weight-bold: 400; // 700 when not using @font-face @font-weight-medium: 400; // 600 when not using @font-face @@ -45,24 +45,31 @@ @max-width: 1180px; // overall max width @font-size-html: 100%; @rem-base: 16px; // 100% browser default font size -@vertical-rhythm: 6px; // use @vertical-rhythm*X to keep +@vertical-rhythm: 6px; // use @vr*X to maintain vertical consistency +@vr: @vertical-rhythm; // Alias // Grid system @grid-columns: 24; @grid-column-width: 30px; +@gcw: @grid-column-width; // Alias @grid-gutter-width: 20px; +@ggw: @grid-gutter-width; // Alias @grid-total-width: 100%; -@grid-gridsystem-width: (@grid-column-width*@grid-columns) + (@grid-gutter-width*@grid-columns) * 1px; +@grid-gridsystem-width: (@gcw*@grid-columns) + (@ggw*@grid-columns) * 1px; @grid-correction: 0.5 / @grid-total-width * 100 * 1%; // IE7 See http://tylertate.com/blog/2012/01/05/subpixel-rounding.html +// Custom smallscreen sizes +@smallscreen-grid-gutter-width: 15px; +@ggw-smallscreen: @smallscreen-grid-gutter-width; + // Region A -@region-a-width: (@grid-column-width*24) + (@grid-gutter-width*23); -@region-a-inner-width: @region-a-width + @grid-gutter-width; +@region-a-width: (@gcw*24) + (@ggw*23); +@region-a-inner-width: @region-a-width + @ggw; // Region B -@region-b-width: (@grid-column-width*16) + (@grid-gutter-width*15); -@region-b-inner-width: @region-b-width + @grid-gutter-width; +@region-b-width: (@gcw*16) + (@ggw*15); +@region-b-inner-width: @region-b-width + @ggw; // Region C -@region-c-width: (@grid-column-width*8) + (@grid-gutter-width*7); -@region-c-inner-width: @region-c-width + @grid-gutter-width; +@region-c-width: (@gcw*8) + (@ggw*7); +@region-c-inner-width: @region-c-width + @ggw; // Media Query Break Points (px & em) @break-point-a-px: 320px; diff --git a/src/assets/styles/less/buttons.less b/src/assets/styles/less/buttons.less index 5638522..00edf52 100644 --- a/src/assets/styles/less/buttons.less +++ b/src/assets/styles/less/buttons.less @@ -1,137 +1,137 @@ // buttons.less @btn-border-width: 2px; -@btn-padding-y-small: @vertical-rhythm; +@btn-padding-y-small: @vr; @btn-padding-x-small: 15px; -@btn-line-height-small: @vertical-rhythm*4 - @btn-border-width*2; +@btn-line-height-small: @vr*4 - @btn-border-width*2; @btn-total-height-small: @btn-padding-y-small*2 + @btn-line-height-small; -@btn-padding-y-default: @vertical-rhythm*2; +@btn-padding-y-default: @vr*2; @btn-padding-x-default: 20px; -@btn-line-height-default: @vertical-rhythm*4 - @btn-border-width*2; +@btn-line-height-default: @vr*4 - @btn-border-width*2; @btn-total-height-default: @btn-padding-y-default*2 + @btn-line-height-default; -@btn-padding-y-large: @vertical-rhythm*2; +@btn-padding-y-large: @vr*2; @btn-padding-x-large: 30px; -@btn-line-height-large: @vertical-rhythm*7 - @btn-border-width*2; +@btn-line-height-large: @vr*7 - @btn-border-width*2; @btn-total-height-large: @btn-padding-y-large*2 + @btn-line-height-large; // buttons at smallscreen are reduced by one size (to a minimum of *-small) // e.g .btn below 768px uses *-small units, .btn-large uses *-default... but .btn-small still uses *-small input::-moz-focus-inner { - border: 0; - padding: 0; + border: 0; + padding: 0; } button::-moz-focus-inner { - border: 0; - padding: 0; + border: 0; + padding: 0; } .btn { - .underline-reset(); - display: inline-block; - margin-bottom: 0; // For input.btn - font-family: @font-family-base; - font-weight: @font-weight-bold; - //min-height: @btn-total-height-default; - text-align: center; - vertical-align: top; - cursor: pointer; - border: @btn-border-width solid @brand-color-a; - white-space: nowrap; - text-decoration: none; - text-transform: uppercase; - border-radius: 0; - box-shadow: none; - color: #fff; - background-image: none; - background-color: @brand-color-a; - // get rid of faux bolding - -webkit-font-smoothing: antialiased; - // height and padding - padding: @btn-padding-y-small @btn-padding-x-small; - font-size: 12px; - line-height: @btn-line-height-small; - min-height: @btn-total-height-small; - - @media (min-width: @break-point-d) { - padding: @btn-padding-y-default @btn-padding-x-default; - font-size: 16px; - line-height: @btn-line-height-default; - min-height: @btn-total-height-default; - } - - &:hover, - &:focus { - border-color: @brand-color-a; - box-shadow: none; - } - - &:active, - &.active { - outline: 0; - box-shadow: none; - } - - &.disabled, - &[disabled], - fieldset[disabled] & { - cursor: default; - pointer-events: none; // Future-proof disabling of clicks - .opacity(65); - box-shadow: none; - } + .underline-reset(); + display: inline-block; + margin-bottom: 0; // For input.btn + font-family: @font-family-base; + font-weight: @font-weight-bold; + //min-height: @btn-total-height-default; + text-align: center; + vertical-align: top; + cursor: pointer; + border: @btn-border-width solid @brand-color-a; + white-space: nowrap; + text-decoration: none; + text-transform: uppercase; + border-radius: 0; + box-shadow: none; + color: #fff; + background-image: none; + background-color: @brand-color-a; + // get rid of faux bolding + -webkit-font-smoothing: antialiased; + // height and padding + padding: @btn-padding-y-small @btn-padding-x-small; + font-size: 12px; + line-height: @btn-line-height-small; + min-height: @btn-total-height-small; + + @media (min-width: @break-point-d) { + padding: @btn-padding-y-default @btn-padding-x-default; + font-size: 16px; + line-height: @btn-line-height-default; + min-height: @btn-total-height-default; + } + + &:hover, + &:focus { + border-color: @brand-color-a; + box-shadow: none; + } + + &:active, + &.active { + outline: 0; + box-shadow: none; + } + + &.disabled, + &[disabled], + fieldset[disabled] & { + cursor: default; + pointer-events: none; // Future-proof disabling of clicks + .opacity(65); + box-shadow: none; + } } .btn-small { - padding: @btn-padding-y-small @btn-padding-x-small; - font-size: 12px; - line-height: @btn-line-height-small; - min-height: @btn-total-height-small; - - @media (min-width: @break-point-d) { - padding: @btn-padding-y-small @btn-padding-x-small; - font-size: 12px; - line-height: @btn-line-height-small; - min-height: @btn-total-height-small; - } + padding: @btn-padding-y-small @btn-padding-x-small; + font-size: 12px; + line-height: @btn-line-height-small; + min-height: @btn-total-height-small; + + @media (min-width: @break-point-d) { + padding: @btn-padding-y-small @btn-padding-x-small; + font-size: 12px; + line-height: @btn-line-height-small; + min-height: @btn-total-height-small; + } } .btn-large { - padding: @btn-padding-y-default @btn-padding-x-default; - font-size: 16px; - line-height: @btn-line-height-default; - min-height: @btn-total-height-default; - - @media (min-width: @break-point-d) { - padding: @btn-padding-y-large @btn-padding-x-large; - line-height: @btn-line-height-large; - min-height: @btn-total-height-large; - font-size: 18px; - } + padding: @btn-padding-y-default @btn-padding-x-default; + font-size: 16px; + line-height: @btn-line-height-default; + min-height: @btn-total-height-default; + + @media (min-width: @break-point-d) { + padding: @btn-padding-y-large @btn-padding-x-large; + line-height: @btn-line-height-large; + min-height: @btn-total-height-large; + font-size: 18px; + } } .btn-style-a { - background-color: @brand-color-b; - border-color: @brand-color-b; - color: #fff; - - &:hover, - &:focus { - border-color: @brand-color-b; - } + background-color: @brand-color-b; + border-color: @brand-color-b; + color: #fff; + + &:hover, + &:focus { + border-color: @brand-color-b; + } } .btn-style-b { - background-color: transparent; - border-color: @brand-color-a; - color: @brand-color-a; - - &:hover, - &:focus { - border-color: @brand-color-b; - //color: @brand-color-b; - } + background-color: transparent; + border-color: @brand-color-a; + color: @brand-color-a; + + &:hover, + &:focus { + border-color: @brand-color-b; + //color: @brand-color-b; + } } diff --git a/src/assets/styles/less/global.less b/src/assets/styles/less/global.less index b955369..a395297 100644 --- a/src/assets/styles/less/global.less +++ b/src/assets/styles/less/global.less @@ -3,7 +3,7 @@ * { -webkit-tap-highlight-color: transparent; word-wrap: break-word; - .box-sizing(border-box); + box-sizing: border-box; } :focus { @@ -27,10 +27,10 @@ html { } body { - .line-height(@line-height-base); - font-family: @font-family-base; color: @color-text; + font-family: @font-family-base; font-weight: @font-weight-light; + line-height: @line-height-base; } img { diff --git a/src/assets/styles/less/layout.less b/src/assets/styles/less/layout.less index 8110f7e..4e0fd1e 100644 --- a/src/assets/styles/less/layout.less +++ b/src/assets/styles/less/layout.less @@ -9,10 +9,10 @@ } .layout { - position: relative; .clearfix(); - .margin(0, @grid-gutter-width); - .max-width(@max-width); + position: relative; + margin: 0 @ggw; + max-width: @max-width; @media (min-width: @break-point-f) { margin: 0 auto; @@ -47,7 +47,7 @@ float: left; width: 100%; max-width: 100%; - .margin-bottom(@vertical-rhythm*3); + margin-bottom: @vr*3; .rtl & { float: right; @@ -94,21 +94,21 @@ .block-size-a { @media (min-width: @break-point-d) { - .fluid-width((@grid-column-width*24) + (@grid-gutter-width*23), @region-inner-width); + .fluid-width((@gcw*24) + (@ggw*23), @region-inner-width); } } .block-size-b { @media (min-width: @break-point-d) { - .fluid-width((@grid-column-width*16) + (@grid-gutter-width*15), @region-inner-width); + .fluid-width((@gcw*16) + (@ggw*15), @region-inner-width); } } .block-size-c { @media (min-width: @break-point-d) { - .fluid-width((@grid-column-width*8) + (@grid-gutter-width*7), @region-inner-width); + .fluid-width((@gcw*8) + (@ggw*7), @region-inner-width); } } } @@ -127,16 +127,16 @@ } .block { - .fluid-margin-right(@grid-gutter-width, @region-a-inner-width); + .fluid-margin-right(@ggw, @region-a-inner-width); .rtl & { margin-right: 0; - .fluid-margin-left(@grid-gutter-width, @region-a-inner-width); + .fluid-margin-left(@ggw, @region-a-inner-width); } } .gutter-sizer { - .fluid-width(@grid-gutter-width, @region-a-inner-width); + .fluid-width(@ggw, @region-a-inner-width); } } @@ -157,16 +157,16 @@ } .block { - .fluid-margin-right(@grid-gutter-width, @region-b-inner-width); + .fluid-margin-right(@ggw, @region-b-inner-width); .rtl & { margin-right: 0; - .fluid-margin-left(@grid-gutter-width, @region-b-inner-width); + .fluid-margin-left(@ggw, @region-b-inner-width); } } .gutter-sizer { - .fluid-width(@grid-gutter-width, @region-b-inner-width); + .fluid-width(@ggw, @region-b-inner-width); } } @@ -188,16 +188,16 @@ } .block { - .fluid-margin-right(@grid-gutter-width, @region-c-inner-width); + .fluid-margin-right(@ggw, @region-c-inner-width); .rtl & { margin-right: 0; - .fluid-margin-left(@grid-gutter-width, @region-c-inner-width); + .fluid-margin-left(@ggw, @region-c-inner-width); } } .gutter-sizer { - .fluid-width(@grid-gutter-width, @region-c-inner-width); + .fluid-width(@ggw, @region-c-inner-width); } } @@ -208,7 +208,7 @@ .visible-grid { .block { - color: #fff; - background: #000; + background: @brand-color-a; + color: #FFF; } } diff --git a/src/assets/styles/less/_mixins/mixins-lists.less b/src/assets/styles/less/lists.less similarity index 70% rename from src/assets/styles/less/_mixins/mixins-lists.less rename to src/assets/styles/less/lists.less index 83f6e7d..37dad0f 100644 --- a/src/assets/styles/less/_mixins/mixins-lists.less +++ b/src/assets/styles/less/lists.less @@ -1,12 +1,12 @@ -// mixins-lists.less +// lists.less -.list-unstyled() { +.list-unstyled { list-style: none; margin: 0; padding: 0; } -.list-unstyled-full() { +.list-unstyled-full { list-style: none; margin: 0; padding: 0; diff --git a/src/assets/styles/less/type.less b/src/assets/styles/less/type.less index 6352577..0f1b819 100644 --- a/src/assets/styles/less/type.less +++ b/src/assets/styles/less/type.less @@ -2,48 +2,60 @@ // Paragraph p { - .margin-bottom(@vertical-rhythm*3); + margin-bottom: @vr*3; } // Headers -h1, h2, h3, h4, h5, h6 { +h1, +h2, +h3, +h4, +h5, +h6 { a { text-decoration: none; } } -h1, .giga { - .font-size(60px); - .line-height(@vertical-rhythm*8); - .margin-bottom(@vertical-rhythm*2); +h1, +.giga { + font-size: 60px; + line-height: @vr*8; + margin-bottom: @vr*2; } -h2, .mega { - .font-size(40px); - .line-height(@vertical-rhythm*5); - .margin-bottom(@vertical-rhythm*2); +h2, +.mega { + font-size: 40px; + line-height: @vr*5; + margin-bottom: @vr*2; } -h3, .alpha { - .font-size(20px); - .line-height(@vertical-rhythm*4); - .margin-bottom(@vertical-rhythm); +h3, +.alpha { + font-size: 20px; + line-height: @vr*4; + margin-bottom: @vr; } -h4, .beta { - .font-size(18px); - .line-height(@vertical-rhythm*3); - .margin-bottom(@vertical-rhythm*2); +h4, +.beta { + font-size: 18px; + line-height: @vr*3; + margin-bottom: @vr*2; } -h5, .gamma { - .font-size(16px); - .line-height(@vertical-rhythm*3); - .margin-bottom(@vertical-rhythm*2); +h5, +.gamma { + font-size: @font-size-base; + line-height: @vr*3; + margin-bottom: @vr*2; } -h6, .delta {} +h6, +.delta {} .epsilon {} + .zeta {} diff --git a/src/assets/styles/less/utilities.less b/src/assets/styles/less/utilities.less index 4787443..c197eb1 100644 --- a/src/assets/styles/less/utilities.less +++ b/src/assets/styles/less/utilities.less @@ -1,4 +1,4 @@ -/* utilities.less - non-semantic helper classes */ +// utilities.less .right { float: right; @@ -13,60 +13,70 @@ } .ir { - display: block; - border: 0; - text-indent: -999em; - overflow: hidden; - background-color: transparent; - background-repeat: no-repeat; - text-align: left; - direction: ltr; - - br { display: none } + display: block; + border: 0; + text-indent: -999em; + overflow: hidden; + background-color: transparent; + background-repeat: no-repeat; + text-align: left; + direction: ltr; + + br { + display: none + } } -.hide { display: none } +.hide { + display: none +} -.show { display: block } +.show { + display: block +} .hidden { - display: none !important; - visibility: hidden; + display: none !important; + visibility: hidden; } .visually-hidden { - border: 0; - clip: rect(0 0 0 0); - height: 1px !important; - margin: -1px !important; - overflow: hidden; - padding: 0; - position: absolute !important; - width: 1px !important; - - &.focusable:active, + border: 0; + clip: rect(0 0 0 0); + height: 1px !important; + margin: -1px !important; + overflow: hidden; + padding: 0; + position: absolute !important; + width: 1px !important; + + &.focusable:active, &.focusable:focus { - clip: auto; - height: auto; - margin: 0; - overflow: visible; - position: static; - width: auto; + clip: auto; + height: auto; + margin: 0; + overflow: visible; + position: static; + width: auto; } } -.invisible { visibility: hidden } +.invisible { + visibility: hidden +} .clearfix { zoom: 1; &:before, &:after { - content: ""; - display: table; - } + content: ''; + display: table; + } - &:after { clear: both } + &:after { + clear: both + } } .clearboth { @@ -74,13 +84,13 @@ } .clearfloats { - width: 100%; - height: 0; - overflow: hidden; - clear: both; + width: 100%; + height: 0; + overflow: hidden; + clear: both; } .no-transition, .no-transition * { - .transition(none)!important; + transition: none!important; }