material_components_web-sass 0.1.1

data/vendor/assets/stylesheets/@material/animation/_functions.scss

@@ -0,0 +1,25 @@
+/**
+ * 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 "./variables";
+
+@function mdc-animation-enter($name, $duration, $delay: 0ms) {
+  @return $name $duration $delay $mdc-animation-linear-out-slow-in-timing-function;
+}
+
+@function mdc-animation-exit($name, $duration, $delay: 0ms) {
+  @return $name $duration $delay $mdc-animation-fast-out-linear-in-timing-function;
+}

data/vendor/assets/stylesheets/@material/animation/_mixins.scss

@@ -0,0 +1,29 @@
+/**
+ * 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 "./variables";
+
+@mixin mdc-animation-linear-out-slow-in {
+  animation-timing-function: $mdc-animation-linear-out-slow-in-timing-function;
+}
+
+@mixin mdc-animation-fast-out-slow-in {
+  animation-timing-function: $mdc-animation-fast-out-slow-in-timing-function;
+}
+
+@mixin mdc-animation-fast-out-linear-in {
+  animation-timing-function: $mdc-animation-fast-out-linear-in-timing-function;
+}

data/vendor/assets/stylesheets/@material/animation/_variables.scss

@@ -0,0 +1,19 @@
+/**
+ * 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-animation-linear-out-slow-in-timing-function: cubic-bezier(0, 0, .2, 1) !default;
+$mdc-animation-fast-out-slow-in-timing-function: cubic-bezier(.4, 0, .2, 1) !default;
+$mdc-animation-fast-out-linear-in-timing-function: cubic-bezier(.4, 0, 1, 1) !default;

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

@@ -0,0 +1,31 @@
+/**
+ * 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 "./mixins";
+
+.mdc-animation {
+  &-linear-out-slow-in {
+    @include mdc-animation-linear-out-slow-in;
+  }
+
+  &-fast-out-slow-in {
+    @include mdc-animation-fast-out-slow-in;
+  }
+
+  &-fast-out-linear-in {
+    @include mdc-animation-fast-out-linear-in;
+  }
+}

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

@@ -0,0 +1,199 @@
+/**
+ * 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/animation/functions";
+@import "@material/elevation/mixins";
+@import "@material/theme/mixins";
+@import "@material/typography/mixins";
+
+/* postcss-bem-linter: define button */
+/* stylelint-disable declaration-property-unit-whitelist */
+.mdc-button {
+  @include mdc-typography(body2);
+  @include mdc-theme-prop(color, text-primary-on-light);
+
+  display: inline-block;
+  position: relative;
+  min-width: 64px;
+  height: 36px;
+  padding: 0 16px;
+  border: none;
+  border-radius: 2px;
+  outline: none;
+  background: transparent;
+  font-size: 14px; /* Override font to specifically be px as spec defined pt */
+  font-weight: 500;
+  line-height: 36px; /* Override line-height so text aligns centered */
+  text-align: center;
+  text-transform: uppercase;
+  vertical-align: middle;
+  box-sizing: border-box;
+  -webkit-appearance: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+
+  @include mdc-theme-dark {
+    @include mdc-theme-prop(color, text-primary-on-dark);
+  }
+
+  /* postcss-bem-linter: ignore */
+  &::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    transition: mdc-animation-exit(opacity, 120ms);
+    border-radius: inherit;
+    background: currentColor;
+    content: "";
+    opacity: 0;
+  }
+
+  &:focus::before {
+    transition: mdc-animation-enter(opacity, 120ms);
+    opacity: .12;
+  }
+
+  &:active::before {
+    transition: mdc-animation-enter(opacity, 120ms);
+
+    /*
+      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;
+  }
+
+  &:focus:active::before {
+    transition-timing-function: $mdc-animation-fast-out-slow-in-timing-function;
+  }
+
+  &:active {
+    outline: none;
+  }
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &::-moz-focus-inner {
+    padding: 0;
+    border: 0;
+  }
+
+  &--dense {
+    height: 32px;
+    font-size: .8125rem; /* 13sp */
+    line-height: 32px;
+  }
+
+  &--raised {
+    @include mdc-elevation(2);
+    @include mdc-elevation-transition;
+
+    min-width: 88px;
+
+    &:active {
+      @include mdc-elevation(8);
+    }
+
+    @include mdc-theme-dark(".mdc-button") {
+      @include mdc-theme-prop(background-color, primary);
+
+      /* postcss-bem-linter: ignore */
+      &::before {
+        /*
+          We are explicitly not fully adhering to Material Design here.
+          This should be the 700-shade when active instead of a black shade.
+          Due to the complexity involved in adhering fully it is being ignored.
+          Instead re-using the existing architecture for shading works just fine.
+          - With <3 from Garbee
+        */
+        color: black;
+      }
+    }
+  }
+
+  &--primary {
+    @include mdc-theme-prop(color, primary);
+
+    @include mdc-theme-dark(".mdc-button") {
+      @include mdc-theme-prop(color, primary);
+    }
+
+    /* postcss-bem-linter: ignore */
+    &.mdc-button--raised {
+      @include mdc-theme-prop(background-color, primary);
+      @include mdc-theme-prop(color, text-primary-on-primary);
+
+      /* postcss-bem-linter: ignore */
+      &::before {
+        color: black;
+      }
+    }
+  }
+
+  &--accent {
+    @include mdc-theme-prop(color, accent);
+
+    @include mdc-theme-dark(".mdc-button") {
+      @include mdc-theme-prop(color, accent);
+    }
+
+    /* postcss-bem-linter: ignore */
+    &.mdc-button--raised {
+      @include mdc-theme-prop(background-color, accent);
+      @include mdc-theme-prop(color, text-primary-on-accent);
+
+      /* postcss-bem-linter: ignore */
+      &::before {
+        color: black;
+      }
+    }
+  }
+
+  &--compact {
+    padding: 0 8px;
+  }
+
+  /* stylelint-disable selector-no-type */
+  fieldset:disabled &,
+  &:disabled {
+    color: rgba(0, 0, 0, .26);
+    cursor: default;
+    pointer-events: none;
+
+    @include mdc-theme-dark(".mdc-button") {
+      color: rgba(255, 255, 255, .3);
+    }
+  }
+
+  fieldset:disabled &--raised,
+  &--raised:disabled {
+    @include mdc-elevation(0);
+
+    background-color: rgba(0, 0, 0, .12);
+    pointer-events: none;
+
+    @include mdc-theme-dark(".mdc-button") {
+      background-color: rgba(255, 255, 255, .12);
+    }
+  }
+}
+
+/* postcss-bem-linter: end */

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

@@ -0,0 +1,179 @@
+/**
+ * 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/elevation/mixins";
+@import "@material/theme/mixins";
+@import "@material/typography/mixins";
+
+/* postcss-bem-linter: define card */
+.mdc-card {
+  @include mdc-elevation(2);
+
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  padding: 0;
+  box-sizing: border-box;
+
+  &__primary {
+    padding: 16px;
+
+    /* Add extra space before large title. */
+    .mdc-card__title--large {
+      padding-top: 8px;
+    }
+
+    /* Add extra padding if this is the last block. */
+    &:last-child {
+      padding-bottom: 24px;
+    }
+  }
+
+  &__supporting-text {
+    padding: 8px 16px;
+    box-sizing: border-box;
+
+    @include mdc-typography(body1);
+    @include mdc-theme-prop(color, text-primary-on-background);
+
+    @include mdc-theme-dark(".mdc-card") {
+      @include mdc-theme-prop(color, text-primary-on-dark);
+    }
+
+    /* Remove top padding if immediately preceded by a primary block. */
+    .mdc-card__primary + & {
+      margin-top: -8px;
+      padding-top: 0;
+    }
+
+    /* Add extra padding if this is the last block. */
+    &:last-child {
+      padding-bottom: 24px;
+    }
+  }
+
+  &__actions {
+    display: flex;
+    padding: 8px;
+    box-sizing: border-box;
+
+    /* Adjust text color for dark theme. */
+    @include mdc-theme-dark(".mdc-card") {
+      @include mdc-theme-prop(color, text-primary-on-dark);
+    }
+
+    /* Tweak button paddings and margins when they're used as actions */
+    .mdc-card__action {
+      margin: 0 8px 0 0;
+    }
+
+    .mdc-card__action:last-child {
+      margin-right: 0;
+    }
+
+    /* Vertical actions (one per line) */
+    &--vertical {
+      flex-flow: column;
+      align-items: flex-start;
+
+      .mdc-card__action {
+        margin: 0 0 4px;
+      }
+
+      .mdc-card__action:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  &__media {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    padding: 16px;
+    box-sizing: border-box;
+  }
+
+  &__media-item {
+    display: inline-block;
+    width: auto;
+    height: 80px;
+    margin: 16px 0 0;
+    padding: 0;
+
+    @each $mult, $name in (1.5: "1dot5", 2: "2", 3: "3") {
+      // postcss-bem-linter: ignore
+      &--#{$name}x {
+        width: auto;
+        height: $mult * 80px;
+      }
+    }
+  }
+
+  &__title {
+    @include mdc-typography(body2);
+    @include mdc-theme-prop(color, text-primary-on-background);
+
+    /* Adjust text color for dark theme. */
+    @include mdc-theme-dark(".mdc-card") {
+      @include mdc-theme-prop(color, text-primary-on-dark);
+    }
+
+    margin: -.063rem 0; /* -1sp 0 */
+  }
+
+  &__title--large {
+    @include mdc-typography(headline);
+
+    margin: 0;
+  }
+
+  &__subtitle {
+    @include mdc-typography(body1);
+    @include mdc-theme-prop(color, text-primary-on-background);
+
+    /* Adjust text color for dark theme. */
+    @include mdc-theme-dark(".mdc-card") {
+      @include mdc-theme-prop(color, text-primary-on-dark);
+    }
+
+    margin: -.063rem 0; /* -1sp 0 */
+  }
+
+  &__horizontal-block {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: space-between;
+    padding: 0 16px 0 0;
+    box-sizing: border-box;
+
+    // postcss-bem-linter: ignore
+    .mdc-card__actions--vertical {
+      margin: 16px;
+    }
+
+    .mdc-card__media-item {
+      margin-left: 16px;
+    }
+
+    &:last-child .mdc-card__media-item {
+      margin-bottom: 16px;
+    }
+  }
+}
+
+/* postcss-bem-linter: end */