material_components_web-sass 0.1.1

data/vendor/assets/stylesheets/@material/menu/mdc-menu.scss

@@ -0,0 +1,22 @@
+/**
+ * Copyright 2016 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@import "./simple/mdc-simple-menu";
+
+.mdc-menu-anchor {
+  position: relative;
+  overflow: visible;
+}

data/vendor/assets/stylesheets/@material/menu/simple/mdc-simple-menu.scss

@@ -0,0 +1,194 @@
+/**
+ * Copyright 2016 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@import "@material/animation/variables";
+@import "@material/elevation/mixins";
+@import "@material/theme/mixins";
+@import "@material/typography/mixins";
+
+$mdc-simple-menu-fade-duration: .2s;
+$mdc-simple-menu-item-fade-duration: .3s;
+
+/* postcss-bem-linter: define simple-menu */
+.mdc-simple-menu {
+  display: none;
+  position: absolute;
+  max-width: calc(100vw - 32px);
+  max-height: calc(100vh - 32px);
+  margin: 0;
+  padding: 0;
+  transform: scale(0);
+  transform-origin: top left;
+  border-radius: 2px;
+  background-color: white;
+  white-space: nowrap;
+  opacity: 0;
+  overflow: hidden;
+  box-sizing: border-box;
+  will-change: transform, opacity;
+
+  @include mdc-elevation(2);
+
+  @include mdc-theme-dark {
+    background-color: #424242;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &--open {
+    display: inline-block;
+    transform: scale(1);
+    opacity: 1;
+  }
+
+  &--animating {
+    display: inline-block;
+    transition: opacity $mdc-simple-menu-fade-duration $mdc-animation-linear-out-slow-in-timing-function;
+  }
+
+  &__items {
+    display: inline-block;
+    overflow-x: hidden;
+    overflow-y: auto;
+    box-sizing: border-box;
+    will-change: transform;
+
+    /* stylelint-disable plugin/selector-bem-pattern, selector-no-universal */
+    > * {
+      opacity: 0;
+    }
+
+    > .mdc-list-item {
+      cursor: pointer;
+    }
+
+    .mdc-simple-menu--animating & {
+      overflow-y: hidden;
+      > * {
+        transition-duration: $mdc-simple-menu-item-fade-duration;
+        transition-property: opacity;
+        transition-timing-function: $mdc-animation-linear-out-slow-in-timing-function;
+      }
+    }
+
+    .mdc-simple-menu--open & {
+      > * {
+        opacity: 1;
+        will-change: opacity;
+      }
+    }
+    /* stylelint-enable plugin/selector-bem-pattern, selector-no-universal */
+  }
+
+  /* stylelint-disable plugin/selector-bem-pattern */
+  [dir="rtl"] & {
+    transform-origin: top right;
+  }
+  /* stylelint-enable plugin/selector-bem-pattern */
+
+  // Note: it's appropriate to use `!important` for these since:
+  // - they override defaults at several levels of specificity;
+  // - they're optional classes that are purposely added by the developer to obtain a desired behaviour.
+  &--open-from-top-left {
+    transform-origin: top left !important;
+  }
+
+  &--open-from-top-right {
+    transform-origin: top right !important;
+  }
+
+  &--open-from-bottom-left {
+    transform-origin: bottom left !important;
+  }
+
+  &--open-from-bottom-right {
+    transform-origin: bottom right !important;
+  }
+
+  /* stylelint-disable plugin/selector-bem-pattern */
+  .mdc-list-group,
+  .mdc-list {
+    padding: 0;
+  }
+
+  .mdc-list-item {
+    position: relative;
+    padding: 0 16px;
+    outline: none;
+    color: inherit;
+    text-decoration: none;
+
+    @include mdc-typography(body2);
+
+    @include mdc-theme-dark(".mdc-simple-menu", true) {
+      color: white;
+    }
+  }
+
+  .mdc-list-divider {
+    @include mdc-theme-dark(".mdc-simple-menu", true) {
+      border-color: rgba(white, .12);
+    }
+  }
+
+  .mdc-list-item__start-detail {
+    color: rgba(black, .54);
+
+    @include mdc-theme-dark(".mdc-simple-menu", true) {
+      color: rgba(white, .54);
+    }
+  }
+
+  /* stylelint-disable selector-no-qualifying-type */
+  &--selected.mdc-list-item,
+  &--selected.mdc-list-item .mdc-list-item__start-detail {
+    @include mdc-theme-prop(color, primary);
+  }
+  /* stylelint-enable selector-no-qualifying-type */
+
+  /* TODO(sgomes): Revisit when we have interactive lists. */
+  .mdc-list-item::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    transition: opacity 120ms $mdc-animation-linear-out-slow-in-timing-function;
+    border-radius: inherit;
+    background: currentColor;
+    content: "";
+    opacity: 0;
+  }
+
+  .mdc-list-item:focus::before {
+    opacity: .12;
+  }
+
+  .mdc-list-item:active::before {
+    /*
+      Slightly darker value for visual distinction.
+      This allows a full base that has distinct modes.
+      Progressive enhancement with ripples will provide complete button spec alignment.
+    */
+    opacity: .18;
+  }
+
+  /* stylelint-enable plugin/selector-bem-pattern */
+}
+
+/* postcss-bem-linter: end */

data/vendor/assets/stylesheets/@material/radio/mdc-radio.scss

@@ -0,0 +1,198 @@
+/**
+ * Copyright 2016 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@import "@material/animation/functions";
+@import "@material/ripple/mixins";
+@import "@material/theme/mixins";
+
+$mdc-radio-touch-area: 40px;
+$mdc-radio-ui-size: 20px;
+$mdc-radio-ui-pct: percentage($mdc-radio-ui-size / $mdc-radio-touch-area);
+$mdc-radio-transition-duration: 120ms;
+
+@function mdc-radio-enter($name) {
+  @return mdc-animation-enter($name, $mdc-radio-transition-duration);
+}
+
+@function mdc-radio-exit($name) {
+  @return mdc-animation-exit($name, $mdc-radio-transition-duration);
+}
+
+/* postcss-bem-linter: define radio */
+.mdc-radio {
+  display: inline-block;
+  position: relative;
+  box-sizing: border-box;
+  width: $mdc-radio-touch-area;
+  height: $mdc-radio-touch-area;
+  padding: ($mdc-radio-touch-area - $mdc-radio-ui-size) / 2;
+  cursor: pointer;
+  will-change: opacity, transform, border-color, background-color, color;
+
+  // Container for radio circles and ripple.
+  &__background {
+    display: inline-block;
+    position: absolute;
+    width: $mdc-radio-ui-pct;
+    height: $mdc-radio-ui-pct;
+    box-sizing: border-box;
+
+    &::before {
+      @include mdc-theme-prop(background-color, primary);
+
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      transform: scale(0, 0);
+      transition: mdc-radio-exit(opacity), mdc-radio-exit(transform);
+      border-radius: 50%;
+      content: "";
+      opacity: 0;
+      pointer-events: none;
+    }
+  }
+
+  &__outer-circle {
+    @include mdc-theme-prop(border-color, text-secondary-on-light);
+
+    @include mdc-theme-dark(".mdc-radio") {
+      @include mdc-theme-prop(border-color, text-secondary-on-dark);
+    }
+
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    transition: mdc-radio-exit(border-color);
+    border-width: 2px;
+    border-style: solid;
+    border-radius: 50%;
+    box-sizing: border-box;
+  }
+
+  &__inner-circle {
+    @include mdc-theme-prop(background-color, text-secondary-on-light);
+
+    @include mdc-theme-dark(".mdc-radio") {
+      @include mdc-theme-prop(background-color, text-secondary-on-dark);
+    }
+
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    transform: scale(0, 0);
+    transition: mdc-radio-exit(transform), mdc-radio-exit(background-color);
+    border-radius: 50%;
+    box-sizing: border-box;
+  }
+
+  &__native-control {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    cursor: inherit;
+    opacity: 0;
+    z-index: 1;
+  }
+}
+
+.mdc-radio__native-control:checked,
+.mdc-radio__native-control:disabled {
+  + .mdc-radio__background {
+    transition: mdc-radio-enter(opacity), mdc-radio-enter(transform);
+
+    .mdc-radio__outer-circle {
+      transition: mdc-radio-enter(border-color);
+    }
+
+    .mdc-radio__inner-circle {
+      transition: mdc-radio-enter(transform), mdc-radio-enter(background-color);
+    }
+  }
+}
+
+.mdc-radio--disabled {
+  cursor: default;
+  pointer-events: none;
+}
+
+.mdc-radio__native-control:checked {
+  + .mdc-radio__background {
+    .mdc-radio__outer-circle {
+      @include mdc-theme-prop(border-color, primary);
+    }
+
+    .mdc-radio__inner-circle {
+      @include mdc-theme-prop(background-color, primary);
+
+      transform: scale(.5);
+      transition: mdc-radio-enter(transform), mdc-radio-enter(background-color);
+    }
+  }
+}
+
+.mdc-radio__native-control:disabled,
+fieldset:disabled .mdc-radio__native-control,
+[aria-disabled="true"] .mdc-radio__native-control {
+  + .mdc-radio__background {
+    cursor: default;
+
+    .mdc-radio__outer-circle {
+      border-color: rgba(black, .26);
+
+      @include mdc-theme-dark(".mdc-radio") {
+        border-color: rgba(white, .3);
+      }
+    }
+
+    .mdc-radio__inner-circle {
+      background-color: rgba(black, .26);
+
+      @include mdc-theme-dark(".mdc-radio") {
+        background-color: rgba(white, .3);
+      }
+    }
+  }
+}
+
+.mdc-radio__native-control:focus {
+  + .mdc-radio__background::before {
+    transform: scale(2.8, 2.8);
+    transition: mdc-radio-enter(opacity), mdc-radio-enter(transform);
+    opacity: .26;
+  }
+}
+
+/* postcss-bem-linter: end */
+
+.mdc-radio.mdc-ripple-upgraded {
+  @include mdc-ripple-base;
+  @include mdc-ripple-bg((pseudo: "::before", theme-style: primary, opacity: .14));
+  @include mdc-ripple-fg((pseudo: "::after", theme-style: primary, opacity: .14));
+
+  .mdc-radio__background::before {
+    content: none;
+  }
+}

data/vendor/assets/stylesheets/@material/ripple/_keyframes.scss

@@ -0,0 +1,61 @@
+/**
+ * Copyright 2016 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/** MDC Ripple keyframes are split into their own file so that _mixins.scss can rely on them. */
+
+@import "./variables";
+
+@keyframes mdc-ripple-fg-radius-in {
+  from {
+    transform: scale(0);
+    animation-timing-function: $mdc-ripple-easing-fn;
+  }
+
+  to {
+    transform: scale(1.5);
+  }
+}
+
+@keyframes mdc-ripple-fg-opacity-out {
+  from {
+    opacity: 1;
+    animation-timing-function: linear;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes mdc-ripple-fg-unbounded-opacity-deactivate {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes mdc-ripple-fg-unbounded-transform-deactivate {
+  from {
+    transform: var(--mdc-ripple-fg-approx-xf);
+  }
+
+  to {
+    transform: scale(1.01);
+  }
+}