From 66e98b7125c87706782b8247b8e0329473dbeb5a Mon Sep 17 00:00:00 2001 From: "Adam T. Carpenter" Date: Sat, 11 Jul 2020 10:59:50 -0400 Subject: reorganized assets and CSS, added a post --- public/css/_sass/elements/button.sass | 275 ---------------------------------- 1 file changed, 275 deletions(-) delete mode 100644 public/css/_sass/elements/button.sass (limited to 'public/css/_sass/elements/button.sass') diff --git a/public/css/_sass/elements/button.sass b/public/css/_sass/elements/button.sass deleted file mode 100644 index e75cd2f..0000000 --- a/public/css/_sass/elements/button.sass +++ /dev/null @@ -1,275 +0,0 @@ -$button-color: $grey-darker !default -$button-background-color: $white !default - -$button-border-color: $grey-lighter !default -$button-border-width: $control-border-width !default - -$button-padding-vertical: calc(0.375em - #{$button-border-width}) !default -$button-padding-horizontal: 0.75em !default - -$button-hover-color: $link-hover !default -$button-hover-border-color: $link-hover-border !default - -$button-focus-color: $link-focus !default -$button-focus-border-color: $link-focus-border !default -$button-focus-box-shadow-size: 0 0 0 0.125em !default -$button-focus-box-shadow-color: rgba($link, 0.25) !default - -$button-active-color: $link-active !default -$button-active-border-color: $link-active-border !default - -$button-text-color: $text !default -$button-text-hover-background-color: $background !default -$button-text-hover-color: $text-strong !default - -$button-disabled-background-color: $white !default -$button-disabled-border-color: $grey-lighter !default -$button-disabled-shadow: none !default -$button-disabled-opacity: 0.5 !default - -$button-static-color: $grey !default -$button-static-background-color: $white-ter !default -$button-static-border-color: $grey-lighter !default - -// The button sizes use mixins so they can be used at different breakpoints -=button-small - border-radius: $radius-small - font-size: $size-small -=button-normal - font-size: $size-normal -=button-medium - font-size: $size-medium -=button-large - font-size: $size-large - -.button - @extend %control - @extend %unselectable - background-color: $button-background-color - border-color: $button-border-color - border-width: $button-border-width - color: $button-color - cursor: pointer - justify-content: center - padding-bottom: $button-padding-vertical - padding-left: $button-padding-horizontal - padding-right: $button-padding-horizontal - padding-top: $button-padding-vertical - text-align: center - white-space: nowrap - strong - color: inherit - .icon - &, - &.is-small, - &.is-medium, - &.is-large - height: 1.5em - width: 1.5em - &:first-child:not(:last-child) - margin-left: calc(-0.375em - #{$button-border-width}) - margin-right: 0.1875em - &:last-child:not(:first-child) - margin-left: 0.1875em - margin-right: calc(-0.375em - #{$button-border-width}) - &:first-child:last-child - margin-left: calc(-0.375em - #{$button-border-width}) - margin-right: calc(-0.375em - #{$button-border-width}) - // States - &:hover, - &.is-hovered - border-color: $button-hover-border-color - color: $button-hover-color - &:focus, - &.is-focused - border-color: $button-focus-border-color - color: $button-focus-color - &:not(:active) - box-shadow: $button-focus-box-shadow-size $button-focus-box-shadow-color - &:active, - &.is-active - border-color: $button-active-border-color - color: $button-active-color - // Colors - &.is-text - background-color: transparent - border-color: transparent - color: $button-text-color - text-decoration: underline - &:hover, - &.is-hovered, - &:focus, - &.is-focused - background-color: $button-text-hover-background-color - color: $button-text-hover-color - &:active, - &.is-active - background-color: darken($button-text-hover-background-color, 5%) - color: $button-text-hover-color - &[disabled], - fieldset[disabled] & - background-color: transparent - border-color: transparent - box-shadow: none - @each $name, $pair in $colors - $color: nth($pair, 1) - $color-invert: nth($pair, 2) - &.is-#{$name} - background-color: $color - border-color: transparent - color: $color-invert - &:hover, - &.is-hovered - background-color: darken($color, 2.5%) - border-color: transparent - color: $color-invert - &:focus, - &.is-focused - border-color: transparent - color: $color-invert - &:not(:active) - box-shadow: $button-focus-box-shadow-size rgba($color, 0.25) - &:active, - &.is-active - background-color: darken($color, 5%) - border-color: transparent - color: $color-invert - &[disabled], - fieldset[disabled] & - background-color: $color - border-color: transparent - box-shadow: none - &.is-inverted - background-color: $color-invert - color: $color - &:hover - background-color: darken($color-invert, 5%) - &[disabled], - fieldset[disabled] & - background-color: $color-invert - border-color: transparent - box-shadow: none - color: $color - &.is-loading - &::after - border-color: transparent transparent $color-invert $color-invert !important - &.is-outlined - background-color: transparent - border-color: $color - color: $color - &:hover, - &:focus - background-color: $color - border-color: $color - color: $color-invert - &.is-loading - &::after - border-color: transparent transparent $color $color !important - &[disabled], - fieldset[disabled] & - background-color: transparent - border-color: $color - box-shadow: none - color: $color - &.is-inverted.is-outlined - background-color: transparent - border-color: $color-invert - color: $color-invert - &:hover, - &:focus - background-color: $color-invert - color: $color - &[disabled], - fieldset[disabled] & - background-color: transparent - border-color: $color-invert - box-shadow: none - color: $color-invert - // Sizes - &.is-small - +button-small - &.is-normal - +button-normal - &.is-medium - +button-medium - &.is-large - +button-large - // Modifiers - &[disabled], - fieldset[disabled] & - background-color: $button-disabled-background-color - border-color: $button-disabled-border-color - box-shadow: $button-disabled-shadow - opacity: $button-disabled-opacity - &.is-fullwidth - display: flex - width: 100% - &.is-loading - color: transparent !important - pointer-events: none - &::after - @extend %loader - +center(1em) - position: absolute !important - &.is-static - background-color: $button-static-background-color - border-color: $button-static-border-color - color: $button-static-color - box-shadow: none - pointer-events: none - &.is-rounded - border-radius: $radius-rounded - padding-left: 1em - padding-right: 1em - -.buttons - align-items: center - display: flex - flex-wrap: wrap - justify-content: flex-start - .button - margin-bottom: 0.5rem - &:not(:last-child):not(.is-fullwidth) - margin-right: 0.5rem - &:last-child - margin-bottom: -0.5rem - &:not(:last-child) - margin-bottom: 1rem - // Sizes - &.are-small - .button:not(.is-normal):not(.is-medium):not(.is-large) - +button-small - &.are-medium - .button:not(.is-small):not(.is-normal):not(.is-large) - +button-medium - &.are-large - .button:not(.is-small):not(.is-normal):not(.is-medium) - +button-large - &.has-addons - .button - &:not(:first-child) - border-bottom-left-radius: 0 - border-top-left-radius: 0 - &:not(:last-child) - border-bottom-right-radius: 0 - border-top-right-radius: 0 - margin-right: -1px - &:last-child - margin-right: 0 - &:hover, - &.is-hovered - z-index: 2 - &:focus, - &.is-focused, - &:active, - &.is-active, - &.is-selected - z-index: 3 - &:hover - z-index: 4 - &.is-expanded - flex-grow: 1 - &.is-centered - justify-content: center - &.is-right - justify-content: flex-end -- cgit v1.2.3