material-sass 1.4.1 → 4.0.0.alpha5

data/app/assets/stylesheets/material/material/_selection-control.scss

@@ -0,0 +1,221 @@
+.custom-control {
+  cursor: pointer;
+  display: inline;
+  font-size: $font-size-base;
+  padding-left: ($selection-control-indicator-size / $font-size-root + $selection-control-spacer-x);
+  position: relative;
+
+  + .custom-control {
+    margin-left: ($selection-control-spacer-x * 2);
+  }
+}
+
+.custom-control-indicator {
+  background-position: 50% 50%;
+  background-repeat: no-repeat;
+  background-size: $selection-control-indicator-size;
+  display: block;
+  height: $selection-control-indicator-size;
+  line-height: $selection-control-indicator-size;
+  position: absolute;
+    top: (($font-size-base - $selection-control-indicator-size / $font-size-root) / 2);
+    left: 0;
+  text-align: center;
+  user-select: none;
+  width: $selection-control-indicator-size;
+
+  &::before {
+    background-color: $selection-control-radial-bg;
+    border-radius: 50%;
+    content: "";
+    display: block;
+    height: ($selection-control-indicator-size * 2);
+    margin-top: ($selection-control-indicator-size / -2);
+    margin-left: ($selection-control-indicator-size / -2);
+    opacity: 0;
+    position: absolute;
+      top: 0;
+      left: 0;
+    width: ($selection-control-indicator-size * 2);
+    z-index: -1;
+    @include transition-standard(background-color, opacity, transform);
+  }
+
+  // active, focus, hover
+    &:active::before {
+      opacity: 1;
+    }
+}
+
+.custom-control-input {
+  opacity: 0;
+  position: absolute;
+  z-index: -1;
+
+  // active, focus, hover
+    &:focus ~ .custom-control-indicator::before {
+      opacity: 1;
+    }
+
+  // checked
+    &:checked ~ .custom-control-indicator::before {
+      background-color: hex-to-rgba($selection-control-color-active, 0.12);
+    }
+
+  // disabled
+    &:disabled ~ {
+      .custom-control-indicator,
+      .custom-control-description {
+        color: $selection-control-color-disabled;
+        cursor: $cursor-disabled;
+      }
+
+      .custom-control-indicator {
+        pointer-events: none;
+
+        &::before {
+          display: none;
+        }
+      }
+    }
+}
+
+// stacked layout
+  .custom-controls-stacked {
+    // .custom-control-indicator {
+    //   // position
+    //     top: (($font-size-base * $line-height-base - ($selection-control-indicator-size) / $font-size-root) / 2);
+    // }
+    .custom-control {
+      &::after {
+        content: "";
+        display: block;
+        margin-bottom: $selection-control-spacer-y;
+      }
+
+      &:last-child::after {
+        display: none;
+      }
+
+      + .custom-control {
+        margin-left: 0;
+      }
+    }
+  }
+
+//
+// checkbox
+//
+  .custom-checkbox {
+    .custom-control-indicator {
+      background-image: $selection-control-checkbox-bg;
+    }
+
+    .custom-control-input {
+      // checked
+        &:checked ~ .custom-control-indicator {
+          background-image: $selection-control-checkbox-bg-checked;
+        }
+
+      // disabled
+        &:disabled {
+          ~ .custom-control-indicator {
+            background-image: $selection-control-checkbox-bg-disabled;
+          }
+
+          &:checked ~ .custom-control-indicator {
+            background-image: $selection-control-checkbox-bg-disabled-checked;
+          }
+        }
+
+      // indeterminate
+        &:indeterminate ~ .custom-control-indicator {
+          background-image: $selection-control-checkbox-bg-indeterminate;
+        }
+    }
+  }
+
+//
+// radio button
+//
+  .custom-radio {
+    .custom-control-indicator {
+      background-image: $selection-control-radio-bg;
+    }
+
+    .custom-control-input {
+      // checked
+        &:checked ~ .custom-control-indicator {
+          background-image: $selection-control-radio-bg-checked;
+        }
+
+      // disabled
+        &:disabled {
+          ~ .custom-control-indicator {
+            background-image: $selection-control-radio-bg-disabled;
+          }
+
+          &:checked ~ .custom-control-indicator {
+            background-image: $selection-control-radio-bg-disabled-checked;
+          }
+        }
+    }
+  }
+
+//
+// switch
+//
+  .custom-switch {
+    padding-left: ($selection-control-track-width / $font-size-root + $selection-control-spacer-x);
+
+    .custom-control-indicator {
+      background-clip: content-box;
+      background-color: $selection-control-track-bg;
+      border: (($selection-control-indicator-size - $selection-control-track-height) / 2) solid transparent;
+      border-radius: $selection-control-track-height;
+      width: $selection-control-track-width;
+      @include transition-standard(background-color);
+
+      &::after,
+      &::before {
+        // position
+          top: (($selection-control-indicator-size - $selection-control-track-height) / -2);
+          left: (($selection-control-indicator-size - $selection-control-track-height) / -2);
+      }
+      &::after {
+        background-color: $selection-control-thumb-bg;
+        border-radius: 50%;
+        box-shadow: $selection-control-thumb-shadow;
+        content: "";
+        display: block;
+        height: $selection-control-indicator-size;
+        position: absolute;
+        width: $selection-control-indicator-size;
+        @include transition-standard(background-color, transform);
+      }
+    }
+
+    .custom-control-input {
+      // checked
+        &:checked ~ .custom-control-indicator {
+          background-color: hex-to-rgba($selection-control-color-active, 0.5);
+
+          &::after,
+          &::before {
+            transform: translateX($selection-control-track-width - $selection-control-indicator-size);
+          }
+          &::after {
+            background-color: $selection-control-color-active;
+          }
+        }
+
+      // disabled
+        &:disabled ~ .custom-control-indicator {
+          background-color: $selection-control-track-bg-disabled;
+
+          &::after {
+            background-color: $selection-control-thumb-bg-disabled;
+          }
+        }
+    }
+  }

data/app/assets/stylesheets/material/material/_stepper.scss

@@ -0,0 +1,135 @@
+//
+// todo: only non-clickable stepper is supported for now
+//
+
+.stepper {
+  align-items: center;
+  background-color: $stepper-bg;
+  display: flex;
+  flex-shrink: 0;
+  overflow: hidden;
+  padding: $stepper-padding-y $stepper-padding-x;
+  position: relative;
+
+  &::after,
+  &::before {
+    border-top: $stepper-border-width solid $stepper-border-color;
+    content: "";
+    display: block;
+    position: absolute;
+  }
+
+  &:first-child::before {
+    display: none;
+  }
+
+  &:last-child::after {
+    display: none;
+  }
+}
+
+// variation
+  .stepper-horiz {
+    background-color: $stepper-bg;
+    display: flex;
+    justify-content: space-between;
+    overflow-x: auto;
+    overflow-y: hidden;
+    position: relative;
+    -webkit-overflow-scrolling: touch;
+
+    &:before {
+      border-top: $stepper-border-width solid $stepper-border-color;
+      content: "";
+      display: block;
+      position: absolute;
+        top: 50%;
+        right: $stepper-padding-x;
+        left: $stepper-padding-x;
+    }
+
+    .stepper {
+      &::after,
+      &::before {
+        border-top: $stepper-border-width solid $stepper-border-color;
+        // position
+          top: 50%;
+        width: ($stepper-padding-x - $stepper-inner-spacer);
+      }
+      &::after {
+        // position
+          right: 0;
+      }
+      &::before {
+        // position
+          left: 0;
+      }
+    }
+  }
+
+  .stepper-vert {
+    background-color: $stepper-bg;
+    position: relative;
+
+    .stepper {
+      &::after,
+      &::before {
+        border-left: $stepper-border-width solid $stepper-border-color;
+        height: ($stepper-padding-y - $stepper-inner-spacer);
+        // position
+          left: ($stepper-icon-height / 2 + $stepper-padding-x);
+      }
+      &::after {
+        // position
+          bottom: 0;
+      }
+      &::before {
+        // position
+          top: 0;
+      }
+    }
+  }
+
+//
+// misc
+//
+  .stepper-icon {
+    background-color: $stepper-icon-bg;
+    border-radius: 50%;
+    color: $stepper-icon-color;
+    font-size: $stepper-icon-font-size;
+    font-weight: $stepper-icon-font-weight;
+    height: $stepper-icon-height;
+    line-height: $stepper-icon-height;
+    margin-right: $stepper-inner-spacer;
+    position: relative;
+    text-align: center;
+    vertical-align: middle;
+    width: $stepper-icon-height;
+
+    .stepper.active &,
+    .stepper.done & {
+      background-color: $stepper-icon-bg-active;
+      color: $stepper-icon-color-active;
+    }
+  }
+
+  .stepper-text {
+    color: $stepper-text-color;
+    font-size: $stepper-text-font-size;
+    font-weight: $stepper-text-font-weight;
+    position: relative;
+
+    .stepper.active &,
+    .stepper.done & {
+      color: $stepper-text-color-active;
+    }
+
+    .stepper.active & {
+      font-weight: bolder;
+    }
+  }
+
+  .stepper-text-sub {
+    font-weight: $font-weight-regular;
+  }

data/app/assets/stylesheets/material/material/_tab.scss

@@ -0,0 +1,196 @@
+//
+// todo: tabs with icons
+//
+
+.nav-tabs {
+  line-height: 0;
+  position: relative;
+
+  @if $enable-flex {
+    display: flex;
+    flex-wrap: none;
+  } @else {
+    letter-spacing: -0.25em;
+    white-space: nowrap;
+  }
+
+  .nav-item {
+    line-height: 0;
+
+    @if not $enable-flex {
+      display: inline-block;
+      letter-spacing: normal;
+      white-space: normal;
+    }
+  }
+
+  .nav-link {
+    color: inherit;
+    font-size: $nav-tab-link-font-size;
+    font-weight: $nav-tab-link-font-weight;
+    line-height: 1;
+    opacity: $nav-tab-link-opacity;
+    padding: (($nav-tab-link-height - $nav-tab-link-font-size * 2) / 2) $nav-tab-link-padding-x;
+    text-transform: uppercase;
+    @include transition-standard(background-color, opacity);
+
+    &::before {
+      background-color: $nav-tab-indicator-bg;
+      content: "";
+      display: block;
+      height: $nav-tab-indicator-height;
+      opacity: 0;
+      position: absolute;
+        right: 0;
+        bottom: 0;
+        left: 0;
+      @include transition-standard(opacity);
+    }
+
+    @if $enable-flex {
+      align-items: center;
+      display: flex;
+      height: 100%;
+      justify-content: center;
+      min-height: $nav-tab-link-height;
+    } @else {
+      display: table-cell;
+      height: $nav-tab-link-height;
+      text-align: center;
+      vertical-align: middle;
+    }
+
+    @include media-breakpoint-up(lg) {
+      padding-right: $nav-tab-link-padding-x-lg;
+      padding-left: $nav-tab-link-padding-x-lg;
+    }
+
+    // active, focus, hover
+      @include active-focus-hover {
+        background-color: $nav-link-bg-active;
+      }
+
+      &:active,
+      &.active {
+        opacity: 1;
+      }
+
+      &.active {
+        &::before {
+          opacity: 1;
+        }
+      }
+
+    // disabled
+      &.disabled {
+        background-color: transparent;
+        color: $nav-link-color-disabled;
+        opacity: 1;
+      }
+  }
+}
+
+.nav-tabs-material {
+  .nav-link {
+    &::before {
+      transition: none;
+    }
+
+    // active, focus, hover
+      &.active::before {
+        transition-delay: $transition-duration;
+        transition-duration: 0s;
+        transition-property: opacity;
+      }
+  }
+}
+
+// variation
+  .nav-tabs-bordered {
+    box-shadow: 0 1px 0 $nav-tab-border-color;
+  }
+
+  .nav-tabs-centered {
+    @if $enable-flex {
+      justify-content: center;
+    } @else {
+      text-align: center;
+    }
+  }
+
+  .nav-tabs-fixed {
+    @if $enable-flex {
+      .nav-item {
+        flex-basis: 0;
+        flex-grow: 1;
+        min-width: $nav-tab-link-min-width;
+        @include media-breakpoint-up(lg) {
+          min-width: $nav-tab-link-min-width-lg;
+        }
+      }
+    } @else {
+      letter-spacing: normal;
+      width: 100%;
+
+      .nav-item {
+        display: table-cell;
+        min-width: $nav-tab-link-min-width;
+        width: 1%;
+      }
+
+      .nav-link {
+        max-width: 100%;
+        width: 99999px;
+      }
+    }
+
+    .nav-link {
+      @include text-truncate;
+    }
+  }
+
+  .nav-tabs-scrollable {
+    overflow-x: auto;
+    overflow-y: hidden;
+    -webkit-overflow-scrolling: touch;
+
+    .nav-link {
+      max-width: $nav-tab-link-max-width;
+      @include text-truncate;
+
+      @if $enable-flex {
+        min-width: $nav-tab-link-min-width;
+        @include media-breakpoint-up(lg) {
+          min-width: $nav-tab-link-min-width-lg;
+        }
+      } @else {
+        width: $nav-tab-link-min-width;
+        @include media-breakpoint-up(lg) {
+          width: $nav-tab-link-min-width-lg;
+        }
+      }
+    }
+  }
+
+//
+// indicator
+//
+  .nav-tabs-indicator {
+    background-color: $nav-tab-indicator-bg;
+    height: $nav-tab-indicator-height;
+    display: none;
+    position: absolute;
+      bottom: 0;
+
+    &.animate {
+      transition: left ($transition-duration / 2) $transition-timing-function-standard ($transition-duration / 2), right $transition-duration $transition-timing-function-standard;
+
+      &.reverse {
+        transition: left $transition-duration $transition-timing-function-standard, right ($transition-duration / 2) $transition-timing-function-standard ($transition-duration / 2);
+      }
+    }
+
+    &.in {
+      display: block;
+    }
+  }