diff options
| author | Adam Carpenter <gitlab@53hor.net> | 2019-10-26 15:33:52 -0400 | 
|---|---|---|
| committer | Adam Carpenter <gitlab@53hor.net> | 2019-10-26 15:33:52 -0400 | 
| commit | 3be4959623190f0bb6d880fe1fc2a9c187c4171e (patch) | |
| tree | 0e0007d1b3953b0c209b526ffd20583412ed28be /public/css/_sass/elements/form.sass | |
| parent | 92f4799f50c94f2de1d3d94b0fb20ff6d93614eb (diff) | |
| download | cobalt-site-3be4959623190f0bb6d880fe1fc2a9c187c4171e.tar.xz cobalt-site-3be4959623190f0bb6d880fe1fc2a9c187c4171e.zip | |
Updated Bulma!
Diffstat (limited to 'public/css/_sass/elements/form.sass')
| -rw-r--r-- | public/css/_sass/elements/form.sass | 603 | 
1 files changed, 1 insertions, 602 deletions
| diff --git a/public/css/_sass/elements/form.sass b/public/css/_sass/elements/form.sass index c944b75..3122dc4 100644 --- a/public/css/_sass/elements/form.sass +++ b/public/css/_sass/elements/form.sass @@ -1,602 +1 @@ -$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 +@warn "The form.sass file is DEPRECATED. It has moved into its own /form folder. Please import sass/form/_all instead." |