release version 1.0.2-b255

dist/styles/_mw_ui.scss

@@ -0,0 +1,8 @@
+@import "mw-form/mw_form";
+@import "mw-inputs/mw_inputs";
+@import "mw-layout/mw_layout";
+@import "mw-list/mw_list";
+@import "mw-menu/mw_menu";
+@import "mw-modal/mw_modal";
+@import "mw-toast/mw_toast";
+@import "mw-ui-components/mw_ui_components";

dist/styles/mw-form/_mw_form.scss

@@ -0,0 +1,3 @@
+@import "styles/mixins";
+@import "styles/mw_checkbox_wrapper";
+@import "styles/mw_input_wrapper";

dist/styles/mw-form/styles/_mixins.scss

@@ -0,0 +1,12 @@
+@mixin required-input-highlighter($color) {
+  textarea,
+  input {
+    &:not([type=button]){
+      border-left: 3px solid $color;
+    }
+  }
+
+  input[type=button],button{
+    font-weight: bold;
+  }
+}

dist/styles/mw-form/styles/_mw_checkbox_wrapper.scss

@@ -0,0 +1,5 @@
+.mw-checkbox-wrapper{
+  .text-holder{
+    padding-left:5px;
+  }
+}

dist/styles/mw-form/styles/_mw_input_wrapper.scss

@@ -0,0 +1,62 @@
+.mw-input-wrapper{
+  &.input-inline {
+    width: inherit;
+    display: inline-block;
+  }
+
+  label {
+    font-weight: normal;
+  }
+
+  .input-holder{
+    min-height: 34px;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+
+    > * {
+      margin-top: 5px 0;
+    }
+  }
+
+  .mw-checkbox,
+  .mw-radio{
+    left: 0;
+  }
+
+  input,
+  textarea,
+  select,
+  .mw-select{
+    width: 100%;
+  }
+
+  .mw-error-messages{
+    ul{
+      padding: 0;
+    }
+    .error-message{
+      @extend .help-block;
+    }
+  }
+
+  &.is-required {
+    label {
+      font-weight: bold;
+    }
+  }
+
+  &.is-required-error {
+    @include required-input-highlighter(#bbb);
+  }
+
+  &.has-error {
+    @include required-input-highlighter($brand-danger);
+
+    .mw-error-messages{
+      .error-message{
+        color:$state-danger-text;
+      }
+    }
+  }
+}

dist/styles/mw-inputs/_mw_inputs.scss

@@ -0,0 +1,4 @@
+@import "styles/mixins";
+@import "styles/mw_checkbox";
+@import "styles/mw_radio";
+@import "styles/mw_select";

dist/styles/mw-inputs/styles/_mixins.scss

@@ -0,0 +1,68 @@
+%mw-radio-checkbox-mixin {
+  width: 18px;
+  height: 18px;
+  background: none;
+  display: inline-block;
+  border: 1px solid #ccc;
+  vertical-align: middle;
+  position: relative;
+  left: -2px;
+  padding: 3px;
+
+  .state-indicator {
+    display: inline-block;
+    vertical-align: top;
+    position: relative;
+    z-index: 0;
+
+    width: 0;
+    height: 0;
+    left: 50%;
+    top: 50%;
+    opacity: 0;
+    background: $brand-primary;
+
+    @include single-transition(all, 0.2s, cubic-bezier(0, .33, .79, 1.46));
+  }
+
+  input[type=checkbox],
+  input[type=radio] {
+    opacity: 0;
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 100%;
+    margin: 0;
+    z-index: 1;
+
+    &:disabled + .state-indicator{
+      background: #ccc;
+      left: -4px;
+      top: -4px;
+      height: 170%;
+      width: 170%;
+      opacity: 0.5;
+    }
+
+    &:checked + .state-indicator,
+    &:checked:disabled + .state-indicator{
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+      opacity: 1;
+    }
+
+    &:focus ~ .state-focus-indicator{
+      position: absolute;
+      left: 0;
+      top: 0;
+      height: 100%;
+      width: 100%;
+
+      $color-rgba: rgba(red($input-border-focus), green($input-border-focus), blue($input-border-focus), .6);
+      @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px $color-rgba);
+    }
+  }
+}

dist/styles/mw-inputs/styles/_mw_checkbox.scss

@@ -0,0 +1,3 @@
+.mw-checkbox{
+  @extend %mw-radio-checkbox-mixin;
+}

dist/styles/mw-inputs/styles/_mw_radio.scss

@@ -0,0 +1,10 @@
+.mw-radio{
+  @extend %mw-radio-checkbox-mixin;
+
+  border-radius: 50%;
+
+  .state-indicator,
+  .state-focus-indicator{
+    border-radius: 50%;
+  }
+}

dist/styles/mw-inputs/styles/_mw_select.scss

@@ -0,0 +1,34 @@
+.mw-select {
+  position: relative;
+  display: inline-block;
+
+  &:after {
+    font-family: FontAwesome;
+    content: "\f0dc";
+    position: absolute;
+    right: 10px;
+    top: 25%;
+    pointer-events: none;
+  }
+
+  select.custom {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    -o-appearance: none;
+    text-indent: 0.01px;
+    text-overflow: '';
+    position: relative;
+    padding: 6px 22px 6px 12px;
+  }
+
+  select::-ms-expand {
+    display: none;
+  }
+
+  select:invalid {
+    border-left: 3px solid #bbb;
+    font-weight: bold;
+  }
+
+}

dist/styles/mw-layout/_mw_layout.scss

@@ -0,0 +1,9 @@
+$sub-nav-background: #eee !default;
+$sub-nav-pill-divider: "1px solid #ccc";
+
+@import "styles/mw_column_layout";
+@import "styles/mw_header";
+@import "styles/mw_row";
+@import "styles/mw_row_layout";
+@import "styles/mw_sub_nav";
+@import "styles/mw_sub_nav_pill";

dist/styles/mw-layout/styles/_mw_column_layout.scss

@@ -0,0 +1,11 @@
+.mw-column-layout{
+  display: flex;
+  flex-direction: row;
+}
+
+@media (max-width: $screen-md) {
+
+  .mw-column-layout{
+    flex-direction: column;
+  }
+}

dist/styles/mw-layout/styles/_mw_header.scss

@@ -0,0 +1,116 @@
+$headerHeight: 61px !default;
+
+div[mw-header] {
+
+}
+
+.mw-header {
+  position: relative;
+  margin-bottom: 25px;
+
+  .fixed-content {
+    height: $headerHeight;
+    //position: fixed;
+    width: 100%;
+    left: 0;
+    z-index: 100;
+    background: rgba(255, 255, 255, 0.9);
+    display: -webkit-flex;
+    display: flex;
+    -webkit-align-items: center;
+    align-items: center;
+    border-bottom: 1px solid #e7e7e7;
+
+    .back-btn {
+      margin-right: 3px;
+      padding: 6px;
+      background: transparent;
+
+      i {
+        @include transition(color 0.5s ease);
+      }
+
+      &:hover {
+        i {
+          color: $brand-primary;
+        }
+      }
+    }
+
+    .title-holder {
+      display: -webkit-flex;
+      display: flex;
+      -webkit-flex-grow: 1;
+      flex-grow: 1;
+      overflow: hidden;
+      white-space: nowrap;
+
+      .header-icon {
+        margin-right: 2px;
+        padding-top: 2px;
+
+        i {
+          font-size: 19px;
+          vertical-align: middle;
+        }
+      }
+
+      h1 {
+        display: inline-block;
+        margin: 0;
+        -webkit-flex-grow: 2;
+        flex-grow: 2;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+    }
+  }
+
+  @media (max-width: $screen-sm) {
+    $smHeaderHeight: $headerHeight - 15;
+
+    .mw-header {
+      height: $smHeaderHeight;
+
+      .fixed-content {
+        height: $smHeaderHeight + 6;
+
+        .title-holder{
+          padding-top: 0;
+          .header-icon i{
+            font-size: 17px;
+            vertical-align: baseline;
+          }
+        }
+
+        .mw-bread-crumbs{
+
+          > *[mw-bread-crumb]:not(:last-child) {
+            display: none;
+          }
+        }
+      }
+
+    }
+  }
+
+  @media (max-width: $screen-xs) {
+    .mw-header{
+      .fixed-content {
+        .back-btn{
+          border: 1px solid #efefef;
+          padding: 0px 10px;
+          margin-right: 5px;
+          border-radius: $border-radius-base;
+        }
+
+        .mw-bread-crumbs{
+          > *[mw-bread-crumb]{
+            display: none;
+          }
+        }
+      }
+    }
+  }
+
+}

dist/styles/mw-layout/styles/_mw_row.scss

@@ -0,0 +1,5 @@
+.mw-row{
+  &[mw-extend]{
+    overflow: auto;
+  }
+}

dist/styles/mw-layout/styles/_mw_row_layout.scss

@@ -0,0 +1,4 @@
+.mw-row-layout{
+  display: flex;
+  flex-direction: column;
+}

dist/styles/mw-layout/styles/_mw_sub_nav.scss

@@ -0,0 +1,14 @@
+.mw-sub-nav {
+  margin-top: -8px;
+
+  .nav-pills {
+    margin-bottom: 14px;
+
+    &.nav-justified {
+      background: $sub-nav-background;
+      border-radius: $nav-pills-border-radius;
+      z-index: 2;
+      position: relative;
+    }
+  }
+}