From bc61dac4c5aee29c3e2a366deaa569a4b62e28cd Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sun, 4 Jun 2017 18:30:37 +1000 Subject: Tidy up, fixing destroy --- demo/src/less/components/buttons.less | 262 ++++++++++++++++------------------ 1 file changed, 127 insertions(+), 135 deletions(-) (limited to 'demo/src/less/components/buttons.less') diff --git a/demo/src/less/components/buttons.less b/demo/src/less/components/buttons.less index c99a0836..23cc3e7f 100644 --- a/demo/src/less/components/buttons.less +++ b/demo/src/less/components/buttons.less @@ -3,170 +3,162 @@ // ========================================================================== nav { - ul { - list-style: none; - margin: 0; - padding: 0; - font-size: 0; - } - li { - display: inline-block; - margin-top: (@padding-base / 2); - .font-size(); - white-space: nowrap; - } - li + li { - margin-left: @padding-base; - } + ul { + list-style: none; + margin: 0; + padding: 0; + font-size: 0; + } + li { + display: inline-block; + margin-top: (@padding-base / 2); + .font-size(); + white-space: nowrap; + } + li + li { + margin-left: @padding-base; + } } // Tabs .btn__bar { - position: relative; - margin: 0 auto @padding-base; - max-width: @example-width-video; - white-space: nowrap; - - &::before { - content: ""; - position: absolute; - top: 50%; - left: 0; - right: 0; - height: 1px; - background: @gray-lighter; - } - - ul { - position: relative; - z-index: 1; - display: inline-block; - user-select: none; - } - li { - margin: 0; - - &:first-child .btn { - border-radius: 4px 0 0 4px; - } - &:last-child .btn { - border-radius: 0 4px 4px 0; - } - & + li .btn { - margin-left: -1px; - } - - &.active .btn { - &:extend(.btn--primary); - box-shadow: inset 0 1px 1px rgba(0,0,0, .2); - position: relative; - z-index: 1; - - .icon { - color: inherit; - } - } - &.active + li .btn:hover { - z-index: 0; - } - } - .btn { - position: relative; - display: block; - border-radius: 0; - - &:hover, - &:focus { - z-index: 1; - } - } - - @media (min-width: 560px) { - margin-bottom: (@padding-base * 2); - } + position: relative; + margin: 0 auto @padding-base; + white-space: nowrap; + + &::before { + content: ""; + position: absolute; + top: 50%; + left: 0; + right: 0; + height: 1px; + background: @off-white; + } + + ul { + position: relative; + z-index: 1; + display: inline-block; + } + li { + margin: 0; + + &:first-child .btn { + border-radius: 4px 0 0 4px; + } + &:last-child .btn { + border-radius: 0 4px 4px 0; + } + & + li .btn { + margin-left: -1px; + } + + &.active .btn { + &:extend(.btn--primary); + position: relative; + z-index: 1; + + .icon { + color: inherit; + } + } + &.active + li .btn:hover { + z-index: 0; + } + } + .btn { + position: relative; + display: block; + border-radius: 0; + + &:hover, + &:focus { + z-index: 1; + } + } + + @media (min-width: 560px) { + margin-bottom: (@padding-base * 2); + } } // Shared .btn, .btn__count { - display: inline-block; - vertical-align: middle; - border-radius: @border-radius-base; - user-select: none; - font-weight: @font-weight-bold; + display: inline-block; + vertical-align: middle; + border-radius: @border-radius-base; + user-select: none; + font-weight: @font-weight-bold; } // Buttons .btn { - padding: (@padding-base / 2) ((@padding-base / 2) + 2); - background: linear-gradient(lighten(@off-white, 2%), darken(@off-white, 3%)); - border: 1px solid @gray-light; - box-shadow: 0 1px 1px rgba(0,0,0, .05); - text-shadow: 0 1px 1px #fff; - color: @gray; - transition: background .1s ease, color .1s ease; - .font-size(@font-size-small); - - &:hover, - &:focus { - border-color: darken(@gray-light, 8%); - color: @gray; - outline: 0; - } + padding: (@padding-base / 2) ((@padding-base / 2) + 2); + background: #fff; + border: 1px solid @gray-lighter; + color: @gray; + transition: all .2s ease; + .font-size(@font-size-small); + + &:hover, + &:focus { + border-color: @gray-light; + } } // Sizes .btn--large { - padding: (@padding-base / 2) @padding-base; - .font-size(); + padding: (@padding-base / 2) @padding-base; + .font-size(); } // Styles .btn--primary { - background-image: linear-gradient(@link-color, darken(@link-color, 5%)); - background-color: @link-color; - border-color: darken(@link-color, 10%); - box-shadow: 0 1px 1px rgba(0,0,0, .15); - text-shadow: 0 1px 1px rgba(0,0,0, .1); - color: #fff; - - &:hover, - &:focus { - color: #fff; - border-color: darken(@link-color, 20%); - } + @border-color: darken(@link-color, 5%); + background-image: linear-gradient(@link-color, @border-color); + background-color: @link-color; + border-color: @border-color; + color: #fff; + + &:hover, + &:focus { + color: #fff; + border-color: darken(@border-color, 5%); + } } .btn--youtube .icon { - color: @color-youtube; + color: @color-youtube; } .btn--vimeo .icon { - color: @color-vimeo; + color: @color-vimeo; } .btn--twitter .icon { - color: @color-twitter; + color: @color-twitter; } // Count bubble .btn__count { - position: relative; - margin-left: (@padding-base / 2); - padding: (@padding-base / 2) (@padding-base * .75); - background: #fff; - border: 1px solid @gray-light; - - &::before { - content: ""; - position: absolute; - display: block; - width: @arrow-size; - height: @arrow-size; - left: 1px; - top: 50%; - margin-top: -(@arrow-size / 2); - - background: inherit; - border: inherit; - border-width: 1px 0 0 1px; - transform: rotate(-45deg) translate(-50%, -50%); - } + position: relative; + margin-left: (@padding-base / 2); + padding: (@padding-base / 2) (@padding-base * .75); + background: #fff; + border: 1px solid @gray-lighter; + + &::before { + content: ""; + position: absolute; + display: block; + width: @arrow-size; + height: @arrow-size; + left: 1px; + top: 50%; + margin-top: -(@arrow-size / 2); + + background: inherit; + border: inherit; + border-width: 1px 0 0 1px; + transform: rotate(-45deg) translate(-50%, -50%); + } } -- cgit v1.2.3 From 40b4f8e8404c3f191ca4d4f40ae206c9dc72c4e1 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sun, 4 Jun 2017 22:39:21 +1000 Subject: Tweaks --- demo/src/less/components/buttons.less | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) (limited to 'demo/src/less/components/buttons.less') diff --git a/demo/src/less/components/buttons.less b/demo/src/less/components/buttons.less index 23cc3e7f..d1538967 100644 --- a/demo/src/less/components/buttons.less +++ b/demo/src/less/components/buttons.less @@ -116,16 +116,14 @@ nav { // Styles .btn--primary { - @border-color: darken(@link-color, 5%); - background-image: linear-gradient(@link-color, @border-color); background-color: @link-color; - border-color: @border-color; + border-color: @link-color; color: #fff; &:hover, &:focus { color: #fff; - border-color: darken(@border-color, 5%); + border-color: darken(@link-color, 5%); } } .btn--youtube .icon { -- cgit v1.2.3 From 0148c76c30d87dc6df79a8ef7264d0efd29988a3 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Wed, 16 Aug 2017 00:36:23 +1000 Subject: ESLint, comments, quality and speed menus --- demo/src/less/components/buttons.less | 260 ++++++++++++++++++---------------- 1 file changed, 135 insertions(+), 125 deletions(-) (limited to 'demo/src/less/components/buttons.less') diff --git a/demo/src/less/components/buttons.less b/demo/src/less/components/buttons.less index d1538967..c99a0836 100644 --- a/demo/src/less/components/buttons.less +++ b/demo/src/less/components/buttons.less @@ -3,160 +3,170 @@ // ========================================================================== nav { - ul { - list-style: none; - margin: 0; - padding: 0; - font-size: 0; - } - li { - display: inline-block; - margin-top: (@padding-base / 2); - .font-size(); - white-space: nowrap; - } - li + li { - margin-left: @padding-base; - } + ul { + list-style: none; + margin: 0; + padding: 0; + font-size: 0; + } + li { + display: inline-block; + margin-top: (@padding-base / 2); + .font-size(); + white-space: nowrap; + } + li + li { + margin-left: @padding-base; + } } // Tabs .btn__bar { - position: relative; - margin: 0 auto @padding-base; - white-space: nowrap; - - &::before { - content: ""; - position: absolute; - top: 50%; - left: 0; - right: 0; - height: 1px; - background: @off-white; - } - - ul { - position: relative; - z-index: 1; - display: inline-block; - } - li { - margin: 0; - - &:first-child .btn { - border-radius: 4px 0 0 4px; - } - &:last-child .btn { - border-radius: 0 4px 4px 0; - } - & + li .btn { - margin-left: -1px; - } - - &.active .btn { - &:extend(.btn--primary); - position: relative; - z-index: 1; - - .icon { - color: inherit; - } - } - &.active + li .btn:hover { - z-index: 0; - } - } - .btn { - position: relative; - display: block; - border-radius: 0; - - &:hover, - &:focus { - z-index: 1; - } - } - - @media (min-width: 560px) { - margin-bottom: (@padding-base * 2); - } + position: relative; + margin: 0 auto @padding-base; + max-width: @example-width-video; + white-space: nowrap; + + &::before { + content: ""; + position: absolute; + top: 50%; + left: 0; + right: 0; + height: 1px; + background: @gray-lighter; + } + + ul { + position: relative; + z-index: 1; + display: inline-block; + user-select: none; + } + li { + margin: 0; + + &:first-child .btn { + border-radius: 4px 0 0 4px; + } + &:last-child .btn { + border-radius: 0 4px 4px 0; + } + & + li .btn { + margin-left: -1px; + } + + &.active .btn { + &:extend(.btn--primary); + box-shadow: inset 0 1px 1px rgba(0,0,0, .2); + position: relative; + z-index: 1; + + .icon { + color: inherit; + } + } + &.active + li .btn:hover { + z-index: 0; + } + } + .btn { + position: relative; + display: block; + border-radius: 0; + + &:hover, + &:focus { + z-index: 1; + } + } + + @media (min-width: 560px) { + margin-bottom: (@padding-base * 2); + } } // Shared .btn, .btn__count { - display: inline-block; - vertical-align: middle; - border-radius: @border-radius-base; - user-select: none; - font-weight: @font-weight-bold; + display: inline-block; + vertical-align: middle; + border-radius: @border-radius-base; + user-select: none; + font-weight: @font-weight-bold; } // Buttons .btn { - padding: (@padding-base / 2) ((@padding-base / 2) + 2); - background: #fff; - border: 1px solid @gray-lighter; - color: @gray; - transition: all .2s ease; - .font-size(@font-size-small); - - &:hover, - &:focus { - border-color: @gray-light; - } + padding: (@padding-base / 2) ((@padding-base / 2) + 2); + background: linear-gradient(lighten(@off-white, 2%), darken(@off-white, 3%)); + border: 1px solid @gray-light; + box-shadow: 0 1px 1px rgba(0,0,0, .05); + text-shadow: 0 1px 1px #fff; + color: @gray; + transition: background .1s ease, color .1s ease; + .font-size(@font-size-small); + + &:hover, + &:focus { + border-color: darken(@gray-light, 8%); + color: @gray; + outline: 0; + } } // Sizes .btn--large { - padding: (@padding-base / 2) @padding-base; - .font-size(); + padding: (@padding-base / 2) @padding-base; + .font-size(); } // Styles .btn--primary { - background-color: @link-color; - border-color: @link-color; - color: #fff; - - &:hover, - &:focus { - color: #fff; - border-color: darken(@link-color, 5%); - } + background-image: linear-gradient(@link-color, darken(@link-color, 5%)); + background-color: @link-color; + border-color: darken(@link-color, 10%); + box-shadow: 0 1px 1px rgba(0,0,0, .15); + text-shadow: 0 1px 1px rgba(0,0,0, .1); + color: #fff; + + &:hover, + &:focus { + color: #fff; + border-color: darken(@link-color, 20%); + } } .btn--youtube .icon { - color: @color-youtube; + color: @color-youtube; } .btn--vimeo .icon { - color: @color-vimeo; + color: @color-vimeo; } .btn--twitter .icon { - color: @color-twitter; + color: @color-twitter; } // Count bubble .btn__count { - position: relative; - margin-left: (@padding-base / 2); - padding: (@padding-base / 2) (@padding-base * .75); - background: #fff; - border: 1px solid @gray-lighter; - - &::before { - content: ""; - position: absolute; - display: block; - width: @arrow-size; - height: @arrow-size; - left: 1px; - top: 50%; - margin-top: -(@arrow-size / 2); - - background: inherit; - border: inherit; - border-width: 1px 0 0 1px; - transform: rotate(-45deg) translate(-50%, -50%); - } + position: relative; + margin-left: (@padding-base / 2); + padding: (@padding-base / 2) (@padding-base * .75); + background: #fff; + border: 1px solid @gray-light; + + &::before { + content: ""; + position: absolute; + display: block; + width: @arrow-size; + height: @arrow-size; + left: 1px; + top: 50%; + margin-top: -(@arrow-size / 2); + + background: inherit; + border: inherit; + border-width: 1px 0 0 1px; + transform: rotate(-45deg) translate(-50%, -50%); + } } -- cgit v1.2.3 From 378aa159b8d91b2d9950575141a6ee67e7db350c Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Wed, 25 Oct 2017 23:59:53 +1100 Subject: Docs/demo refresh --- demo/src/less/components/buttons.less | 214 +++++++++------------------------- 1 file changed, 54 insertions(+), 160 deletions(-) (limited to 'demo/src/less/components/buttons.less') diff --git a/demo/src/less/components/buttons.less b/demo/src/less/components/buttons.less index c99a0836..ed605086 100644 --- a/demo/src/less/components/buttons.less +++ b/demo/src/less/components/buttons.less @@ -2,171 +2,65 @@ // Buttons // ========================================================================== -nav { - ul { - list-style: none; - margin: 0; - padding: 0; - font-size: 0; - } - li { - display: inline-block; - margin-top: (@padding-base / 2); - .font-size(); - white-space: nowrap; - } - li + li { - margin-left: @padding-base; - } -} - -// Tabs -.btn__bar { - position: relative; - margin: 0 auto @padding-base; - max-width: @example-width-video; - white-space: nowrap; - - &::before { - content: ""; - position: absolute; - top: 50%; - left: 0; - right: 0; - height: 1px; - background: @gray-lighter; - } - - ul { - position: relative; - z-index: 1; - display: inline-block; - user-select: none; - } - li { - margin: 0; - - &:first-child .btn { - border-radius: 4px 0 0 4px; - } - &:last-child .btn { - border-radius: 0 4px 4px 0; - } - & + li .btn { - margin-left: -1px; - } - - &.active .btn { - &:extend(.btn--primary); - box-shadow: inset 0 1px 1px rgba(0,0,0, .2); - position: relative; - z-index: 1; - - .icon { - color: inherit; - } - } - &.active + li .btn:hover { - z-index: 0; - } - } - .btn { - position: relative; - display: block; - border-radius: 0; - - &:hover, - &:focus { - z-index: 1; - } - } - - @media (min-width: 560px) { - margin-bottom: (@padding-base * 2); - } -} - // Shared -.btn, -.btn__count { - display: inline-block; - vertical-align: middle; - border-radius: @border-radius-base; - user-select: none; - font-weight: @font-weight-bold; +.button, +.button__count { + position: relative; + display: inline-flex; + vertical-align: middle; + align-items: center; + padding: (@spacing-base * 0.75); + + border-radius: @border-radius-base; + box-shadow: 0 1px 1px fade(#000, 10%); + background: #fff; + border: 0; + + color: @gray; + user-select: none; + font-weight: @font-weight-bold; + text-shadow: none; } // Buttons -.btn { - padding: (@padding-base / 2) ((@padding-base / 2) + 2); - background: linear-gradient(lighten(@off-white, 2%), darken(@off-white, 3%)); - border: 1px solid @gray-light; - box-shadow: 0 1px 1px rgba(0,0,0, .05); - text-shadow: 0 1px 1px #fff; - color: @gray; - transition: background .1s ease, color .1s ease; - .font-size(@font-size-small); - - &:hover, - &:focus { - border-color: darken(@gray-light, 8%); - color: @gray; - outline: 0; - } -} - -// Sizes -.btn--large { - padding: (@padding-base / 2) @padding-base; - .font-size(); -} - -// Styles -.btn--primary { - background-image: linear-gradient(@link-color, darken(@link-color, 5%)); - background-color: @link-color; - border-color: darken(@link-color, 10%); - box-shadow: 0 1px 1px rgba(0,0,0, .15); - text-shadow: 0 1px 1px rgba(0,0,0, .1); - color: #fff; - - &:hover, - &:focus { - color: #fff; - border-color: darken(@link-color, 20%); - } -} -.btn--youtube .icon { - color: @color-youtube; -} -.btn--vimeo .icon { - color: @color-vimeo; -} -.btn--twitter .icon { - color: @color-twitter; +.button { + padding-left: @spacing-base; + padding-right: @spacing-base; + transition: all 0.2s ease; + + &:hover, + &:focus { + color: @gray-dark; + outline: 0; + + &::after { + display: none; + } + } + + &.tab-focus { + .tab-focus(); + } } // Count bubble -.btn__count { - position: relative; - margin-left: (@padding-base / 2); - padding: (@padding-base / 2) (@padding-base * .75); - background: #fff; - border: 1px solid @gray-light; - - &::before { - content: ""; - position: absolute; - display: block; - width: @arrow-size; - height: @arrow-size; - left: 1px; - top: 50%; - margin-top: -(@arrow-size / 2); - - background: inherit; - border: inherit; - border-width: 1px 0 0 1px; - transform: rotate(-45deg) translate(-50%, -50%); - } +.button__count { + margin-left: (@spacing-base / 2); + animation: fadein 0.2s ease; + + &::before { + content: ''; + position: absolute; + display: block; + width: @arrow-size; + height: @arrow-size; + left: 1px; + top: 50%; + margin-top: -(@arrow-size / 2); + + background: inherit; + border: inherit; + border-width: 1px 0 0 1px; + transform: rotate(-45deg) translate(-50%, -50%); + } } -- cgit v1.2.3 From dd9d5c8898bd5e58c6faec13d6213b8fe079446a Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Fri, 27 Oct 2017 15:06:16 +1100 Subject: Linting and minor changes --- demo/src/less/components/buttons.less | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) (limited to 'demo/src/less/components/buttons.less') diff --git a/demo/src/less/components/buttons.less b/demo/src/less/components/buttons.less index ed605086..32b2570d 100644 --- a/demo/src/less/components/buttons.less +++ b/demo/src/less/components/buttons.less @@ -51,16 +51,14 @@ &::before { content: ''; position: absolute; - display: block; - width: @arrow-size; - height: @arrow-size; - left: 1px; + width: 0; + height: 0; + right: 100%; top: 50%; - margin-top: -(@arrow-size / 2); + transform: translateY(-50%); - background: inherit; - border: inherit; - border-width: 1px 0 0 1px; - transform: rotate(-45deg) translate(-50%, -50%); + border: @arrow-size solid transparent; + border-right-color: #fff; + border-left-width: 0; } } -- cgit v1.2.3 From 3d50936b47fdd691816843de962d5699c3c8f596 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sat, 28 Oct 2017 20:14:33 +1100 Subject: Split LESS into more granular files, Vimeo fixes --- demo/src/less/components/buttons.less | 3 --- 1 file changed, 3 deletions(-) (limited to 'demo/src/less/components/buttons.less') diff --git a/demo/src/less/components/buttons.less b/demo/src/less/components/buttons.less index 32b2570d..530addc2 100644 --- a/demo/src/less/components/buttons.less +++ b/demo/src/less/components/buttons.less @@ -10,12 +10,10 @@ vertical-align: middle; align-items: center; padding: (@spacing-base * 0.75); - border-radius: @border-radius-base; box-shadow: 0 1px 1px fade(#000, 10%); background: #fff; border: 0; - color: @gray; user-select: none; font-weight: @font-weight-bold; @@ -56,7 +54,6 @@ right: 100%; top: 50%; transform: translateY(-50%); - border: @arrow-size solid transparent; border-right-color: #fff; border-left-width: 0; -- cgit v1.2.3 From da1e987444bce4925020770f906ef915644ebd83 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Mon, 20 Nov 2017 21:23:49 +1100 Subject: WIP on docs example --- demo/src/less/components/buttons.less | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'demo/src/less/components/buttons.less') diff --git a/demo/src/less/components/buttons.less b/demo/src/less/components/buttons.less index 530addc2..e7e5bac3 100644 --- a/demo/src/less/components/buttons.less +++ b/demo/src/less/components/buttons.less @@ -14,10 +14,9 @@ box-shadow: 0 1px 1px fade(#000, 10%); background: #fff; border: 0; - color: @gray; user-select: none; - font-weight: @font-weight-bold; text-shadow: none; + color: @gray; } // Buttons @@ -25,6 +24,7 @@ padding-left: @spacing-base; padding-right: @spacing-base; transition: all 0.2s ease; + font-weight: @font-weight-bold; &:hover, &:focus { @@ -45,6 +45,7 @@ .button__count { margin-left: (@spacing-base / 2); animation: fadein 0.2s ease; + font-weight: @font-weight-medium; &::before { content: ''; -- cgit v1.2.3 From f33bc5a5c6bbcf64713dab5506df3bd6c1a37fa1 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Tue, 21 Nov 2017 14:05:55 +1100 Subject: Minor tweaks --- demo/src/less/components/buttons.less | 1 - 1 file changed, 1 deletion(-) (limited to 'demo/src/less/components/buttons.less') diff --git a/demo/src/less/components/buttons.less b/demo/src/less/components/buttons.less index e7e5bac3..2d9c65e5 100644 --- a/demo/src/less/components/buttons.less +++ b/demo/src/less/components/buttons.less @@ -45,7 +45,6 @@ .button__count { margin-left: (@spacing-base / 2); animation: fadein 0.2s ease; - font-weight: @font-weight-medium; &::before { content: ''; -- cgit v1.2.3 From 82f81f4f735c74b7425a66b7c9ec6f0bd91ae7a2 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Fri, 8 Dec 2017 15:54:08 +0000 Subject: More Edge fixes and small UI bugs --- demo/src/less/components/buttons.less | 24 +++++++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) (limited to 'demo/src/less/components/buttons.less') diff --git a/demo/src/less/components/buttons.less b/demo/src/less/components/buttons.less index 2d9c65e5..a8a15682 100644 --- a/demo/src/less/components/buttons.less +++ b/demo/src/less/components/buttons.less @@ -29,16 +29,38 @@ &:hover, &:focus { color: @gray-dark; - outline: 0; + // Remove the underline/border &::after { display: none; } } + &:hover { + transform: translateY(-1px); + box-shadow: 0 2px 2px fade(#000, 10%); + } + + &:focus { + outline: 0; + } + &.tab-focus { .tab-focus(); } + + &:active { + transform: translateY(1px); + } +} + +// Button group +.button--with-count { + display: inline-flex; + + .button .icon { + flex-shrink: 0; + } } // Count bubble -- cgit v1.2.3 From 6864149989c6a5b1bb6e9199e1f8af062c64dcc4 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Wed, 20 Dec 2017 15:14:05 +0000 Subject: Converted to SASS/SCSS --- demo/src/less/components/buttons.less | 83 ----------------------------------- 1 file changed, 83 deletions(-) delete mode 100644 demo/src/less/components/buttons.less (limited to 'demo/src/less/components/buttons.less') diff --git a/demo/src/less/components/buttons.less b/demo/src/less/components/buttons.less deleted file mode 100644 index a8a15682..00000000 --- a/demo/src/less/components/buttons.less +++ /dev/null @@ -1,83 +0,0 @@ -// ========================================================================== -// Buttons -// ========================================================================== - -// Shared -.button, -.button__count { - position: relative; - display: inline-flex; - vertical-align: middle; - align-items: center; - padding: (@spacing-base * 0.75); - border-radius: @border-radius-base; - box-shadow: 0 1px 1px fade(#000, 10%); - background: #fff; - border: 0; - user-select: none; - text-shadow: none; - color: @gray; -} - -// Buttons -.button { - padding-left: @spacing-base; - padding-right: @spacing-base; - transition: all 0.2s ease; - font-weight: @font-weight-bold; - - &:hover, - &:focus { - color: @gray-dark; - - // Remove the underline/border - &::after { - display: none; - } - } - - &:hover { - transform: translateY(-1px); - box-shadow: 0 2px 2px fade(#000, 10%); - } - - &:focus { - outline: 0; - } - - &.tab-focus { - .tab-focus(); - } - - &:active { - transform: translateY(1px); - } -} - -// Button group -.button--with-count { - display: inline-flex; - - .button .icon { - flex-shrink: 0; - } -} - -// Count bubble -.button__count { - margin-left: (@spacing-base / 2); - animation: fadein 0.2s ease; - - &::before { - content: ''; - position: absolute; - width: 0; - height: 0; - right: 100%; - top: 50%; - transform: translateY(-50%); - border: @arrow-size solid transparent; - border-right-color: #fff; - border-left-width: 0; - } -} -- cgit v1.2.3