@agilemotion/oui-react-js 0.1.0

package/src/lib/assets/scss/black-dashboard-react/custom/_input-group.scss

@@ -0,0 +1,333 @@
+.form-group.has-danger .error,
+.input-group.has-danger .error {
+  color: $danger-states;
+}
+
+
+.form-group.has-success .error,
+.input-group.has-success .error {
+  color: $success;
+}
+
+@include form-control-lg-padding($padding-lg-vertical, $padding-input-horizontal);
+@include input-base-padding($padding-input-vertical, $padding-input-horizontal);
+
+.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{
+
+        background-color: lighten($black,1%);
+        border: medium none;
+        &:focus,
+        &:active,
+        &:active{
+            border: medium none;
+            background-color: lighten($black,2%);
+        }
+    }
+
+    .form-control{
+        &:focus{
+            & + .input-group-prepend .input-group-text,
+            & + .input-group-append .input-group-text{
+                background-color: lighten($black,2%);
+            }
+        }
+    }
+
+    .input-group-prepend .input-group-text,
+    .input-group-append .input-group-text{
+        background-color: lighten($black,1%);;
+        border: none;
+    }
+}
+
+.has-error{
+    .form-control-feedback, .control-label{
+        color: $danger-states;
+    }
+}
+.has-success{
+    .form-control-feedback, .control-label{
+        color: $success;
+    }
+}
+
+.input-group-append .input-group-text,
+.input-group-prepend .input-group-text {
+    background-color: transparent;
+    border: 1px solid lighten($black,5%);
+    border-radius: $border-radius-lg;
+    color: $white;
+
+    & i{
+      opacity: .5;
+    }
+
+    @include transition-input-focus-color();
+
+    .has-danger.input-group-focus &{
+        background-color: $transparent-bg;
+    }
+
+    .has-success &{
+        background-color: $transparent-bg;
+    }
+    .has-danger .form-control:focus + &{
+        color: $danger-states;
+    }
+    .has-success .form-control:focus + &{
+        color: $success;
+    }
+
+    & + .form-control,
+    & ~ .form-control{
+        @include input-size($padding-base-vertical - 1, $padding-base-horizontal);
+        padding-left: 18px;
+    }
+
+    i{
+        width: 17px;
+    }
+}
+
+.input-group-append,
+.input-group-prepend .input-group-text,
+.input-group-prepend .input-group-text {
+    background-color: transparent;
+    border: 1px solid lighten($black,5%);
+    border-radius: $border-radius-lg;
+    color: $white;
+    margin: 0;
+}
+
+.input-group-append .input-group-text{
+  border-left: none;
+}
+.input-group-prepend .input-group-text{
+  border-right: none;
+}
+
+.input-group-focus{
+    .input-group-prepend .input-group-text,
+    .input-group-append .input-group-text{
+        background-color: $white;
+        border-color: $primary;
+        background-color: $transparent-bg;
+        border-color: $primary;
+    }
+
+    &.no-border{
+        .input-group-prepend .input-group-text,
+        .input-group-append .input-group-text{
+            background-color: lighten($black,2%);
+        }
+    }
+}
+
+.input-group,
+.form-group{
+    margin-bottom: 10px;
+    position: relative;
+
+    .form-control-static{
+        margin-top: 9px;
+    }
+}
+
+.input-group[disabled]{
+    .input-group-prepend .input-group-text,
+    .input-group-append .input-group-text{
+        background-color: $light-gray;
+    }
+}
+
+.input-group .form-control:not(:first-child):not(:last-child), .input-group-btn:not(:first-child):not(:last-child){
+    border-radius: $border-radius-lg;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    border-left: 0 none;
+}
+
+.input-group .form-control:first-child,
+.input-group-btn:first-child > .dropdown-toggle,
+.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
+    border-right: 0 none;
+}
+.input-group .form-control:last-child,
+.input-group-btn:last-child > .dropdown-toggle,
+.input-group-btn:first-child > .btn:not(:first-child) {
+    border-left: 0 none;
+}
+.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
+    background-color: $black-states;
+    color: $default;
+    cursor: not-allowed;
+}
+
+.input-group-btn .btn{
+    border-width: $border-thin;
+    padding: $padding-btn-vertical  $padding-base-horizontal;
+}
+.input-group-btn .btn-default:not(.btn-fill){
+    border-color: $medium-gray;
+}
+
+.input-group-btn:last-child > .btn{
+    margin-left: 0;
+}
+
+textarea.form-control{
+    max-width: 100%;
+    max-height: 80px;
+    padding: 10px 10px 0 0;
+    resize: none;
+    line-height: 2;
+}
+
+.has-success,
+.has-danger{
+
+    &.form-group .form-control,
+    &.form-group.no-border .form-control{
+        padding-right: $input-padding-horizontal + 21;
+    }
+}
+
+.form.form-newsletter .form-group{
+    float: left;
+    width: 78%;
+    margin-right: 2%;
+    margin-top: 9px;
+}
+
+.input-group .input-group-btn{
+    padding: 0 12px;
+}
+
+// Input files - hide actual input - requires specific markup in the sample.
+.form-group input[type=file] {
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 100;
+}
+
+.form-text{
+    font-size: $font-size-sm;
+    color: rgba($white,0.8);
+}
+
+.form-control-lg{
+    padding: 0;
+    font-size: inherit;
+    line-height: 0;
+    border-radius: 0;
+
+    .form-control {
+      height: calc(2.875rem + 2px);
+    }
+}
+
+.form-horizontal{
+    .col-form-label,
+    .label-on-right{
+        padding: 10px 5px 0 15px;
+        text-align: right;
+        max-width: 180px;
+    }
+
+    .checkbox-radios{
+        margin-bottom: 15px;
+
+        .form-check:first-child{
+           margin-top: 8px;
+       }
+    }
+
+    .label-on-right{
+        text-align: left;
+        padding: 10px 15px 0 5px;
+    }
+
+    .form-check-inline{
+        margin-top: 6px;
+        .form-check-label{
+          margin-right: 1.5rem;
+        }
+    }
+}
+
+.search-bar{
+    margin-left: $margin-lg-vertical;
+      .btn{
+        margin: 0;
+      }
+       &.input-group{
+           border-radius: 25px;
+           z-index: 4;
+           margin-bottom: 0;
+           height: 43px;
+           padding-right: 5px;
+           .input-group-addon{
+              padding: 10px;
+               background: transparent;
+               border: none;
+               color: rgba(255, 255, 255, 0.7);
+
+           }
+
+           i{
+               font-size: 20px;
+               color: $white;
+               margin-top: 0 !important;
+           }
+           input{
+               background: transparent;
+               border:none !important;
+               border-radius: 0;
+               padding: 12px !important;
+               font-size: 12px;
+               opacity: 0.5;
+               &:focus{
+                   background: transparent;
+               }
+           }
+           .form-control{
+               opacity: 1;
+               color: $white;
+               &::placeholder{
+                 color: white;
+               }
+           }
+       }
+   }
+
+   .modal-search .modal-dialog{
+     max-width: 1000px;
+     margin: 20px auto;
+     .form-control{
+       border: none;
+       color: $black;
+       &::placeholder{
+         color: $black;
+       }
+     }
+   }
+
+.input-group-prepend{
+  margin-right: 0;
+}
+.input-group-prepend,
+.input-group-append {
+  .tim-icons {
+    font-size: $font-paragraph;
+  }
+}

package/src/lib/assets/scss/black-dashboard-react/custom/_misc.scss

@@ -0,0 +1,228 @@
+
+/* Animations */
+.nav-pills .nav-link,
+.navbar,
+.nav-tabs .nav-link,
+.sidebar .nav a,
+.sidebar .nav a i,
+.sidebar .nav p,
+.navbar-collapse .navbar-nav .nav-link,
+.animation-transition-general,
+.tag,
+.tag [data-role="remove"],
+.animation-transition-general{
+    @include transitions($general-transition-time, $transition-ease);
+}
+
+//transition for dropdown caret
+.bootstrap-switch-label:before,
+.caret{
+    @include transitions($fast-transition-time, $transition-ease);
+}
+
+.dropdown-toggle[aria-expanded="true"]:after,
+a[data-toggle="collapse"][aria-expanded="true"] .caret,
+.card-collapse .card a[data-toggle="collapse"][aria-expanded="true"] i,
+.card-collapse .card a[data-toggle="collapse"].expanded i{
+    @include rotate-neg360();
+}
+
+.caret{
+  width: 0;
+  height: 0;
+  vertical-align: middle;
+  border-top: 4px dashed;
+  border-right: 4px solid transparent;
+  border-left: 4px solid transparent;
+  position: absolute;
+  top: 30px;
+  margin-left: 5px;
+}
+
+.pull-left{
+  float: left;
+}
+.pull-right{
+  float: right;
+}
+
+
+// card user profile page
+
+.card {
+  form {
+    label + .form-control {
+      margin-bottom: 20px;
+    }
+  }
+}
+
+.card {
+  .map-title {
+    color: $white;
+  }
+
+  &.card-chart {
+    .gmnoprint,
+    .gm-style-cc {
+      display: none !important;
+    }
+  }
+}
+
+// documentation
+
+.bd-docs {
+
+  h1,h2,h3,h4,h5,h6,p,ul li,ol li{
+    color:#2c2c2c;
+  }
+
+
+  .bd-content>table>thead>tr>th {
+    color: $black;
+
+  }
+
+  .blockquote, .blockquote p, .card p{
+    color: rgba($white,0.8);
+  }
+  .bd-example {
+    background: linear-gradient(#1e1e2f,#1e1e24);
+
+  }
+
+  .navbar {
+    border-top: none;
+
+    .navbar-nav .nav-link {
+      color: rgba(255,255,255,.8) !important;
+    }
+  }
+
+  .bd-example {
+
+    .btn{
+      margin: 4px 0;
+    }
+    .btn .badge {
+      display: inline-block;
+    }
+
+    .tim-icons{
+      color: $white;
+    }
+
+    .popover .popover-header {
+    color: hsla(0,0%,71%,.6);
+  }
+
+
+    .popover-body {
+      p {
+        color: $gray-900;
+      }
+    }
+
+    &.tooltip-demo p{
+      color: rgba($white,.8);
+    }
+  }
+
+  .card.card-body,
+  .card .card-body {
+    color: hsla(0,0%,100%,.8);
+  }
+
+  label,
+  .form-check {
+    color: hsla(0,0%,100%,.8);
+  }
+
+  .form-check + .btn {
+    margin-top: 20px;
+  }
+
+  .bd-example,
+  table {
+    thead th {
+      color: hsla(0,0%,100%,.8);
+    }
+
+    h1, h2, h3, h4, h5, h6,
+    .h1, .h2, .h3, .h4, .h5, .h6 {
+      color: hsla(0,0%,100%,.8);
+    }
+
+    .datepicker{
+      thead th, table thead th,.tim-icons{
+        color: $primary;
+      }
+
+    }
+
+    .picker-switch .tim-icons{
+      color: $primary;
+    }
+  }
+
+  .footer {
+    .container-fluid > nav {
+      display: inline-block;
+    }
+  }
+}
+.modal.show .modal-dialog {
+  -webkit-transform: translate(0,30%);
+  transform: translate(0,30%);
+}
+
+code {
+  color: $pink;
+}
+
+@media screen and (max-width: 991px){
+    .profile-photo .profile-photo-small{
+        margin-left: -2px;
+    }
+
+    .button-dropdown{
+        display: none;
+    }
+
+    #searchModal .modal-dialog{
+      margin: 20px;
+    }
+
+    #minimizeSidebar{
+        display: none;
+    }
+
+}
+
+
+@media screen and (max-width: 768px){
+
+    .landing-page .section-story-overview .image-container:nth-child(2){
+        margin-left: 0;
+        margin-bottom: 30px;
+    }
+
+}
+
+@media screen and (max-width: 576px){
+    .page-header{
+        .container h6.category-absolute{
+            width: 90%;
+        }
+    }
+
+    .form-horizontal .col-form-label, .form-horizontal .label-on-right{
+      text-align: inherit;
+      padding-top: 0;
+      code{
+        padding: 0 10px;
+      }
+    }
+
+}

package/src/lib/assets/scss/black-dashboard-react/custom/_mixins.scss

@@ -0,0 +1,15 @@
+@import "mixins/alert.scss";
+@import "mixins/badges.scss";
+@import "mixins/background-variant.scss";
+@import "mixins/buttons.scss";
+@import "mixins/forms.scss";
+@import "mixins/icon.scss";
+@import "mixins/modals.scss";
+@import "mixins/popovers.scss";
+@import "mixins/page-header.scss";
+@import "mixins/vendor-prefixes.scss";
+@import "mixins/opacity.scss";
+@import "mixins/modals.scss";
+@import "mixins/inputs.scss";
+@import "mixins/dropdown.scss";
+@import "mixins/wizard.scss";

package/src/lib/assets/scss/black-dashboard-react/custom/_modal.scss

@@ -0,0 +1,161 @@
+// Modals
+// Design element Dialogs
+// --------------------------------------------------
+.modal-content {
+  border: 0;
+
+  // Modal header
+  // Top section of the modal w/ title and dismiss
+
+  .modal-header {
+    border-bottom: none;
+
+    & button {
+        position: absolute;
+        right: 27px;
+        top: 24px;
+        outline: 0;
+        padding: 1rem;
+        margin: -1rem -1rem -1rem auto;
+    }
+    .title{
+        color: $black;
+        margin-top: 5px;
+        margin-bottom: 0;
+    }
+
+    .modal-title{
+      color: $black;
+    }
+
+    i.tim-icons {
+      font-size: 16px;
+    }
+  }
+
+
+  // Modal body
+  // Where all modal content resides (sibling of .modal-header and .modal-footer)
+  .modal-body {
+    line-height: 1.9;
+
+    p{
+      color: $black;
+    }
+  }
+  // Footer (for actions)
+  .modal-footer {
+    border-top: 0;
+    -webkit-justify-content: space-between; /* Safari 6.1+ */
+    justify-content: space-between;
+
+    button {
+      margin: 0;
+      padding-left: 16px;
+      padding-right: 16px;
+      width: auto;
+
+      &.pull-left {
+        padding-left: 5px;
+        padding-right: 5px;
+        position: relative;
+        left: -5px;
+      }
+    }
+
+  }
+  .modal-body + .modal-footer {
+    padding-top: 0;
+  }
+}
+.modal-backdrop {
+  background: rgba(0,0,0,0.3);
+}
+
+.modal{
+
+    &.modal-default{
+        @include modal-colors($white, $black);
+    }
+
+    &.modal-primary{
+        @include modal-colors($primary, $white);
+    }
+
+    &.modal-danger{
+        @include modal-colors($danger, $white);
+    }
+
+    &.modal-warning{
+        @include modal-colors($warning, $white);
+    }
+
+    &.modal-success{
+        @include modal-colors($success, $white);
+    }
+
+    &.modal-info{
+        @include modal-colors($info, $white);
+    }
+
+    .modal-header .close{
+        color: $danger;
+        text-shadow: none;
+
+        &:hover,
+        &:focus{
+            opacity: 1;
+        }
+    }
+
+    &.modal-black{
+      .modal-content{
+        background: linear-gradient(to bottom, $black 0%, $black-states 100%);
+        color: rgba($white, 0.8);
+        .modal-header{
+          .modal-title, .title{
+            color: rgba($white, 0.9);
+          }
+        }
+        .modal-body{
+          p{
+            color: rgba($white, 0.8);
+          }
+        }
+      }
+      h1, h2, h3, h4, h5, h6, p{
+        color: $white;
+      }
+    }
+}
+
+.modal-search{
+  .modal-dialog{
+    margin: 20px auto;
+    max-width: 650px;
+    input{
+      border: none;
+      font-size: 17px;
+      font-weight: 100;
+    }
+    span{
+      font-size: 35px;
+      color: $search-gray;
+    }
+  }
+  .modal-content{
+    .modal-header{
+      padding: 24px;
+    }
+  }
+
+  .modal-header .close{
+    color: $dark-background;
+    top: 30px !important;
+  }
+
+  .modal-footer{
+    border-top: 2px solid #f9f9f9;
+    margin: 0px 25px 20px;
+  }
+}