vbax-becky_thatcher 0.1.0

data/lib/vbax/sass/becky_thatcher/custom/_card.scss

@@ -0,0 +1,223 @@
+.card{
+    background: $card-black-background;
+    border: 0;
+    position: relative;
+    width: 100%;
+    margin-bottom: 30px;
+    box-shadow: $box-shadow;
+
+
+    label{
+      color: rgba($white, 0.6);
+    }
+
+    .card-title {
+      margin-bottom: .75rem;
+    }
+
+    .card-body{
+      padding: 15px;
+
+      &.table-full-width{
+        padding-left: 0;
+        padding-right: 0;
+      }
+
+      .card-title{
+        color: $white;
+        text-transform: inherit;
+        font-weight: $font-weight-light;
+        margin-bottom: .75rem;
+      }
+
+      .card-description, .card-category{
+        color: rgba($white, 0.6);
+      }
+
+    }
+
+    .card-header{
+      &:not([data-background-color]){
+        background-color: transparent;
+      }
+      padding: 15px 15px 0;
+      border: 0;
+      color: rgba($white,0.8);
+
+      .card-title{
+          color: $white;
+          font-weight: 100;
+      }
+
+      .card-category{
+        color: $dark-gray;
+        margin-bottom: 5px;
+        font-weight: 300;
+      }
+    }
+
+    .map{
+        border-radius: $border-radius-sm;
+
+        &.map-big{
+          height: 420px;
+        }
+    }
+
+    &.card-white{
+      background: $white;
+
+      .card-title{
+        color: $black;
+      }
+      .card-category, .stats{
+        color: $card-stats-gray;
+      }
+
+      //style for inputs
+
+      @include form-control-placeholder(rgba($black,0.4), 1);
+        .has-danger{
+          .form-control, .input-group-prepend .input-group-text{
+            border-color: $danger-states;
+          }
+        }
+
+        .input-group-prepend .input-group-text{
+          border-color: rgba($black-states,0.2);
+          color: $black-states;
+        }
+
+        .form-control{
+          color: $black;
+          border-color: rgba($black-states,0.2);
+          &:focus{
+            border-color: $primary;
+          }
+        }
+        label:not(.btn){
+          color: $default;
+        }
+
+      .form-group.no-border,
+      .input-group.no-border {
+          .form-control,
+          .form-control + .input-group-prepend .input-group-text,
+          .form-control + .input-group-append .input-group-text,
+          .input-group-prepend .input-group-text,
+          .input-group-append .input-group-text{
+            background-color: $opacity-gray-3;
+              &:focus,
+              &:active,
+              &:active{
+                background-color: $opacity-gray-5;
+              }
+          }
+
+          .form-control {
+              &:focus {
+                  & + .input-group-prepend .input-group-text,
+                  & + .input-group-append .input-group-text{
+                    background-color: $transparent-bg;
+                  }
+              }
+          }
+
+
+      }
+
+      .input-group[disabled]{
+          .input-group-prepend .input-group-text,
+          .input-group-append .input-group-text{
+              background-color: $black;
+          }
+      }
+
+      .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control{
+        background: $light-gray;
+        border-color: rgba($black-states,0.3);
+      }
+
+      .input-group-focus{
+          .input-group-prepend .input-group-text,
+          .input-group-append .input-group-text,
+          .form-control{
+            background-color: $white;
+            border-color: $primary;
+          }
+
+          &.no-border{
+              .input-group-prepend .input-group-text,
+              .input-group-append .input-group-text{
+
+                  background-color: $opacity-gray-5;
+              }
+          }
+      }
+      .input-group-prepend .input-group-text {
+          border-right: none;
+      }
+
+      .input-group-append .input-group-text {
+          border-left: none;
+      }
+
+      .has-danger .form-control:focus, .has-success.input-group-focus .input-group-append .input-group-text, .has-success.input-group-focus .input-group-prepend .input-group-text {
+        border-color: $danger-states;
+      }
+
+      .has-success .form-control:focus, .has-success.input-group-focus .input-group-append .input-group-text, .has-success.input-group-focus .input-group-prepend .input-group-text {
+        border-color: darken($success, 10%);
+      }
+    }
+
+
+    &.card-plain {
+      background: transparent;
+      box-shadow: none;
+    }
+
+    .image{
+        overflow: hidden;
+        height: 200px;
+        position: relative;
+    }
+
+    .avatar{
+        width: 30px;
+        height: 30px;
+        overflow: hidden;
+        border-radius: 50%;
+        margin-bottom: 15px;
+    }
+
+    label{
+        font-size: $font-size-sm;
+        margin-bottom: 5px;
+
+    }
+
+    .card-footer{
+        background-color: transparent;
+        border: 0;
+        padding: 15px;
+
+
+        .stats{
+            i{
+                margin-right: 5px;
+                position: relative;
+
+            }
+        }
+
+        h6{
+          margin-bottom: 0;
+          padding: 7px 0;
+        }
+    }
+}
+
+.card-body{
+  padding: $card-spacer-y;
+}

data/lib/vbax/sass/becky_thatcher/custom/_checkboxes-radio.scss

@@ -0,0 +1,154 @@
+.form-check{
+ margin-top: .5rem;
+ padding-left: 0;
+}
+
+.form-check .form-check-label{
+  display: inline-block;
+  position: relative;
+  cursor: pointer;
+  padding-left: 25px;
+  line-height: 18px;
+  margin-bottom: 0;
+  -webkit-transition: color 0.3s linear;
+  -moz-transition: color 0.3s linear;
+  -o-transition: color 0.3s linear;
+  -ms-transition: color 0.3s linear;
+  transition: color 0.3s linear;
+}
+.radio .form-check-sign{
+    padding-left: 28px;
+}
+
+.form-check-radio.form-check-inline .form-check-label {
+  padding-left: 5px;
+  margin-right: 10px;
+}
+
+.form-check .form-check-sign::before,
+.form-check .form-check-sign::after{
+  content: " ";
+  display: inline-block;
+  position: absolute;
+  width: 17px;
+  height: 17px;
+  left: 0;
+  cursor: pointer;
+  border-radius: 3px;
+  top: 0;
+  border: 1px solid darken($dark-gray,10%);
+  -webkit-transition: opacity 0.3s linear;
+  -moz-transition: opacity 0.3s linear;
+  -o-transition: opacity 0.3s linear;
+  -ms-transition: opacity 0.3s linear;
+  transition: opacity 0.3s linear;
+}
+
+.form-check input[type="checkbox"]:checked + .form-check-sign::before,
+.form-check input[type="checkbox"]:checked + .form-check-sign::before{
+  border: none;
+  background-color: $primary;
+}
+
+ .form-check .form-check-sign::after{
+  font-family: 'nucleo';
+  content: "\ea1b";
+  top: 0px;
+  text-align: center;
+  font-size: 14px;
+  opacity: 0;
+  color: $white;
+  font-weight: $font-weight-bold;
+  border: 0;
+  background-color: inherit;
+}
+
+.form-check.disabled .form-check-label,
+.form-check.disabled .form-check-label {
+    color: $dark-gray;
+    opacity: .5;
+    cursor: not-allowed;
+}
+
+.form-check input[type="checkbox"],
+.radio input[type="radio"]{
+  opacity: 0;
+  position: absolute;
+  visibility: hidden;
+}
+.form-check input[type="checkbox"]:checked + .form-check-sign::after{
+  opacity: 1;
+  font-size: 10px;
+  margin-top: 0;
+}
+
+
+.form-check input[type="checkbox"]+ .form-check-sign::after{
+  opacity: 0;
+  font-size: 10px;
+  margin-top: 0;
+}
+
+.form-control input[type="checkbox"]:disabled + .form-check-sign::before,
+.checkbox input[type="checkbox"]:disabled + .form-check-sign::after{
+    cursor: not-allowed;
+}
+
+.form-check input[type="checkbox"]:disabled + .form-check-sign,
+.form-check input[type="radio"]:disabled + .form-check-sign{
+    pointer-events: none;
+}
+
+.form-check-radio .form-check-label{
+  padding-top: 3px;
+}
+.form-check-radio .form-check-sign::before,
+.form-check-radio .form-check-sign::after{
+  content: " ";
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  border: 1px solid darken($dark-gray,10%);
+  display: inline-block;
+  position: absolute;
+  left: 0px;
+  top: 3px;
+  padding: 1px;
+  -webkit-transition: opacity 0.3s linear;
+  -moz-transition: opacity 0.3s linear;
+  -o-transition: opacity 0.3s linear;
+  -ms-transition: opacity 0.3s linear;
+  transition: opacity 0.3s linear;
+}
+
+.form-check-radio input[type="radio"] + .form-check-sign:after,
+.form-check-radio input[type="radio"] {
+    opacity: 0;
+}
+.form-check-radio input[type="radio"]:checked + .form-check-sign::after {
+    width: 6px;
+    height: 6px;
+    background-color: $primary;
+    border-color: $primary;
+    top: 9px;
+    left: 6px;
+    opacity: 1;
+}
+
+.form-check-radio input[type="radio"]:checked + .form-check-sign::before {
+  border-color: $primary;
+}
+
+
+.form-check-radio input[type="radio"]:checked + .form-check-sign::after{
+    opacity: 1;
+}
+
+.form-check-radio input[type="radio"]:disabled + .form-check-sign {
+  color: $dark-gray;
+}
+
+.form-check-radio input[type="radio"]:disabled + .form-check-sign::before,
+.form-check-radio input[type="radio"]:disabled + .form-check-sign::after {
+  color: $dark-gray;
+}

data/lib/vbax/sass/becky_thatcher/custom/_close.scss

@@ -0,0 +1,29 @@
+.close { 
+    @if $enable-transitions {
+        transition: $transition-base;
+    } 
+    &>span:not(.sr-only) {
+        background-color: $close-bg;
+        color: $close-color;
+        line-height: 17px;
+        height: 1.25rem;
+        width: 1.25rem; 
+        border-radius: 50%;
+        font-size: 1.25rem;
+        display: block;
+        @if $enable-transitions {
+            transition: $transition-base;
+        } 
+    } 
+
+    &:hover,
+    &:focus {
+        background-color: $close-hover-bg;
+        color: $close-hover-color;
+        outline: none;
+        
+        span:not(.sr-only) {
+            background-color: $close-hover-bg;
+        }
+    }
+}

data/lib/vbax/sass/becky_thatcher/custom/_custom-forms.scss

@@ -0,0 +1,186 @@
+.custom-control-label {
+    // Background-color and (when enabled) gradient
+    &::before {
+        border: $custom-control-indicator-border-width solid $custom-control-indicator-border-color;
+        @if $enable-transitions {
+            transition: $input-transition;
+        } 
+    }
+
+    span {
+        position: relative;
+        top: 2px;
+    }
+} 
+
+.custom-control-label {
+    margin-bottom: 0;
+}
+
+.custom-control-input {
+    &:active~.custom-control-label::before {
+        border-color: $custom-control-indicator-active-border-color;
+    }
+}
+
+// Alternative custom control 
+.custom-control-alternative {
+    .custom-control-label {
+        // Background-color and (when enabled) gradient
+        &::before {
+            border: 0;
+            box-shadow: $input-alternative-box-shadow;
+        }
+    } 
+
+    .custom-control-input {
+        &:checked {
+            ~ .custom-control-label {
+                &::before {
+                    box-shadow: $input-focus-alternative-box-shadow;
+                }
+            }
+        }
+
+        &:active~.custom-control-label::before,
+        &:focus~.custom-control-label::before {
+            box-shadow: $input-alternative-box-shadow;
+        }
+    }
+}
+
+
+// Checkboxes
+.custom-checkbox {
+    .custom-control-input~.custom-control-label {
+        cursor: pointer;
+        font-size: $font-size-sm;
+    }
+
+    .custom-control-input {
+        &:checked {
+            ~ .custom-control-label {
+                &::before {
+                    border-color: $custom-control-indicator-checked-border-color;
+                }
+                &::after {
+                    background-image: $custom-checkbox-indicator-icon-checked;
+                }
+            }
+        }
+
+        &:disabled {
+            ~ .custom-control-label {
+                &::before {
+                    border-color: $custom-control-indicator-disabled-bg;
+                }
+            }
+
+            &:checked {
+                &::before {
+                    border-color: $custom-control-indicator-checked-disabled-bg;
+                }
+            }
+        }
+    }
+}
+
+// Radios
+.custom-radio {
+    .custom-control-input~.custom-control-label {
+        cursor: pointer;
+        font-size: $font-size-sm;
+    }
+
+    .custom-control-input {
+        &:checked {
+            ~ .custom-control-label {
+                &::before {
+                    border-color: $custom-control-indicator-checked-border-color;
+                }
+                &::after {
+                    background-image: $custom-radio-indicator-icon-checked;
+                }
+            }
+        }
+
+        &:disabled {
+            ~ .custom-control-label {
+                &::before {
+                    border-color: $custom-control-indicator-disabled-bg;
+                }
+            }
+
+            &:checked {
+                &::before {
+                    border-color: $custom-control-indicator-checked-disabled-bg;
+                }
+            }
+        }
+    }
+
+}
+
+// Toggles
+.custom-toggle {
+    position: relative;
+    display: inline-block;
+    width: 50px;
+    height: 1.5rem;
+
+    input {
+        display: none;
+
+        &:checked {
+             + .custom-toggle-slider {
+                border: $custom-control-indicator-border-width solid $custom-control-indicator-checked-border-color;
+
+                &:before {
+                    background: $custom-toggle-checked-bg;
+                    transform: translateX(1.625rem);
+                }  
+            }
+        }
+        
+        &:disabled {
+            + .custom-toggle-slider {
+                border: $custom-control-indicator-border-width solid $custom-control-indicator-disabled-bg;
+            }
+
+            &:checked {
+                + .custom-toggle-slider {
+                    border: $custom-control-indicator-border-width solid $custom-control-indicator-disabled-bg;
+
+                    &:before {
+                        background-color: lighten($custom-control-indicator-checked-bg, 10%);
+                    }
+                }
+            }
+        }
+    }
+}
+
+.custom-toggle-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: $custom-control-indicator-border-width solid $input-border-color;
+    border-radius: 34px !important;
+    background-color: transparent;
+    
+
+    &:before {
+        position: absolute;
+        content: "";
+        height: 18px;
+        width: 18px;
+        left: 2px;
+        bottom: 2px;
+        border-radius: 50% !important;
+        background-color: $custom-toggle-slider-bg;
+        transition: $input-transition;
+    }
+}