@burh/nuxt-core 1.0.403 → 1.0.404

package/assets/sass/burh-ds/atoms/_forms.scss

@@ -1,417 +1,417 @@
-$input-padding-y: .75em;
-$input-padding-x: 1em;
-$input-color: $text-color-dark;
-$input-placeholder-color: $text-color-light;
-
-.form-control {
-    display: block;
-    width: 100%;
-    height: $input-height;
-    padding: $input-padding-y $input-padding-x;
-    font-family: $input-font-family;
-    @include font-size($input-font-size);
-    font-weight: $input-font-weight;
-    line-height: $input-line-height;
-    color: $input-color;
-    background-color: $input-bg;
-    background-clip: padding-box;
-    border: $input-border-width solid $input-border-color;
-  
-    // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
-    @include border-radius($input-border-radius, 0);
-  
-    @include box-shadow($input-box-shadow);
-    @include transition($input-transition);
-  
-    // Unstyle the caret on `<select>`s in IE10+.
-    &::-ms-expand {
-      background-color: transparent;
-      border: 0;
-    }
-  
-    // Customize the `:focus` state to imitate native WebKit styles.
-    @include form-control-focus();
-  
-    // Placeholder
-    &::placeholder {
-      color: $input-placeholder-color;
-      // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
-      opacity: 1;
-    }
-  
-    // Disabled and read-only inputs
-    //
-    // HTML5 says that controls under a fieldset > legend:first-child won't be
-    // disabled if the fieldset is disabled. Due to implementation difficulty, we
-    // don't honor that edge case; we style them as disabled anyway.
-    &:disabled,
-    &[readonly] {
-      background-color: $input-disabled-bg;
-      // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
-      opacity: 1;
-    }
-
-    &:focus,
-    &--focus {
-        color: $input-color;
-    }
-}
-select {
-  &.form-control {
-    &[multiple] {
-      padding: 0;
-      option {
-        padding: $input-padding-y $input-padding-x;
-      }
-    }
-
-    option::selected{
-      background-color: yellow; 
-    }
-  }
-}
-.form-control-label {
-    text-transform: uppercase;
-    color: $text-color;
-}
-
-  .el{
-    &-scrollbar {
-      &__view{
-        border: $input-border-width solid $color-primary;
-  
-        // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
-        @include border-radius($input-border-radius, 0);
-      }
-    }
-
-    &-popper[x-placement^=bottom] {
-      div.popper__arrow{
-        //border-bottom-color: $color-primary;
-      }
-    }
-
-    &-popper[x-placement^=top] {
-      div.popper__arrow{
-        //border-top-color: rgba($color-primary, 0);
-      }
-    }
-
-    &-select {
-      div.el-input, 
-      .is-focus {
-        .el-input__inner {
-            &:focus {
-              border-color: $color-primary !important;
-            }
-        }
-      }
-
-      div.el-input.is-focus{
-        .el-input__inner{
-          border-color: $color-primary !important;
-        }
-      }
-    
-      &-dropdown {
-        .el-scrollbar:not(.is-empty) + .popper__arrow{
-          border-bottom-color: $color-primary;
-        }
-      }
-    }
-  }
-
-div {
-  &.custom-radio {
-
-    .custom-control-input:not(:checked) ~ .custom-control-label::before {
-      border: 1px solid $color-mono-dark-30;
-    }
-
-    .custom-control-input:checked ~ .custom-control-label::before {
-      background-color: $color-light--lighten;
-    }
-    .custom-control-input:checked ~ .custom-control-label::after {
-      background-image: none;
-      background-color: $color-primary;
-      width: 10px;
-      height: 10px;
-      border-radius: 100%;
-      margin: 3px;
-    }
-
-    .custom-control-input:checked:disabled ~ .custom-control-label {
-      &::after{
-        background-color: $color-mono-dark-20;
-      }
-
-      &::before{
-        background-color: transparent;
-        border: 1px solid $color-mono-dark-20;
-      }
-    }
-
-    .custom-control-input:not(:checked):disabled ~ .custom-control-label{
-      &::before{
-        background-color: transparent;
-        border: 1px solid $color-mono-dark-20;
-      }
-    }
-  }
-
-  &.custom-checkbox {
-    .custom-control-input:not(:checked) ~ .custom-control-label::before {
-      border: 1px solid $color-mono-dark-30;
-    }
-    .custom-control-input:checked:disabled ~ .custom-control-label::before {
-      background-color: $color-mono-dark-20;
-    }
-    .custom-control-input:not(:checked):disabled ~ .custom-control-label::before {
-      background-color: $color-mono-dark-20;
-      border: none;
-    }
-  }
-
-}
-
-
-.custom-toggle {
-  margin: 0 4rem 0 0 !important;
-
-  
-  input:not(:checked) + span.custom-toggle-slider {
-    border: 1px solid $color-primary;
-
-    &::before{
-      background-color: $color-primary;
-    }
-
-    &::after{
-      font-family: $input-font-family;
-      font-size: .8rem;
-      font-weight: $font-weight-normal;
-      color: $color-dark;
-      left: 3.5rem;
-    }
-  }
-  
-  &--no-label {
-    margin-right: .25rem !important;
-
-    .custom-toggle-slider {
-      &::after {
-        display: none;
-      }
-    }
-  }
-
-  //default and main
-  &-default input:checked, 
-  input:checked + span.custom-toggle-slider {
-    border: 1px solid $color-primary;
-    background-color: $color-primary;
-    
-    &::before{
-      background-color: $color-light--lighten;
-    }
-
-    &::after{
-      font-family: $input-font-family;
-      font-size: .8rem;
-      font-weight: $font-weight-normal;
-      color: $color-dark;
-      left: 3.5rem;
-    }
-  }
-
-  //danger
-  &-danger input:checked + span.custom-toggle-slider {
-    border: 1px solid $color-danger;
-    background-color: $color-danger;
-  }
-
-  &-danger input:not(:checked) + span.custom-toggle-slider {
-    border: 1px solid $color-danger;
-    &::before{
-      background-color: $color-danger;
-    }
-  }
-
-  //warning
-  &-warning input:checked + span.custom-toggle-slider {
-    border: 1px solid $color-warning;
-    background-color: $color-warning;
-  }
-
-  &-warning input:not(:checked) + span.custom-toggle-slider {
-    border: 1px solid $color-warning;
-    &::before{
-      background-color: $color-warning;
-    }
-  }
-
-  //success
-  &-success input:checked + span.custom-toggle-slider {
-    border: 1px solid $color-success;
-    background-color: $color-success;
-  }
-
-  &-success input:not(:checked) + span.custom-toggle-slider {
-    border: 1px solid $color-success;
-    &::before{
-      background-color: $color-success;
-    }
-  }
-
-  //info
-  &-info input:checked + span.custom-toggle-slider {
-    border: 1px solid $color-info;
-    background-color: $color-info;
-  }
-
-  &-info input:not(:checked) + span.custom-toggle-slider {
-    border: 1px solid $color-info;
-    &::before{
-      background-color: $color-info;
-    }
-  }
-
-  input:checked + span.custom-toggle-slider:after{
-    left: 3.5rem;
-  }
-
-  &--disabled{
-    input:not(:checked) + span.custom-toggle-slider{
-      border: 1px solid $color-mono-dark-20;
-      &:before{
-        background-color: $color-mono-dark-30;
-      }
-      &:after{
-        color: $color-mono-dark-20;
-      }
-    }
-
-    input:checked + span.custom-toggle-slider{
-      border: 1px solid $color-mono-dark-20;
-      background-color: $color-mono-dark-30;
-      &:before{
-        background-color: $color-light--lighten;
-      }
-      &:after{
-        color: $color-mono-dark-20;
-      }
-    }
-  }
-
-}
-
-
-.dropdown-toggle{
-  justify-content: start;
-  padding-left: 1em;
-  padding-right: 3em;
-  margin-bottom: 0;
-  border-radius: 3px;
-
-  &.btn-warning{
-    background-color: $color-warning--darken;
-  }
-
-  &.btn-outline-primary{
-    &,
-    &:not(:disabled):not(.disabled):active{
-      background-color: $white;
-      border-color: $color-mono-dark-20;
-      color: $color-mono-dark-30;
-    }
-  }
-
-  &.btn-secondary {
-    // background-color: $color-secondary--mid-dark;
-
-    &:not(:disabled):not(.disabled):active {
-      color: $color-dark--darken;
-    }
-  }
-
-  &::after{
-    position: absolute;
-    font-family: $font-awesome;
-    font-size: .75em;
-    right: 1em;
-    top: .75em;
-    content: "\f078";
-    border: 0;
-    transform: rotateX(0);
-    // transform: rotate(0);
-    transition: transform .35s ease-in-out;
-  }
-}
-.dropdown {
-  &-item{
-    &:hover{
-      color: $color-primary;
-    }
-  }
-
-  &.show {
-    .dropdown-toggle {
-
-      &.btn-outline-primary{
-        &,
-        &:not(:disabled):not(.disabled):active{
-          background-color: $white;
-          border-color: $color-primary;
-          color: $color-mono-dark-30;
-        }
-      }
-
-      &.btn-outline-primary + .dropdown-menu.show{
-        border: 1px solid $color-primary;
-      }
-
-      &.btn-secondary{
-        color: $color-dark--darken;
-        background-color: $color-secondary--mid-dark;
-      }
-
-      border-bottom-right-radius: 0;
-      border-bottom-left-radius: 0;
-      &::after {
-        transform: rotateX(180deg);
-        // transform: rotate(180deg);
-        transition: transform .35s ease-in-out;
-        
-      }
-    }
-  }
-
-  &-menu{
-    // top: calc(100% - 1.1em);
-    border-top-right-radius: 0;
-    border-top-left-radius: 0;
-  }
-}
-.el-popover {
-  word-break: initial;
-  text-align: left;
-}
-
-span.el-radio {
-  &__inner {
-    border: 1px solid $color-primary;
-  }
-
-  &__input.is-checked {
-    .el-radio__inner {
-      border-color: $color-primary;
-      background: $white;
-
-      &::after{
-        background-color: $color-primary;
-        width: 8px;
-        height: 8px;
-      }
-    }
-  }
+$input-padding-y: .75em;
+$input-padding-x: 1em;
+$input-color: $text-color-dark;
+$input-placeholder-color: $text-color-light;
+
+.form-control {
+    display: block;
+    width: 100%;
+    height: $input-height;
+    padding: $input-padding-y $input-padding-x;
+    font-family: $input-font-family;
+    @include font-size($input-font-size);
+    font-weight: $input-font-weight;
+    line-height: $input-line-height;
+    color: $input-color;
+    background-color: $input-bg;
+    background-clip: padding-box;
+    border: $input-border-width solid $input-border-color;
+  
+    // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
+    @include border-radius($input-border-radius, 0);
+  
+    @include box-shadow($input-box-shadow);
+    @include transition($input-transition);
+  
+    // Unstyle the caret on `<select>`s in IE10+.
+    &::-ms-expand {
+      background-color: transparent;
+      border: 0;
+    }
+  
+    // Customize the `:focus` state to imitate native WebKit styles.
+    @include form-control-focus();
+  
+    // Placeholder
+    &::placeholder {
+      color: $input-placeholder-color;
+      // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
+      opacity: 1;
+    }
+  
+    // Disabled and read-only inputs
+    //
+    // HTML5 says that controls under a fieldset > legend:first-child won't be
+    // disabled if the fieldset is disabled. Due to implementation difficulty, we
+    // don't honor that edge case; we style them as disabled anyway.
+    &:disabled,
+    &[readonly] {
+      background-color: $input-disabled-bg;
+      // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
+      opacity: 1;
+    }
+
+    &:focus,
+    &--focus {
+        color: $input-color;
+    }
+}
+select {
+  &.form-control {
+    &[multiple] {
+      padding: 0;
+      option {
+        padding: $input-padding-y $input-padding-x;
+      }
+    }
+
+    option::selected{
+      background-color: yellow; 
+    }
+  }
+}
+.form-control-label {
+    text-transform: uppercase;
+    color: $text-color;
+}
+
+  .el{
+    &-scrollbar {
+      &__view{
+        border: $input-border-width solid $color-primary;
+  
+        // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
+        @include border-radius($input-border-radius, 0);
+      }
+    }
+
+    &-popper[x-placement^=bottom] {
+      div.popper__arrow{
+        //border-bottom-color: $color-primary;
+      }
+    }
+
+    &-popper[x-placement^=top] {
+      div.popper__arrow{
+        //border-top-color: rgba($color-primary, 0);
+      }
+    }
+
+    &-select {
+      div.el-input, 
+      .is-focus {
+        .el-input__inner {
+            &:focus {
+              border-color: $color-primary !important;
+            }
+        }
+      }
+
+      div.el-input.is-focus{
+        .el-input__inner{
+          border-color: $color-primary !important;
+        }
+      }
+    
+      &-dropdown {
+        .el-scrollbar:not(.is-empty) + .popper__arrow{
+          border-bottom-color: $color-primary;
+        }
+      }
+    }
+  }
+
+div {
+  &.custom-radio {
+
+    .custom-control-input:not(:checked) ~ .custom-control-label::before {
+      border: 1px solid $color-mono-dark-30;
+    }
+
+    .custom-control-input:checked ~ .custom-control-label::before {
+      background-color: $color-light--lighten;
+    }
+    .custom-control-input:checked ~ .custom-control-label::after {
+      background-image: none;
+      background-color: $color-primary;
+      width: 10px;
+      height: 10px;
+      border-radius: 100%;
+      margin: 3px;
+    }
+
+    .custom-control-input:checked:disabled ~ .custom-control-label {
+      &::after{
+        background-color: $color-mono-dark-20;
+      }
+
+      &::before{
+        background-color: transparent;
+        border: 1px solid $color-mono-dark-20;
+      }
+    }
+
+    .custom-control-input:not(:checked):disabled ~ .custom-control-label{
+      &::before{
+        background-color: transparent;
+        border: 1px solid $color-mono-dark-20;
+      }
+    }
+  }
+
+  &.custom-checkbox {
+    .custom-control-input:not(:checked) ~ .custom-control-label::before {
+      border: 1px solid $color-mono-dark-30;
+    }
+    .custom-control-input:checked:disabled ~ .custom-control-label::before {
+      background-color: $color-mono-dark-20;
+    }
+    .custom-control-input:not(:checked):disabled ~ .custom-control-label::before {
+      background-color: $color-mono-dark-20;
+      border: none;
+    }
+  }
+
+}
+
+
+.custom-toggle {
+  margin: 0 4rem 0 0 !important;
+
+  
+  input:not(:checked) + span.custom-toggle-slider {
+    border: 1px solid $color-primary;
+
+    &::before{
+      background-color: $color-primary;
+    }
+
+    &::after{
+      font-family: $input-font-family;
+      font-size: .8rem;
+      font-weight: $font-weight-normal;
+      color: $color-dark;
+      left: 3.5rem;
+    }
+  }
+  
+  &--no-label {
+    margin-right: .25rem !important;
+
+    .custom-toggle-slider {
+      &::after {
+        display: none;
+      }
+    }
+  }
+
+  //default and main
+  &-default input:checked, 
+  input:checked + span.custom-toggle-slider {
+    border: 1px solid $color-primary;
+    background-color: $color-primary;
+    
+    &::before{
+      background-color: $color-light--lighten;
+    }
+
+    &::after{
+      font-family: $input-font-family;
+      font-size: .8rem;
+      font-weight: $font-weight-normal;
+      color: $color-dark;
+      left: 3.5rem;
+    }
+  }
+
+  //danger
+  &-danger input:checked + span.custom-toggle-slider {
+    border: 1px solid $color-danger;
+    background-color: $color-danger;
+  }
+
+  &-danger input:not(:checked) + span.custom-toggle-slider {
+    border: 1px solid $color-danger;
+    &::before{
+      background-color: $color-danger;
+    }
+  }
+
+  //warning
+  &-warning input:checked + span.custom-toggle-slider {
+    border: 1px solid $color-warning;
+    background-color: $color-warning;
+  }
+
+  &-warning input:not(:checked) + span.custom-toggle-slider {
+    border: 1px solid $color-warning;
+    &::before{
+      background-color: $color-warning;
+    }
+  }
+
+  //success
+  &-success input:checked + span.custom-toggle-slider {
+    border: 1px solid $color-success;
+    background-color: $color-success;
+  }
+
+  &-success input:not(:checked) + span.custom-toggle-slider {
+    border: 1px solid $color-success;
+    &::before{
+      background-color: $color-success;
+    }
+  }
+
+  //info
+  &-info input:checked + span.custom-toggle-slider {
+    border: 1px solid $color-info;
+    background-color: $color-info;
+  }
+
+  &-info input:not(:checked) + span.custom-toggle-slider {
+    border: 1px solid $color-info;
+    &::before{
+      background-color: $color-info;
+    }
+  }
+
+  input:checked + span.custom-toggle-slider:after{
+    left: 3.5rem;
+  }
+
+  &--disabled{
+    input:not(:checked) + span.custom-toggle-slider{
+      border: 1px solid $color-mono-dark-20;
+      &:before{
+        background-color: $color-mono-dark-30;
+      }
+      &:after{
+        color: $color-mono-dark-20;
+      }
+    }
+
+    input:checked + span.custom-toggle-slider{
+      border: 1px solid $color-mono-dark-20;
+      background-color: $color-mono-dark-30;
+      &:before{
+        background-color: $color-light--lighten;
+      }
+      &:after{
+        color: $color-mono-dark-20;
+      }
+    }
+  }
+
+}
+
+
+.dropdown-toggle{
+  justify-content: start;
+  padding-left: 1em;
+  padding-right: 3em;
+  margin-bottom: 0;
+  border-radius: 3px;
+
+  &.btn-warning{
+    background-color: $color-warning--darken;
+  }
+
+  &.btn-outline-primary{
+    &,
+    &:not(:disabled):not(.disabled):active{
+      background-color: $white;
+      border-color: $color-mono-dark-20;
+      color: $color-mono-dark-30;
+    }
+  }
+
+  &.btn-secondary {
+    // background-color: $color-secondary--mid-dark;
+
+    &:not(:disabled):not(.disabled):active {
+      color: $color-dark--darken;
+    }
+  }
+
+  &::after{
+    position: absolute;
+    font-family: $font-awesome;
+    font-size: .75em;
+    right: 1em;
+    top: .75em;
+    content: "\f078";
+    border: 0;
+    transform: rotateX(0);
+    // transform: rotate(0);
+    transition: transform .35s ease-in-out;
+  }
+}
+.dropdown {
+  &-item{
+    &:hover{
+      color: $color-primary;
+    }
+  }
+
+  &.show {
+    .dropdown-toggle {
+
+      &.btn-outline-primary{
+        &,
+        &:not(:disabled):not(.disabled):active{
+          background-color: $white;
+          border-color: $color-primary;
+          color: $color-mono-dark-30;
+        }
+      }
+
+      &.btn-outline-primary + .dropdown-menu.show{
+        border: 1px solid $color-primary;
+      }
+
+      &.btn-secondary{
+        color: $color-dark--darken;
+        background-color: $color-secondary--mid-dark;
+      }
+
+      border-bottom-right-radius: 0;
+      border-bottom-left-radius: 0;
+      &::after {
+        transform: rotateX(180deg);
+        // transform: rotate(180deg);
+        transition: transform .35s ease-in-out;
+        
+      }
+    }
+  }
+
+  &-menu{
+    // top: calc(100% - 1.1em);
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+  }
+}
+.el-popover {
+  word-break: initial;
+  text-align: left;
+}
+
+span.el-radio {
+  &__inner {
+    border: 1px solid $color-primary;
+  }
+
+  &__input.is-checked {
+    .el-radio__inner {
+      border-color: $color-primary;
+      background: $white;
+
+      &::after{
+        background-color: $color-primary;
+        width: 8px;
+        height: 8px;
+      }
+    }
+  }
 }