inicios del FrontEnd

APP/assets/sass/dashboard/custom/vendor/_plugin-bootstrap-switch.scss

@@ -0,0 +1,316 @@
+/* ========================================================================
+ * bootstrap-switch - v3.3.4
+ * http://www.bootstrap-switch.org
+ * ========================================================================
+ * Copyright 2012-2013 Mattia Larentis
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+
+
+
+
+
+
+
+
+
+
+
+
+
+ //* IMPORTANT! Creative Tim Notice: this file has major changes to fit the Black Dashboard 's design. If you want to use the plugin as it was before our changes, please get the old files from http://www.bootstrap-switch.org
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+.bootstrap-switch {
+  display: inline-block;
+  direction: ltr;
+  cursor: pointer;
+  border-radius: 30px;
+  border: 0;
+  position: relative;
+  text-align: left;
+  overflow: hidden;
+  box-shadow: 0 0px 10px rgba(0, 0, 0, 0.13);
+  margin-bottom: 10px;
+  line-height: 8px;
+  width: 59px !important;
+  height: 22px;
+  outline: none;
+  z-index: 0;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  vertical-align: middle;
+  -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+  background: url("https://d2v9y0dukr6mq2.cloudfront.net/video/thumbnail/J9H9WF0/night-sky-full-of-stars-fantasy-animation-made-of-magical-sparkly-light-particles-flickering-on-a-purple-blue-gradient-background_bajacpz7x_thumbnail-full01.png");
+  background-position: center center;
+  background-size: cover;
+}
+
+.bootstrap-switch .bootstrap-switch-container {
+  display: inline-flex;
+  top: 0;
+  height: 22px;
+  border-radius: 4px;
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+  width: 100px !important;
+}
+.bootstrap-switch .bootstrap-switch-handle-on,
+.bootstrap-switch .bootstrap-switch-handle-off,
+.bootstrap-switch .bootstrap-switch-label {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: inline-block !important;
+  height: 100%;
+  color: #fff;
+  padding: 6px 10px;
+  font-size: 11px;
+  text-indent: -5px;
+  line-height: 15px;
+  -webkit-transition: 0.25s ease-out;
+          transition: 0.25s ease-out;
+
+}
+.bootstrap-switch .bootstrap-switch-handle-on,
+.bootstrap-switch .bootstrap-switch-handle-off {
+  text-align: center;
+  z-index: 1;
+  float: left;
+  line-height: 11px;
+  width: 50% !important;
+}
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-brown,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-brown {
+  color: #fff;
+  background: $brand-primary;
+}
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-blue,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-blue {
+  color: #fff;
+  background: $brand-info;
+}
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-green,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-green {
+  color: #fff;
+  background: $brand-success;
+}
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-orange,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-orange {
+  background: $brand-warning;
+  color: #fff;
+}
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-red,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-red {
+  color: #fff;
+  background: $brand-danger;
+}
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default {
+  color: #fff;
+}
+.bootstrap-switch .bootstrap-switch-label {
+  text-align: center;
+  z-index: 100;
+  color: #333333;
+  background: #ffffff;
+  width: 18px !important;
+  height: 18px !important;
+  margin: 0px -11px;
+  border-radius: 20px;
+  position: absolute;
+  float: left;
+  top: 2px;
+  left: 51%;
+  padding: 0;
+  box-shadow: 0 1px 11px rgba(0, 0, 0, 0.25);
+}
+
+.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-label{
+    background-color: rgba(156, 156 ,156 , .9);
+    left: 52%;
+}
+.bootstrap-switch.bootstrap-switch-on:hover .bootstrap-switch-label{
+    width: 27px !important;
+    margin-left: -20px;
+}
+.bootstrap-switch.bootstrap-switch-off:hover .bootstrap-switch-label{
+    width: 27px !important;
+    margin-left: -11px;
+}
+.bootstrap-switch .bootstrap-switch-handle-on {
+  border-bottom-left-radius: 3px;
+  border-top-left-radius: 3px;
+}
+.bootstrap-switch .bootstrap-switch-handle-off {
+  text-indent: 6px;
+}
+.bootstrap-switch input[type='radio'],
+.bootstrap-switch input[type='checkbox'] {
+  position: absolute !important;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  filter: alpha(opacity=0);
+  z-index: -1;
+}
+.bootstrap-switch input[type='radio'].form-control,
+.bootstrap-switch input[type='checkbox'].form-control {
+  height: auto;
+}
+.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-on,
+.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-off,
+.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-label {
+  padding: 1px 5px;
+  font-size: 12px;
+  line-height: 1.5;
+}
+.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-on,
+.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-off,
+.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-label {
+  padding: 5px 10px;
+  font-size: 12px;
+  line-height: 1.5;
+}
+.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-on,
+.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-off,
+.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-label {
+  padding: 6px 16px;
+  font-size: 18px;
+  line-height: 1.33;
+}
+.bootstrap-switch.bootstrap-switch-disabled,
+.bootstrap-switch.bootstrap-switch-readonly,
+.bootstrap-switch.bootstrap-switch-indeterminate {
+  cursor: default !important;
+}
+.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-on,
+.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-on,
+.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-on,
+.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-off,
+.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-off,
+.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-off,
+.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-label,
+.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-label,
+.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-label {
+  opacity: 0.5;
+  filter: alpha(opacity=50);
+  cursor: default !important;
+}
+.bootstrap-switch.bootstrap-switch-animate .bootstrap-switch-container {
+  -webkit-transition: margin-left 0.5s;
+  transition: margin-left 0.5s;
+}
+.bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-on {
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+  border-bottom-right-radius: 3px;
+  border-top-right-radius: 3px;
+}
+.bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-off {
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+  border-bottom-left-radius: 3px;
+  border-top-left-radius: 3px;
+}
+.bootstrap-switch.bootstrap-switch-focused {
+  // border-color: #66afe9;
+  // outline: 0;
+  // -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
+  // box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
+}
+// .bootstrap-switch.bootstrap-switch-on .bootstrap-switch-label,
+// .bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-off .bootstrap-switch-label {
+//   border-bottom-right-radius: 3px;
+//   border-top-right-radius: 3px;
+// }
+// .bootstrap-switch.bootstrap-switch-off .bootstrap-switch-label,
+// .bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-on .bootstrap-switch-label {
+//   border-bottom-left-radius: 3px;
+//   border-top-left-radius: 3px;
+// }
+
+.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-container{
+    margin-left: -2px !important;
+}
+
+.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-container{
+    margin-left: -39px !important;
+}
+
+.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-label{
+    &:before{
+        background-color: #FFFFFF;
+    }
+}
+
+.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-red ~ .bootstrap-switch-default{
+    background-color: $brand-danger;
+}
+
+.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-orange ~ .bootstrap-switch-default{
+    background-color: $brand-warning;
+}
+
+.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-green ~ .bootstrap-switch-default{
+    background-color: $brand-success;
+}
+
+.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-brown ~ .bootstrap-switch-default{
+    background-color: $brand-primary;
+}
+
+.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-blue ~ .bootstrap-switch-default{
+    background-color: $brand-info;
+}
+
+.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-red,
+.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-brown,
+.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-blue,
+.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-orange,
+.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-green{
+    background-color: $light-gray;
+}
+
+.bootstrap-switch-on .bootstrap-switch-handle-off,
+.bootstrap-switch-off .bootstrap-switch-handle-on{
+    opacity: 0;
+    visibility: hidden;
+}
+
+.bootstrap-switch-off:before{
+  position: absolute;
+  content: "";
+  height: 100%;
+  width: 100%;
+  top: 0;
+  right: 0;
+  background: rgba(16,16,16,0.7);
+}

APP/assets/sass/dashboard/custom/vendor/_plugin-perfect-scrollbar.scss

@@ -0,0 +1,116 @@
+/*
+ * Container style
+ */
+.ps {
+  overflow: hidden !important;
+  overflow-anchor: none;
+  -ms-overflow-style: none;
+  touch-action: auto;
+  -ms-touch-action: auto;
+}
+
+/*
+ * Scrollbar rail styles
+ */
+.ps__rail-x {
+  display: none;
+  opacity: 0;
+  transition: background-color .2s linear, opacity .2s linear;
+  -webkit-transition: background-color .2s linear, opacity .2s linear;
+  height: 15px;
+  /* there must be 'bottom' or 'top' for ps__rail-x */
+  bottom: 0px;
+  /* please don't change 'position' */
+  position: absolute;
+}
+
+.ps__rail-y {
+  display: none;
+  opacity: 0;
+  transition: background-color .2s linear, opacity .2s linear;
+  -webkit-transition: background-color .2s linear, opacity .2s linear;
+  width: 15px;
+  /* there must be 'right' or 'left' for ps__rail-y */
+  right: 0;
+  /* please don't change 'position' */
+  position: absolute;
+}
+
+.ps--active-x > .ps__rail-x,
+.ps--active-y > .ps__rail-y {
+  display: block;
+  background-color: transparent;
+}
+
+.ps:hover > .ps__rail-x,
+.ps:hover > .ps__rail-y,
+.ps--focus > .ps__rail-x,
+.ps--focus > .ps__rail-y,
+.ps--scrolling-x > .ps__rail-x,
+.ps--scrolling-y > .ps__rail-y {
+  opacity: 0.6;
+}
+
+.ps .ps__rail-x:hover,
+.ps .ps__rail-y:hover,
+.ps .ps__rail-x:focus,
+.ps .ps__rail-y:focus,
+.ps .ps__rail-x.ps--clicking,
+.ps .ps__rail-y.ps--clicking {
+  background-color: #eee;
+  opacity: 0.9;
+}
+
+/*
+ * Scrollbar thumb styles
+ */
+.ps__thumb-x {
+  background-color: #aaa;
+  border-radius: 6px;
+  transition: background-color .2s linear, height .2s ease-in-out;
+  -webkit-transition: background-color .2s linear, height .2s ease-in-out;
+  height: 6px;
+  /* there must be 'bottom' for ps__thumb-x */
+  bottom: 2px;
+  /* please don't change 'position' */
+  position: absolute;
+}
+
+.ps__thumb-y {
+  background-color: #aaa;
+  border-radius: 6px;
+  transition: background-color .2s linear, width .2s ease-in-out;
+  -webkit-transition: background-color .2s linear, width .2s ease-in-out;
+  width: 6px;
+  /* there must be 'right' for ps__thumb-y */
+  right: 2px;
+  /* please don't change 'position' */
+  position: absolute;
+}
+
+.ps__rail-x:hover > .ps__thumb-x,
+.ps__rail-x:focus > .ps__thumb-x,
+.ps__rail-x.ps--clicking .ps__thumb-x {
+  background-color: #999;
+  height: 11px;
+}
+
+.ps__rail-y:hover > .ps__thumb-y,
+.ps__rail-y:focus > .ps__thumb-y,
+.ps__rail-y.ps--clicking .ps__thumb-y {
+  background-color: #999;
+  width: 11px;
+}
+
+/* MS supports */
+@supports (-ms-overflow-style: none) {
+  .ps {
+    overflow: auto !important;
+  }
+}
+
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+  .ps {
+    overflow: auto !important;
+  }
+}

APP/assets/sass/dashboard/custom/vendor/element-ui/_plugin-datepicker.scss

@@ -0,0 +1,166 @@
+$box-shadow-lg: 0px 10px 50px 0px rgba(0, 0, 0, 0.2);
+
+.picker-card-styles {
+  box-shadow: $box-shadow-lg;
+  border: none;
+  border-radius: $border-radius-sm;
+}
+
+.el-picker-panel.time-select.el-popper {
+  @extend .picker-card-styles;
+}
+
+.el-picker-panel.el-date-picker {
+  width: 300px;
+  border: 0;
+  @extend .picker-card-styles;
+  .el-date-picker__header,
+  .el-picker-panel__content {
+    margin: 5px;
+  }
+}
+
+.el-date-picker__header,
+.el-date-range-picker__header {
+  &.el-date-picker__header--bordered {
+    border: none;
+  }
+
+  .el-picker-panel__icon-btn {
+    margin-top: 0;
+    height: 27px;
+    width: 27px;
+    color: $primary;
+
+    &:hover {
+      border-radius: 50%;
+      background-color: #eee;
+    }
+  }
+  .el-date-picker__header-label, div {
+    font-size: $font-size-base;
+    font-weight: $font-weight-light;
+    color: $primary;
+    &:hover {
+      background-color: #eee;
+      color: $primary;
+      border-radius: $border-radius-lg;
+    }
+  }
+}
+
+.el-date-picker,
+.time-select{
+
+  .time-select-item.selected:not(.disabled) {
+    color: $primary;
+  }
+  .el-picker-panel__content {
+    .el-date-table th {
+      color: $primary;
+      font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
+      font-size: $font-size-base;
+      font-weight: $font-weight-light;
+      border: none;
+    }
+  }
+
+  .el-picker-panel__content .el-date-table td,
+  .el-picker-panel__content .el-month-table td,
+  .el-picker-panel__content .el-year-table td {
+    height: 32px;
+    width: 32px;
+    padding: 0;
+
+    div {
+      &:hover {
+        color: $default;
+      }
+      height: 100%;
+      padding: 0;
+    }
+    .cell,
+    span {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: $font-size-base;
+      color: $default;
+
+      &:hover {
+        border-radius: 50%;
+        background: #eee;
+        cursor: pointer;
+        color: $default;
+      }
+    }
+
+    &.current span,
+    &.current a.cell {
+      background-color: $primary;
+      color: $white;
+      box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.2);
+      border-radius: 50%;
+    }
+    span {
+      width: 32px;
+      height: 32px;
+    }
+    .cell {
+      width: 40px;
+      height: 40px;
+    }
+  }
+}
+
+.el-date-picker .el-date-picker__time-header {
+  border: none;
+}
+
+.el-date-picker .el-time-panel.el-popper {
+  @extend .picker-card-styles;
+  button {
+    @extend .btn-primary, .btn-round, .btn-sm;
+    border: 0;
+    padding: 7px !important;
+    margin: 0 5px 0 0;
+    line-height: 14px;
+    font-weight: $font-weight-normal;
+    &:first-child {
+      @extend .btn-danger;
+    }
+  }
+}
+
+.el-date-editor.el-input, .el-date-editor.el-input__inner {
+  width: 100% !important;
+}
+
+.el-date-editor.el-input .el-input__inner {
+  padding-left: 30px !important
+}
+
+.el-date-picker .el-input {
+  .el-input__inner {
+    @extend .form-control;
+    color: $default;
+    &:hover {
+      color: $default;
+    }
+  }
+}
+
+.el-date-picker .el-picker-panel__footer {
+  border: none;
+  .el-button {
+    @extend .btn-primary, .btn-round, .btn-sm;
+    border: 0;
+    &:first-child {
+      @extend .btn-info;
+    }
+  }
+}
+
+.el-picker-panel .el-time-spinner.has-seconds .el-time-spinner__wrapper:nth-child(2) {
+  margin-left: 0;
+}

APP/assets/sass/dashboard/custom/vendor/element-ui/_plugin-inputs.scss

@@ -0,0 +1,34 @@
+@import "../../variables";
+
+.form-group {
+  .el-date-editor {
+    width: 100% !important;
+  }
+  .el-input__inner {
+    @extend .form-control;
+    width: 100%;
+  }
+  .el-select{
+    width: 100%;
+    .el-input__inner{
+      cursor: pointer !important;
+    }
+  }
+  .el-input-number{
+    width: 100%;
+    .plus-button{
+      @extend .btn-round, .btn-primary;
+      padding: 0 !important;
+      border: 0;
+    }
+    .el-input-number__decrease{
+      @extend .plus-button;
+      border-radius: $btn-round-radius 0 0 $btn-round-radius !important;
+    }
+    .el-input-number__increase{
+      @extend .plus-button;
+      border-radius: 0 $btn-round-radius $btn-round-radius 0 !important;
+    }
+  }
+}
+

APP/assets/sass/dashboard/custom/vendor/element-ui/_plugin-select.scss

@@ -0,0 +1,86 @@
+@import "../../variables";
+@mixin select($type, $color) {
+  .select-#{$type}.el-select {
+  }
+  .select-#{$type}.el-select .el-input  {
+    .el-input__suffix{
+      display: flex;
+      align-items: center;
+    }
+    .el-input__icon{
+      border-radius:20px;
+      height: 40px;
+      width: 30px;
+    }
+
+    input{
+      background-color: transparent;
+      border-width: 1px;
+      border-color: lighten($black,5%);
+      color: $color;
+    }
+    &:hover{
+      input{
+        border-color: $color !important;
+      }
+    }
+
+    .el-input__icon{
+      color:$color;
+    }
+  }
+  .select-#{$type}{
+
+    .el-tag, .el-tag.el-tag--info {
+      line-height: 24px;
+      background-color: $color;
+      border: none;
+      .el-tag__close{
+        width: 20px;
+        height: 20px;
+        background-color: transparent;
+
+        &:hover {
+         background-color: white;
+         color: $color;
+        }
+
+        &:before {
+          margin-top: 2px;
+        }
+
+      }
+    }
+    &.el-select-dropdown__item.selected,
+    &.el-select-dropdown__item.selected.hover {
+      background-color: $color;
+      color: white;
+    }
+  }
+
+  &.el-select-dropdown.is-multiple
+  .el-select-dropdown__item.selected{
+    &.select-#{$type}{
+      color: $color;
+    }
+  }
+}
+
+.el-select .el-input {
+  &:hover {
+    .el-input__icon,
+    input {
+      &::placeholder {
+        color: white;
+      }
+      color: white;
+    }
+  }
+}
+
+@include select('default', $default)
+@include select('info', $info)
+@include select('primary', $primary)
+@include select('success', $success)
+@include select('warning', $warning)
+@include select('danger', $danger)

APP/assets/sass/dashboard/custom/vendor/element-ui/_plugin-slider.scss

@@ -0,0 +1,29 @@
+@import "../../variables";
+
+@mixin slider($name, $color, $height: 6px){
+  .slider-#{$name}{
+    .el-slider__bar {
+      height: $height;
+      background-color: $color;
+    }
+    .el-tooltip{
+      border: none;
+    }
+    .el-slider__button{
+      &.hover,
+      &:hover,
+      &.dragging {
+        background-color: darken($color, 10%)
+      }
+      background-color: $color;
+      height: $height * 3;
+      width: $height * 3;
+    }
+  }
+}
+
+@include slider('info', $info)
+@include slider('primary', $primary)
+@include slider('success', $success)
+@include slider('warning', $warning)
+@include slider('danger', $danger)

APP/assets/sass/dashboard/custom/vendor/element-ui/_plugin-tables.scss

@@ -0,0 +1,60 @@
+@import "../../variables";
+
+// Element UI override
+
+.el-table table {
+  @extend .table;
+}
+
+// A bit hacky but overrides some element ui defaults so it looks better
+.el-table::before {
+  height: 0 !important;
+}
+
+.el-table table td, .el-table table th.is-leaf {
+  border-bottom: none;
+}
+
+.el-table.el-table--enable-row-hover table.el-table__body tr:hover > td {
+  background: inherit;
+}
+
+.el-table table .ascending .sort-caret.ascending {
+  border-bottom-color: $primary;
+}
+
+.el-table table .descending .sort-caret.descending {
+  border-top-color: $primary;
+}
+
+.el-table {
+  .td-total {
+    font-weight: $font-weight-bold;
+    font-size: $font-size-lg;
+    padding-top: 20px;
+    text-align: right;
+  }
+  .td-price {
+    font-size: 26px;
+    font-weight: $font-weight-light;
+    margin-top: 5px;
+    position: relative;
+    top: 4px;
+    text-align: right;
+  }
+
+  .table-actions {
+    .btn {
+      margin-right: 5px;
+      &:last-child {
+        margin-right: 0px;
+      }
+    }
+  }
+}
+
+div.el-table,
+.el-table table tr,
+.el-table table thead th {
+  background-color: transparent;
+}

APP/assets/sass/dashboard/custom/vendor/element-ui/_plugin-tags.scss

@@ -0,0 +1,38 @@
+@import "../../variables";
+
+@mixin tag($type, $color){
+  .input-new-tag.input-#{$type} .el-input__inner{
+    border-color: $color !important;
+  }
+  .el-tag,
+  span.el-tag.el-tag--#{$type} {
+    .el-tag__close {
+      color: white;
+    }
+    .el-tag__close:hover{
+      background-color: white;
+      color: $color;
+    }
+    background-color: $color;
+    border-color: $color;
+    color: white;
+  }
+}
+span.el-tag{
+  border-radius: 12px;
+  margin-left:10px;
+  margin-bottom:5px;
+}
+input.input-new-tag{
+  margin-left:10px;
+  width: 150px;
+  height: 32px;
+  display: inline;
+
+}
+
+@include tag('info', $info)
+@include tag('primary', $primary)
+@include tag('success', $success)
+@include tag('warning', $warning)
+@include tag('danger', $danger)