@agilemotion/oui-react-js 1.2.7 → 1.2.8

package/dist/assets/scss/black-dashboard-react/custom/_white-content.scss

@@ -0,0 +1,299 @@
+.white-content{
+
+  background: $light-bg;
+
+  .navbar.navbar-transparent .navbar-brand{
+    color: $black-states;
+  }
+
+  .navbar.navbar-transparent .navbar-toggler-bar{
+    background: $black-states;
+  }
+  .navbar.navbar-transparent .navbar-nav li a:not(.dropdown-item){
+      color: $black-states;
+      & i{
+        color: $black-states;
+      }
+  }
+
+  .navbar.navbar-transparent .navbar-minimize button i{
+    color: $black-states;
+  }
+
+  .navbar.navbar-transparent .search-bar.input-group i{
+    color: $black-states;
+  }
+  .navbar.navbar-transparent .search-bar.input-group .form-control{
+    color: $default;
+    &::placeholder{
+      color: $dark-gray;
+    }
+  }
+
+  .sidebar{
+    box-shadow: 0 2px 22px 0 rgba(0,0,0,.1), 0 4px 20px 0 rgba(0,0,0,.15);
+    p{
+      color: $opacity-8;
+    }
+  }
+
+  .main-panel{
+    background: $light-bg;
+  }
+
+  h1, h2, h3, h4, h5, h6, p, ol li, ul li, pre {
+    color: $black-states;
+  }
+
+  .font-icon-detail i{
+    color: $black;
+  }
+
+  .btn:not([data-action]):hover{
+    box-shadow:  0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);
+  }
+
+  .btn-neutral.btn-link{
+    color: rgba($black, 0.7);
+  }
+
+  //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.5);
+      color: $black-states;
+    }
+
+    .form-control{
+      color: $black;
+      border-color: rgba($black-states,0.5);
+      &:focus{
+        border-color: $primary;
+      }
+    }
+
+  .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{
+        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%);
+  }
+
+  .btn.btn-link{
+    &:hover,&:active, &:focus{
+      color: $dark-gray !important;
+    }
+  }
+
+  .btn-group .btn.active{
+    box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);
+  }
+
+  .card:not(.card-white){
+    background: $white;
+    box-shadow: 0 1px 15px 0 rgba(123, 123, 123, 0.05);
+    .card-header{
+      color: $black;
+      a[data-toggle="collapse"]{
+        color: $black;
+      }
+    }
+    .card-header .card-title, .card-body .card-title{
+      color: $black-states;
+    }
+
+    .card-body{
+      .card-category, .card-description{
+        color: $black-states;
+      }
+    }
+
+
+    label:not(.btn){
+      color: $default;
+    }
+
+
+     &.nav-pills .nav-item .nav-link {
+        color: $nav-gray;
+        background-color: hsla(0,0%,87%,.3);
+        &:not(.active):hover{
+          background: hsla(0,0%,87%,.5);
+        }
+        &.active{
+          color: $white;
+
+        }
+    }
+
+    .tab-content .tab-pane {
+        color: $nav-gray;
+    }
+
+
+    .card{
+      box-shadow: none;
+    }
+
+    &.card-plain{
+      background: $transparent-bg;
+      box-shadow: none;
+    }
+
+    &.card-tasks{
+      .card-body{
+        i{
+          color: rgba(34,42,66,0.7);
+          &:hover{
+            color: $black;
+          }
+        }
+      }
+    }
+  }
+
+  .table{
+
+      > tbody > tr > td {
+        color: rgba($black, 0.7) !important;
+
+    }
+
+    > thead > tr > th,
+    > tbody > tr > th,
+    > tfoot > tr > th,
+    > thead > tr > td,
+    > tbody > tr > td,
+    > tfoot > tr > td{
+        border-color: rgba($black, 0.2);
+        padding: 12px 7px;
+        vertical-align: middle;
+    }
+
+    > thead > tr > th, button.btn-neutral.btn-link{
+      color: rgba($black, 0.7);
+    }
+  }
+
+  .footer ul li a{
+    color: $black-states;
+  }
+
+  .footer .copyright{
+    color: $black-states;
+  }
+
+  .progress-container, .progress-container.progress.sm{
+      .progress{
+        background: rgba($black,0.1);
+        box-shadow: 0 0 0 3px rgba($black,0.1);
+        .progress-value{
+          color: $default;
+        }
+      }
+
+      .progress-badge{
+        color: $black-states;
+      }
+  }
+
+   .full-page{
+     background: $light-bg;
+
+     h1, h2, h3, h4, h5, h6, p, ol li, ul li, pre {
+       color: $black-states;
+     }
+
+     .description{
+       color: $dark-gray;
+     }
+
+     .footer ul li a{
+       color: $black-states;
+     }
+
+     .footer .copyright{
+       color: $black-states;
+     }
+   }
+
+   .nav-pills .nav-item .nav-link:not(.active){
+     background: darken($light-bg,10%);
+     color: $black-states;
+     &:hover{
+       background: darken($white,20%);
+
+     }
+   }
+}

package/dist/assets/scss/black-dashboard-react/custom/cards/_card-chart.scss

@@ -0,0 +1,73 @@
+.card-chart {
+  overflow: hidden;
+  .card-header{
+    .card-title{
+      i{
+        font-size: 16px;
+        margin-right: 5px;
+        margin-bottom: 3px;
+      }
+    }
+    .card-category{
+      margin-bottom: 5px;
+    }
+  }
+    .card-body{
+      padding-left: 5px;
+      padding-right: 5px;
+      .tab-space{
+        padding: 0;
+      }
+    }
+  .table{
+    margin-bottom: 0;
+
+    td{
+      border-top: none;
+      border-bottom: 1px solid rgba($white,0.1);
+    }
+  }
+
+  .card-progress {
+    margin-top: 30px;
+    padding: 0 10px;
+  }
+
+  .chart-area {
+    height: 220px;
+    width: 100%;
+  }
+  .card-footer {
+    margin-top: 15px;
+
+    .stats{
+      color: $dark-gray;
+    }
+  }
+
+  .dropdown{
+    position: absolute;
+    right: 20px;
+    top: 20px;
+
+    .btn{
+      margin: 0;
+    }
+  }
+
+  &.card-chart-pie{
+    .chart-area{
+      padding: 10px 0 25px;
+      height: auto;
+    }
+
+    .card-title{
+      margin-bottom: 10px;
+      i{
+        font-size: 1rem;
+      }
+    }
+
+  }
+
+}

package/dist/assets/scss/black-dashboard-react/custom/cards/_card-map.scss

@@ -0,0 +1,3 @@
+.map {
+  height: 500px;
+}

package/dist/assets/scss/black-dashboard-react/custom/cards/_card-plain.scss

@@ -0,0 +1,16 @@
+.card-plain {
+  background: transparent;
+  box-shadow: none;
+
+  .card-header,
+  .card-footer {
+    margin-left: 0;
+    margin-right: 0;
+    background-color: transparent;
+  }
+
+  &:not(.card-subcategories).card-body {
+      padding-left: 0;
+      padding-right: 0;
+  }
+}

package/dist/assets/scss/black-dashboard-react/custom/cards/_card-task.scss

@@ -0,0 +1,30 @@
+.card-tasks {
+  height: 473px;
+
+  .table-full-width {
+    max-height: 410px;
+    position: relative;
+  }
+
+  .card-header {
+    .title {
+      margin-right: 20px;
+      font-weight: $font-weight-normal;
+    }
+
+    .dropdown {
+      float: right;
+      color: darken($white, 20%);
+    }
+  }
+
+  .card-body {
+    i {
+      color: $dark-gray;
+      font-size: 1.4em;
+      &:hover {
+        color: $white;
+      }
+    }
+  }
+}

package/dist/assets/scss/black-dashboard-react/custom/cards/_card-user.scss

@@ -0,0 +1,77 @@
+.card-user {
+  overflow: hidden;
+    .image {
+        height: 120px;
+    }
+
+    .author {
+        text-align: center;
+        text-transform: none;
+        margin-top: 25px;
+
+        a +  p.description {
+            margin-top: -7px;
+        }
+
+        .block {
+          position: absolute;
+          height: 100px;
+          width: 250px;
+          &.block-one {
+            @include linear-gradient-right(rgba($primary,0.6), rgba($primary,0));
+            @include nc-rotate(150deg,10);
+            margin-top: -90px;
+            margin-left: -50px;
+          }
+
+          &.block-two {
+            @include linear-gradient-right(rgba($primary,0.6), rgba($primary,0));
+            @include nc-rotate(30deg,10);
+            margin-top: -40px;
+            margin-left: -100px;
+          }
+
+          &.block-three {
+            @include linear-gradient-right(rgba($primary,0.6), rgba($primary,0));
+            @include nc-rotate(170deg,10);
+            margin-top: -70px;
+            right: -45px;
+
+          }
+
+          &.block-four {
+            @include linear-gradient-right(rgba($primary,0.6), rgba($primary,0));
+            @include nc-rotate(150deg,10);
+            margin-top: -25px;
+            right: -45px;
+
+          }
+        }
+    }
+
+    .avatar {
+      width: 124px;
+      height: 124px;
+      border: 5px solid lighten($black,5%);
+      border-bottom-color: $transparent-bg;
+      background-color: $transparent-bg;
+      position: relative;
+    }
+
+    .card-body {
+        min-height: 240px;
+    }
+
+    hr {
+        margin: 5px 15px;
+    }
+
+    .button-container {
+        margin-bottom: 6px;
+        text-align: center;
+    }
+
+    .card-description {
+      margin-top: 30px;
+    }
+}

package/dist/assets/scss/black-dashboard-react/custom/mixins/_alert.scss

@@ -0,0 +1,14 @@
+@mixin alert-variant($background, $border, $color) {
+    color: color-yiq($background);
+    // @include gradient-bg($background);
+    background-color: lighten($background, 0%);
+    border-color: $border;
+
+    hr {
+        border-top-color: darken($border, 5%);
+    }
+
+    .alert-link {
+        color: darken($color, 10%);
+    }
+}

package/dist/assets/scss/black-dashboard-react/custom/mixins/_background-variant.scss

@@ -0,0 +1,18 @@
+// Contextual backgrounds
+@mixin bg-variant($parent, $color) {
+    #{$parent} {
+        background-color: $color !important;
+    }
+    a#{$parent},
+    button#{$parent} {
+        @include hover-focus {
+            background-color: darken($color, 10%) !important;
+        }
+    }
+}
+
+@mixin bg-gradient-variant($parent, $color) {
+    #{$parent} {
+        background: linear-gradient(87deg, $color 0, adjust-hue($color, 25%) 100%) !important;
+    }
+}

package/dist/assets/scss/black-dashboard-react/custom/mixins/_badges.scss

@@ -0,0 +1,15 @@
+@mixin badge-variant($bg) {
+  color: color-yiq($bg);
+  background-color: $bg;
+
+  &[href] {
+    @include hover-focus {
+      color: color-yiq($bg);
+      text-decoration: none;
+      background-color: darken($bg, 3%);
+    }
+  }
+  .tagsinput-remove-link{
+      color: $white;
+  }
+}