From e4033c3d5bc1c4b596e0cac36eaa19c8ae9210ee Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Thu, 24 Aug 2017 17:18:17 +0200 Subject: [PATCH] buttons, buttons, buttons --- _src/_assets/scss/_buttons.scss | 122 ++++++++++++++++++++++++ _src/_assets/scss/_menus.scss | 4 + _src/_assets/scss/_mixins.scss | 1 + _src/_assets/scss/_mixins/_buttons.scss | 37 +++++++ _src/_assets/scss/_typography.scss | 2 +- _src/_assets/scss/_variables.scss | 29 ++++++ _src/_assets/scss/ipdb.scss | 2 + _src/_includes/menu-main.html | 4 +- _src/index.html | 10 +- _src/styleguide.md | 2 + 10 files changed, 205 insertions(+), 8 deletions(-) create mode 100644 _src/_assets/scss/_buttons.scss create mode 100644 _src/_assets/scss/_mixins.scss create mode 100644 _src/_assets/scss/_mixins/_buttons.scss diff --git a/_src/_assets/scss/_buttons.scss b/_src/_assets/scss/_buttons.scss new file mode 100644 index 0000000..6b27f45 --- /dev/null +++ b/_src/_assets/scss/_buttons.scss @@ -0,0 +1,122 @@ +// +// Buttons +// --- +// ipdb.io +// +@import 'variables'; +@import 'mixins'; + +.button { + display: inline-block; + font-family: $btn-font-family; + font-weight: $btn-font-weight; + line-height: 1; + text-transform: uppercase; + text-align: center; + white-space: nowrap; + vertical-align: middle; + cursor: pointer; + user-select: none; + border: 0; + box-shadow: none; + transition: .25s ease-out; + + // default button + @include button-size($btn-padding-y, $btn-padding-x, .9rem, $line-height, $btn-border-radius); + @include button-variant($btn-secondary-color, $btn-secondary-bg); + + &:hover, + &:focus { + transform: translateY(-1px); + } + + &:active, + &.active { + background-image: none; + outline: 0; + transform: translateY(0); + } + + &.disabled, + &:disabled { + opacity: .45; + box-shadow: none; + cursor: not-allowed; + pointer-events: none; + } + + .icon { + width: $font-size-base; + height: $font-size-base; + margin-right: .25rem; + margin-bottom: -1px; + } +} + + +// +// Alternate buttons +// +.button--primary { + @include button-variant($btn-primary-color, $btn-primary-bg); +} + +.button--secondary { + @include button-variant($btn-secondary-color, $btn-secondary-bg); +} + +.button--dark { + @include button-variant($btn-dark-color, $btn-dark-bg); +} + + +// +// Text buttons +// +.button--text { + color: $link-color; + + &:hover, + &:focus { + color: darken($link-color, 10%); + } + + &, + &:hover, + &:focus, + &:active, + &.active, + &:disabled { + background: none; + padding-right: 0; + padding-left: 0; + } + + &:after { + content: ' →'; + } +} + + +// +// Button Sizes +// +.button--large { + // line-height: ensure even-numbered height of button next to large input + @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-base, $line-height, $btn-border-radius); + + .icon { + width: $font-size-large; + height: $font-size-large; + } +} + +.button--small { + // line-height: ensure proper height of button next to small input + @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-mini, $line-height, $btn-border-radius); + + .icon { + width: $font-size-small; + height: $font-size-small; + } +} diff --git a/_src/_assets/scss/_menus.scss b/_src/_assets/scss/_menus.scss index 78bf2c7..745bcc6 100644 --- a/_src/_assets/scss/_menus.scss +++ b/_src/_assets/scss/_menus.scss @@ -96,6 +96,10 @@ margin-right: -($spacer); } } + + .button { + margin-left: $spacer; + } } diff --git a/_src/_assets/scss/_mixins.scss b/_src/_assets/scss/_mixins.scss new file mode 100644 index 0000000..e7596ce --- /dev/null +++ b/_src/_assets/scss/_mixins.scss @@ -0,0 +1 @@ +@import '_mixins/buttons'; diff --git a/_src/_assets/scss/_mixins/_buttons.scss b/_src/_assets/scss/_mixins/_buttons.scss new file mode 100644 index 0000000..0f81921 --- /dev/null +++ b/_src/_assets/scss/_mixins/_buttons.scss @@ -0,0 +1,37 @@ +// +// Button variants +// +@mixin button-variant($color, $background) { + $active-background: lighten($background, 5%); + color: $color; + background: $background; + + &:hover, + &:focus { + color: $color; + background-color: $active-background; + } + + &:active { + color: $color; + background: darken($background, 2%); + transition: none; + } + + &.disabled, + &:disabled { + &:focus { + background-color: $background; + } + } + + .icon { fill: $color; } +} + +// Button sizes +@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) { + padding: $padding-y $padding-x; + font-size: $font-size; + line-height: $line-height; + border-radius: $border-radius; +} diff --git a/_src/_assets/scss/_typography.scss b/_src/_assets/scss/_typography.scss index 1084c9b..1884521 100644 --- a/_src/_assets/scss/_typography.scss +++ b/_src/_assets/scss/_typography.scss @@ -114,7 +114,7 @@ a { &:hover, &:focus { - color: lighten($link-color, 10%); + color: darken($link-color, 10%); outline: 0; } } diff --git a/_src/_assets/scss/_variables.scss b/_src/_assets/scss/_variables.scss index feeecc4..012b5c7 100644 --- a/_src/_assets/scss/_variables.scss +++ b/_src/_assets/scss/_variables.scss @@ -54,3 +54,32 @@ $screen-lg-min: 85em !default; $screen-sm: 'min-width: #{$screen-sm-min}'; $screen-md: 'min-width: #{$screen-md-min}'; $screen-lg: 'min-width: #{$screen-lg-min}'; + + +// +// Buttons +// +$btn-font-family: inherit; +$btn-font-weight: $font-weight-bold !default; + +$btn-padding-x: 2rem !default; +$btn-padding-y: .5rem !default; + +$btn-padding-x-sm: 1.5rem !default; +$btn-padding-y-sm: .3rem !default; + +$btn-padding-x-lg: 3rem !default; +$btn-padding-y-lg: .7rem !default; + +$btn-primary-color: #fff !default; +$btn-primary-bg: $brand-01 !default; + +$btn-secondary-color: #fff !default; +$btn-secondary-bg: $brand-04 !default; + +$btn-dark-color: #fff !default; +$btn-dark-bg: $brand-03 !default; + +$btn-link-disabled-color: $brand-05 !default; + +$btn-border-radius: 10rem !default; diff --git a/_src/_assets/scss/ipdb.scss b/_src/_assets/scss/ipdb.scss index 934946d..3edb291 100644 --- a/_src/_assets/scss/ipdb.scss +++ b/_src/_assets/scss/ipdb.scss @@ -1,8 +1,10 @@ @import 'variables'; +@import 'mixins'; @import 'typography'; // Components @import 'grid'; +@import 'buttons'; @import 'sections'; @import 'hero'; @import 'header'; diff --git a/_src/_includes/menu-main.html b/_src/_includes/menu-main.html index 9bd155f..894462d 100644 --- a/_src/_includes/menu-main.html +++ b/_src/_includes/menu-main.html @@ -19,8 +19,8 @@ {{ link.title }} {% endfor %} - Signup - Login + Signup + Login diff --git a/_src/index.html b/_src/index.html index fd8ddc7..2a4f968 100644 --- a/_src/index.html +++ b/_src/index.html @@ -12,7 +12,7 @@ front_page: true

{{ content.hero.title }}

- {{ site.signup.button }} + {{ site.signup.button }}
@@ -27,8 +27,8 @@ front_page: true {{ content.intro.text | markdownify }} - {{ site.signup.button }} - Read IPDB Documentation + {{ site.signup.button }} + Read IPDB Documentation @@ -45,7 +45,7 @@ front_page: true
- {{ content.foundation.button }} + {{ content.foundation.button }}
@@ -83,7 +83,7 @@ front_page: true

{{ content.connect.blog_title }}

- IPDB Blog + IPDB Blog
diff --git a/_src/styleguide.md b/_src/styleguide.md index 4d9c381..5d90171 100644 --- a/_src/styleguide.md +++ b/_src/styleguide.md @@ -64,6 +64,8 @@ Logo can be used with a base class and modifier classes for size & color: Button Button Button +Button Button Button + ## Forms