diff options
Diffstat (limited to 'assets/sass/components/_button.scss')
| -rw-r--r-- | assets/sass/components/_button.scss | 113 |
1 files changed, 113 insertions, 0 deletions
diff --git a/assets/sass/components/_button.scss b/assets/sass/components/_button.scss new file mode 100644 index 0000000..2d9cd02 --- /dev/null +++ b/assets/sass/components/_button.scss @@ -0,0 +1,113 @@ +/* + Hugo Story by CaressOfSteel + A (modular, highly tweakable) responsive one-page theme for Hugo. + Ported from Story by HTML5UP. + This Hugo theme is licensed under the Creative Commons Attribution 3.0 License. +*/ + +/* Button */ + + input[type="submit"], + input[type="reset"], + input[type="button"], + button, + .button { + @include vendor('appearance', 'none'); + @include vendor('transition', ( + 'background-color #{_duration(transition)} ease-in-out', + 'box-shadow #{_duration(transition)} ease-in-out', + 'color #{_duration(transition)} ease-in-out' + )); + border: 0; + cursor: pointer; + display: inline-block; + font-weight: _font(weight-bold); + letter-spacing: _font(kerning-alt); + text-align: center; + text-decoration: none; + text-transform: uppercase; + white-space: nowrap; + font-size: 0.75rem; + max-width: 20rem; + height: 3.75em; + line-height: 3.75em; + border-radius: 3.75em; + padding: 0 2.5em; + text-overflow: ellipsis; + overflow: hidden; + + &.icon { + &:before { + margin-right: 0.5rem; + } + } + + &.fit { + width: 100%; + } + + &.small { + font-size: 0.6rem; + height: 3.325em; + line-height: 3.325em; + border-radius: 3.325em; + padding: 0 2em; + } + + &.large { + font-size: 0.8rem; + height: 4em; + line-height: 4em; + border-radius: 4em; + padding: 0 3em; + } + + &.wide { + min-width: 14em; + } + + &.disabled, + &:disabled { + @include vendor('pointer-events', 'none'); + opacity: 0.25; + } + } + + @mixin color-button($p: null) { + input[type="submit"], + input[type="reset"], + input[type="button"], + button, + .button { + background-color: transparent; + box-shadow: inset 0 0 0 _size(border-width) _palette($p, border); + color: _palette($p, fg-bold) !important; + + &:hover { + box-shadow: inset 0 0 0 _size(border-width) _palette($p, accent); + color: _palette($p, accent) !important; + } + + &:active { + background-color: transparentize(_palette($p, accent), 0.8); + box-shadow: inset 0 0 0 _size(border-width) _palette($p, accent); + color: _palette($p, accent) !important; + } + + &.primary { + background-color: _palette($p, fg-bold); + box-shadow: none; + color: _palette($p, bg) !important; + + &:hover { + background-color: _palette($p, accent); + } + + &:active { + background-color: darken(_palette($p, accent), 12); + } + } + } + } + + @include color-button;
\ No newline at end of file |