From 06e7a9f33088354b63561e9bf131f399416ec77d Mon Sep 17 00:00:00 2001 From: 53hornet <53hornet@gmail.com> Date: Sun, 31 Mar 2019 08:53:18 -0400 Subject: Ignoring Bulma sass. --- _sass/elements/form.sass | 602 ----------------------------------------------- 1 file changed, 602 deletions(-) delete mode 100644 _sass/elements/form.sass (limited to '_sass/elements/form.sass') diff --git a/_sass/elements/form.sass b/_sass/elements/form.sass deleted file mode 100644 index c944b75..0000000 --- a/_sass/elements/form.sass +++ /dev/null @@ -1,602 +0,0 @@ -$input-color: $grey-darker !default -$input-background-color: $white !default -$input-border-color: $grey-lighter !default -$input-height: $control-height !default -$input-shadow: inset 0 1px 2px rgba($black, 0.1) !default -$input-placeholder-color: rgba($input-color, 0.3) !default - -$input-hover-color: $grey-darker !default -$input-hover-border-color: $grey-light !default - -$input-focus-color: $grey-darker !default -$input-focus-border-color: $link !default -$input-focus-box-shadow-size: 0 0 0 0.125em !default -$input-focus-box-shadow-color: rgba($link, 0.25) !default - -$input-disabled-color: $text-light !default -$input-disabled-background-color: $background !default -$input-disabled-border-color: $background !default -$input-disabled-placeholder-color: rgba($input-disabled-color, 0.3) !default - -$input-arrow: $link !default - -$input-icon-color: $grey-lighter !default -$input-icon-active-color: $grey !default - -$input-radius: $radius !default - -$file-border-color: $border !default -$file-radius: $radius !default - -$file-cta-background-color: $white-ter !default -$file-cta-color: $grey-dark !default -$file-cta-hover-color: $grey-darker !default -$file-cta-active-color: $grey-darker !default - -$file-name-border-color: $border !default -$file-name-border-style: solid !default -$file-name-border-width: 1px 1px 1px 0 !default -$file-name-max-width: 16em !default - -$label-color: $grey-darker !default -$label-weight: $weight-bold !default - -$help-size: $size-small !default - -=input - @extend %control - background-color: $input-background-color - border-color: $input-border-color - color: $input-color - +placeholder - color: $input-placeholder-color - &:hover, - &.is-hovered - border-color: $input-hover-border-color - &:focus, - &.is-focused, - &:active, - &.is-active - border-color: $input-focus-border-color - box-shadow: $input-focus-box-shadow-size $input-focus-box-shadow-color - &[disabled], - fieldset[disabled] & - background-color: $input-disabled-background-color - border-color: $input-disabled-border-color - box-shadow: none - color: $input-disabled-color - +placeholder - color: $input-disabled-placeholder-color - -.input, -.textarea - +input - box-shadow: $input-shadow - max-width: 100% - width: 100% - &[readonly] - box-shadow: none - // Colors - @each $name, $pair in $colors - $color: nth($pair, 1) - &.is-#{$name} - border-color: $color - &:focus, - &.is-focused, - &:active, - &.is-active - box-shadow: $input-focus-box-shadow-size rgba($color, 0.25) - // Sizes - &.is-small - +control-small - &.is-medium - +control-medium - &.is-large - +control-large - // Modifiers - &.is-fullwidth - display: block - width: 100% - &.is-inline - display: inline - width: auto - -.input - &.is-rounded - border-radius: $radius-rounded - padding-left: 1em - padding-right: 1em - &.is-static - background-color: transparent - border-color: transparent - box-shadow: none - padding-left: 0 - padding-right: 0 - -.textarea - display: block - max-width: 100% - min-width: 100% - padding: 0.625em - resize: vertical - &:not([rows]) - max-height: 600px - min-height: 120px - &[rows] - height: initial - // Modifiers - &.has-fixed-size - resize: none - -.checkbox, -.radio - cursor: pointer - display: inline-block - line-height: 1.25 - position: relative - input - cursor: pointer - &:hover - color: $input-hover-color - &[disabled], - fieldset[disabled] & - color: $input-disabled-color - cursor: not-allowed - -.radio - & + .radio - margin-left: 0.5em - -.select - display: inline-block - max-width: 100% - position: relative - vertical-align: top - &:not(.is-multiple) - height: $input-height - &:not(.is-multiple):not(.is-loading) - &::after - @extend %arrow - border-color: $input-arrow - right: 1.125em - z-index: 4 - &.is-rounded - select - border-radius: $radius-rounded - padding-left: 1em - select - +input - cursor: pointer - display: block - font-size: 1em - max-width: 100% - outline: none - &::-ms-expand - display: none - &[disabled]:hover, - fieldset[disabled] &:hover - border-color: $input-disabled-border-color - &:not([multiple]) - padding-right: 2.5em - &[multiple] - height: auto - padding: 0 - option - padding: 0.5em 1em - // States - &:not(.is-multiple):not(.is-loading):hover - &::after - border-color: $input-hover-color - // Colors - @each $name, $pair in $colors - $color: nth($pair, 1) - &.is-#{$name} - &:not(:hover)::after - border-color: $color - select - border-color: $color - &:hover, - &.is-hovered - border-color: darken($color, 5%) - &:focus, - &.is-focused, - &:active, - &.is-active - box-shadow: $input-focus-box-shadow-size rgba($color, 0.25) - // Sizes - &.is-small - +control-small - &.is-medium - +control-medium - &.is-large - +control-large - // Modifiers - &.is-disabled - &::after - border-color: $input-disabled-color - &.is-fullwidth - width: 100% - select - width: 100% - &.is-loading - &::after - @extend %loader - margin-top: 0 - position: absolute - right: 0.625em - top: 0.625em - transform: none - &.is-small:after - font-size: $size-small - &.is-medium:after - font-size: $size-medium - &.is-large:after - font-size: $size-large - -.file - @extend %unselectable - align-items: stretch - display: flex - justify-content: flex-start - position: relative - // Colors - @each $name, $pair in $colors - $color: nth($pair, 1) - $color-invert: nth($pair, 2) - &.is-#{$name} - .file-cta - background-color: $color - border-color: transparent - color: $color-invert - &:hover, - &.is-hovered - .file-cta - background-color: darken($color, 2.5%) - border-color: transparent - color: $color-invert - &:focus, - &.is-focused - .file-cta - border-color: transparent - box-shadow: 0 0 0.5em rgba($color, 0.25) - color: $color-invert - &:active, - &.is-active - .file-cta - background-color: darken($color, 5%) - border-color: transparent - color: $color-invert - // Sizes - &.is-small - font-size: $size-small - &.is-medium - font-size: $size-medium - .file-icon - .fa - font-size: 21px - &.is-large - font-size: $size-large - .file-icon - .fa - font-size: 28px - // Modifiers - &.has-name - .file-cta - border-bottom-right-radius: 0 - border-top-right-radius: 0 - .file-name - border-bottom-left-radius: 0 - border-top-left-radius: 0 - &.is-empty - .file-cta - border-radius: $file-radius - .file-name - display: none - &.is-boxed - .file-label - flex-direction: column - .file-cta - flex-direction: column - height: auto - padding: 1em 3em - .file-name - border-width: 0 1px 1px - .file-icon - height: 1.5em - width: 1.5em - .fa - font-size: 21px - &.is-small - .file-icon .fa - font-size: 14px - &.is-medium - .file-icon .fa - font-size: 28px - &.is-large - .file-icon .fa - font-size: 35px - &.has-name - .file-cta - border-radius: $file-radius $file-radius 0 0 - .file-name - border-radius: 0 0 $file-radius $file-radius - border-width: 0 1px 1px - &.is-centered - justify-content: center - &.is-fullwidth - .file-label - width: 100% - .file-name - flex-grow: 1 - max-width: none - &.is-right - justify-content: flex-end - .file-cta - border-radius: 0 $file-radius $file-radius 0 - .file-name - border-radius: $file-radius 0 0 $file-radius - border-width: 1px 0 1px 1px - order: -1 - -.file-label - align-items: stretch - display: flex - cursor: pointer - justify-content: flex-start - overflow: hidden - position: relative - &:hover - .file-cta - background-color: darken($file-cta-background-color, 2.5%) - color: $file-cta-hover-color - .file-name - border-color: darken($file-name-border-color, 2.5%) - &:active - .file-cta - background-color: darken($file-cta-background-color, 5%) - color: $file-cta-active-color - .file-name - border-color: darken($file-name-border-color, 5%) - -.file-input - height: 100% - left: 0 - opacity: 0 - outline: none - position: absolute - top: 0 - width: 100% - -.file-cta, -.file-name - @extend %control - border-color: $file-border-color - border-radius: $file-radius - font-size: 1em - padding-left: 1em - padding-right: 1em - white-space: nowrap - -.file-cta - background-color: $file-cta-background-color - color: $file-cta-color - -.file-name - border-color: $file-name-border-color - border-style: $file-name-border-style - border-width: $file-name-border-width - display: block - max-width: $file-name-max-width - overflow: hidden - text-align: left - text-overflow: ellipsis - -.file-icon - align-items: center - display: flex - height: 1em - justify-content: center - margin-right: 0.5em - width: 1em - .fa - font-size: 14px - -.label - color: $label-color - display: block - font-size: $size-normal - font-weight: $label-weight - &:not(:last-child) - margin-bottom: 0.5em - // Sizes - &.is-small - font-size: $size-small - &.is-medium - font-size: $size-medium - &.is-large - font-size: $size-large - -.help - display: block - font-size: $help-size - margin-top: 0.25rem - @each $name, $pair in $colors - $color: nth($pair, 1) - &.is-#{$name} - color: $color - -// Containers - -.field - &:not(:last-child) - margin-bottom: 0.75rem - // Modifiers - &.has-addons - display: flex - justify-content: flex-start - .control - &:not(:last-child) - margin-right: -1px - &:not(:first-child):not(:last-child) - .button, - .input, - .select select - border-radius: 0 - &:first-child:not(:only-child) - .button, - .input, - .select select - border-bottom-right-radius: 0 - border-top-right-radius: 0 - &:last-child:not(:only-child) - .button, - .input, - .select select - border-bottom-left-radius: 0 - border-top-left-radius: 0 - .button, - .input, - .select select - &:not([disabled]) - &:hover, - &.is-hovered - z-index: 2 - &:focus, - &.is-focused, - &:active, - &.is-active - z-index: 3 - &:hover - z-index: 4 - &.is-expanded - flex-grow: 1 - &.has-addons-centered - justify-content: center - &.has-addons-right - justify-content: flex-end - &.has-addons-fullwidth - .control - flex-grow: 1 - flex-shrink: 0 - &.is-grouped - display: flex - justify-content: flex-start - & > .control - flex-shrink: 0 - &:not(:last-child) - margin-bottom: 0 - margin-right: 0.75rem - &.is-expanded - flex-grow: 1 - flex-shrink: 1 - &.is-grouped-centered - justify-content: center - &.is-grouped-right - justify-content: flex-end - &.is-grouped-multiline - flex-wrap: wrap - & > .control - &:last-child, - &:not(:last-child) - margin-bottom: 0.75rem - &:last-child - margin-bottom: -0.75rem - &:not(:last-child) - margin-bottom: 0 - &.is-horizontal - +tablet - display: flex - -.field-label - .label - font-size: inherit - +mobile - margin-bottom: 0.5rem - +tablet - flex-basis: 0 - flex-grow: 1 - flex-shrink: 0 - margin-right: 1.5rem - text-align: right - &.is-small - font-size: $size-small - padding-top: 0.375em - &.is-normal - padding-top: 0.375em - &.is-medium - font-size: $size-medium - padding-top: 0.375em - &.is-large - font-size: $size-large - padding-top: 0.375em - -.field-body - .field .field - margin-bottom: 0 - +tablet - display: flex - flex-basis: 0 - flex-grow: 5 - flex-shrink: 1 - .field - margin-bottom: 0 - & > .field - flex-shrink: 1 - &:not(.is-narrow) - flex-grow: 1 - &:not(:last-child) - margin-right: 0.75rem - -.control - box-sizing: border-box - clear: both //fixes the icon floating out of the input when help text is floated right - font-size: $size-normal - position: relative - text-align: left - // Modifiers - &.has-icons-left, - &.has-icons-right - .input, - .select - &:focus - & ~ .icon - color: $input-icon-active-color - &.is-small ~ .icon - font-size: $size-small - &.is-medium ~ .icon - font-size: $size-medium - &.is-large ~ .icon - font-size: $size-large - .icon - color: $input-icon-color - height: $input-height - pointer-events: none - position: absolute - top: 0 - width: $input-height - z-index: 4 - &.has-icons-left - .input, - .select select - padding-left: $input-height - .icon.is-left - left: 0 - &.has-icons-right - .input, - .select select - padding-right: $input-height - .icon.is-right - right: 0 - &.is-loading - &::after - @extend %loader - position: absolute !important - right: 0.625em - top: 0.625em - z-index: 4 - &.is-small:after - font-size: $size-small - &.is-medium:after - font-size: $size-medium - &.is-large:after - font-size: $size-large -- cgit v1.2.3