material-sass 4.0.0.alpha5 → 4.0.0.alpha6

data/app/assets/stylesheets/material/base/_normalize.scss

@@ -0,0 +1,253 @@
+/* normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
+
+// document
+  body {
+    margin: 0;
+  }
+
+  html {
+    font-family: sans-serif;
+    line-height: 1.15;
+    -webkit-text-size-adjust: 100%;
+        -ms-text-size-adjust: 100%;
+  }
+
+// embedded content
+  audio,
+  video {
+    display: inline-block;
+  }
+
+  audio:not([controls]) {
+    display: none;
+    height: 0;
+  }
+
+  img {
+    border-style: none;
+  }
+
+  svg:not(:root) {
+    overflow: hidden;
+  }
+
+// form
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+    font-family: sans-serif;
+    font-size: 100%;
+    line-height: 1.15;
+    margin: 0;
+  }
+
+  button,
+  input {
+    overflow: visible;
+  }
+
+  button,
+  select {
+    text-transform: none;
+  }
+
+  button,
+  [type="reset"],
+  [type="submit"] {
+    -webkit-appearance: button;
+  }
+
+  html [type="button"] {
+    -webkit-appearance: button;
+  }
+
+  button::-moz-focus-inner,
+  [type="button"]::-moz-focus-inner,
+  [type="reset"]::-moz-focus-inner,
+  [type="submit"]::-moz-focus-inner {
+    border-style: none;
+    padding: 0;
+  }
+
+  button:-moz-focusring,
+  [type="button"]:-moz-focusring,
+  [type="reset"]:-moz-focusring,
+  [type="submit"]:-moz-focusring {
+    outline: 1px dotted ButtonText;
+  }
+
+  fieldset {
+    border: 1px solid #c0c0c0;
+    margin: 0 2px;
+    padding: 0.35em 0.625em 0.75em;
+  }
+
+  legend {
+    box-sizing: border-box;
+    color: inherit;
+    display: table;
+    max-width: 100%;
+    padding: 0;
+    white-space: normal;
+  }
+
+  progress {
+    display: inline-block;
+    vertical-align: baseline;
+  }
+
+  textarea {
+    overflow: auto;
+  }
+
+  [type="checkbox"],
+  [type="radio"] {
+    box-sizing: border-box;
+    padding: 0;
+  }
+
+  [type="number"]::-webkit-inner-spin-button,
+  [type="number"]::-webkit-outer-spin-button {
+    height: auto;
+  }
+
+  [type="search"] {
+    outline-offset: -2px;
+    -webkit-appearance: textfield;
+  }
+
+  [type="search"]::-webkit-search-cancel-button,
+  [type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+
+  ::-webkit-file-upload-button {
+    font: inherit;
+    -webkit-appearance: button;
+  }
+
+// grouping content
+  figcaption,
+  figure,
+  main {
+    display: block;
+  }
+
+  figure {
+    margin: 1em 40px;
+  }
+
+  hr {
+    box-sizing: content-box;
+    height: 0;
+    overflow: visible;
+  }
+
+  pre {
+    font-family: monospace, monospace;
+    font-size: 1em;
+  }
+
+// hidden
+  [hidden] {
+    display: none;
+  }
+
+// interactive
+  details,
+  menu {
+    display: block;
+  }
+
+  summary {
+    display: list-item;
+  }
+
+// section
+  article,
+  aside,
+  footer,
+  header,
+  nav,
+  section {
+    display: block;
+  }
+
+  h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+  }
+
+// scripting
+  canvas {
+    display: inline-block;
+  }
+
+  template {
+    display: none;
+  }
+
+// text-level semantics
+  a {
+    background-color: transparent;
+    -webkit-text-decoration-skip: objects;
+  }
+
+  a:active,
+  a:hover {
+    outline-width: 0;
+  }
+
+  abbr[title] {
+    border-bottom: none;
+    text-decoration: underline;
+    text-decoration: underline dotted;
+  }
+
+  b,
+  strong {
+    font-weight: inherit;
+  }
+
+  b,
+  strong {
+    font-weight: bolder;
+  }
+
+  code,
+  kbd,
+  samp {
+    font-family: monospace monospace;
+    font-size: 1em;
+  }
+
+  dfn {
+    font-style: italic;
+  }
+
+  mark {
+    background-color: #ff0;
+    color: #000;
+  }
+
+  small {
+    font-size: 80%;
+  }
+
+  sub,
+  sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+
+  sub {
+    bottom: -0.25em;
+  }
+
+  sup {
+    top: -0.5em;
+  }

data/app/assets/stylesheets/material/base/_reboot.scss

@@ -0,0 +1,239 @@
+// box-sizing
+  html {
+    box-sizing: border-box;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: inherit;
+  }
+
+  @at-root {
+    @-ms-viewport { width: device-width; }
+  }
+
+// document
+  body {
+    background-color: $body-bg;
+    color: $body-color;
+    font-family: $font-family-base;
+    font-size: $font-size-base;
+    font-weight: $font-weight-base;
+    line-height: $line-height-base;
+  }
+
+  html {
+    -ms-overflow-style: scrollbar;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  }
+
+  [tabindex="-1"]:focus {
+    outline: 0 !important;
+  }
+
+// clickable element
+  a,
+  area,
+  button,
+  input,
+  label,
+  select,
+  summary,
+  textarea,
+  [role="button"] {
+    touch-action: manipulation;
+  }
+
+  [role="button"] {
+    cursor: pointer;
+  }
+
+// code
+  pre {
+    margin-top: 0;
+    margin-bottom: 1rem;
+    overflow: auto;
+  }
+
+// figure
+  figure {
+    margin: 0 0 1rem;
+  }
+
+// form
+  button,
+  input,
+  select,
+  textarea {
+    line-height: inherit;
+  }
+
+  button {
+    // active, focus, hover
+      &:focus {
+        outline: 1px dotted;
+        outline: 5px auto -webkit-focus-ring-color;
+      }
+  }
+
+  fieldset {
+    border: 0;
+    margin: 0;
+    min-width: 0;
+    padding: 0;
+  }
+
+  input[type="checkbox"],
+  input[type="radio"] {
+    // disabled
+      &:disabled {
+        cursor: $cursor-disabled;
+      }
+  }
+
+  input[type="date"],
+  input[type="datetime-local"],
+  input[type="month"],
+  input[type="time"] {
+    -webkit-appearance: listbox;
+  }
+
+  input[type="search"] {
+    -webkit-appearance: none;
+  }
+
+  label {
+    display: inline-block;
+    margin-bottom: 0.5rem;
+  }
+
+  legend {
+    display: block;
+    margin-bottom: 0.5rem;
+    padding: 0;
+    width: 100%;
+    @include typography-headline;
+  }
+
+  output {
+    display: inline-block;
+  }
+
+  select[multiple],
+  select[size] {
+    overflow: auto;
+  }
+
+  textarea {
+    resize: vertical;
+  }
+
+// hidden
+  [hidden] {
+    display: none !important;
+  }
+
+// images
+  img {
+    vertical-align: middle;
+  }
+
+// link
+  a {
+    color: $link-color;
+    text-decoration: $link-decoration;
+
+    // active, focus, hover
+      @include active-focus-hover {
+        color: $link-color-active;
+        text-decoration: $link-decoration-active;
+      }
+  }
+
+  a:not([href]):not([tabindex]) {
+    color: inherit;
+    text-decoration: none;
+
+    // active, focus, hover
+      @include active-focus-hover {
+        color: inherit;
+        text-decoration: none;
+      }
+
+      &:focus {
+        outline: 0;
+      }
+  }
+
+// table
+  caption {
+    caption-side: bottom;
+    color: $table-caption-color;
+    min-height: $table-thead-cell-height;
+    padding: $table-thead-padding-y $table-cell-padding-x-alt;
+    text-align: left;
+    @include typography-caption;
+  }
+
+  table {
+    background-color: $table-bg;
+    border-collapse: collapse;
+  }
+
+  th {
+    text-align: left;
+  }
+
+// typography
+  abbr[data-original-title],
+  abbr[title] {
+    cursor: help;
+  }
+
+  address {
+    font-style: normal;
+    line-height: inherit;
+    margin-bottom: 1rem;
+  }
+
+  blockquote {
+    margin: 0 0 1rem;
+  }
+
+  dd {
+    margin-bottom: 0.5rem;
+    margin-left: 0;
+  }
+
+  dl {
+    margin-top: 0;
+    margin-bottom: 1rem;
+  }
+
+  dt {
+    font-weight: $dt-font-weight;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    margin-top: 0;
+    margin-bottom: 0.5rem;
+  }
+
+  ol,
+  ul {
+    margin-top: 0;
+    margin-bottom: 1rem;
+  }
+
+  ol ol,
+  ol ul,
+  ul ol,
+  ul ul {
+    margin-bottom: 0;
+  }
+
+  p {
+    margin-top: 0;
+    margin-bottom: 1rem;
+  }

data/app/assets/stylesheets/material/base/_typography.scss

@@ -189,16 +189,6 @@
     @include list-unstyled;
   }
 
-  @if not $enable-flex {
-    dl.row {
-      margin-bottom: $spacer-sm-y;
-
-      > dd + dt {
-        clear: left;
-      }
-    }
-  }
-
 //
 // misc
 //

data/app/assets/stylesheets/material/bootstrap/_alert.scss

@@ -43,7 +43,6 @@
 //
   .alert-heading {
     color: inherit;
-    margin-top: $card-title-additonal-margin;
   }
 
   .alert-link {

data/app/assets/stylesheets/material/bootstrap/_breadcrumb.scss

@@ -1,14 +1,19 @@
 .breadcrumb {
+  align-items: center;
   background-color: $breadcrumb-bg;
+  display: flex;
+  flex-wrap: wrap;
   list-style: none;
+  min-height: $breadcrumb-height;
   margin-bottom: $breadcrumb-margin-bottom;
   padding: $breadcrumb-padding-y $breadcrumb-padding-x;
   @include clearfix;
 }
 
 .breadcrumb-item {
+  align-items: center;
   color: $breadcrumb-item-color;
-  float: left;
+  display: flex;
   @include transition-standard(color);
 
   // active, focus, hover
@@ -23,17 +28,17 @@
 
   a {
     color: inherit;
-
-    @if ($link-decoration-active != "none") {
-      text-decoration: none;
-    }
+    text-decoration: none;
   }
 
   + .breadcrumb-item::before {
-    @include reset-to-material-icons;
-    color: $breadcrumb-item-color;
-    content: "#{$breadcrumb-divider}";
-    padding-right: $breadcrumb-item-padding;
-    padding-left: $breadcrumb-item-padding;
+    background-image: $breadcrumb-divider;
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+    background-size: ($material-icon-size / $font-size-root * 1rem) ($material-icon-size / $font-size-root * 1rem);
+    content: "";
+    display: inline-block;
+    height: ($material-icon-size / $font-size-root * 1rem);
+    width: ($breadcrumb-item-padding * 2 + $material-icon-size / $font-size-root * 1rem);
   }
 }

data/app/assets/stylesheets/material/bootstrap/_button-group.scss

@@ -1,7 +1,7 @@
 .btn-group,
 .btn-group-vertical {
   background-color: $btn-group-bg;
-  display: inline-block;
+  display: inline-flex;
   padding: $btn-group-padding-y $btn-group-padding-x;
   position: relative;
   vertical-align: middle;
@@ -9,6 +9,7 @@
   > .btn {
     background-color: transparent;
     box-shadow: none;
+    flex: 0 1 auto;
     min-width: 0;
 
     // active, focus, hover
@@ -36,17 +37,13 @@
       }
     }
 
-  > .btn-group {
+  > .btn-group,
+  > .btn-group-vertical {
     padding: 0;
   }
 }
 
 .btn-group {
-  > .btn,
-  > .btn-group {
-    float: left;
-  }
-
   > .btn + .btn,
   > .btn + .btn-group,
   > .btn-group + .btn,
@@ -56,18 +53,15 @@
 }
 
 .btn-group-vertical {
+  align-items: flex-start;
+  flex-direction: column;
+  justify-content: center;
+
   > .btn,
-  > .btn-group,
-  > .btn-group > .btn {
-    display: block;
-    max-width: 100%;
+  > .btn-group {
     width: 100%;
   }
 
-  > .btn-group > .btn {
-    float: none;
-  }
-
   > .btn + .btn,
   > .btn + .btn-group,
   > .btn-group + .btn,
@@ -103,9 +97,9 @@
 //
 // split button dropdown
 //
-  .btn.dropdown-toggle-split {
-    padding-right: ($btn-padding-x * 0.75);
-    padding-left: ($btn-padding-x * 0.75);
+  .btn + .dropdown-toggle-split {
+    padding-right: ($btn-padding-x * 0.5);
+    padding-left: ($btn-padding-x * 0.5);
 
     &::after {
       margin-left: 0;
@@ -117,39 +111,24 @@
   }
 
   // size
-    .btn-lg + .btn.dropdown-toggle-split {
-      padding-right: ($btn-padding-x-lg * 0.75);
-      padding-left: ($btn-padding-x-lg * 0.75);
+    .btn-lg + .dropdown-toggle-split {
+      padding-right: ($btn-padding-x-lg * 0.5);
+      padding-left: ($btn-padding-x-lg * 0.5);
     }
 
-    .btn-sm + .btn.dropdown-toggle-split {
-      padding-right: ($btn-padding-x-sm * 0.75);
-      padding-left: ($btn-padding-x-sm * 0.75);
+    .btn-sm + .dropdown-toggle-split {
+      padding-right: ($btn-padding-x-sm * 0.5);
+      padding-left: ($btn-padding-x-sm * 0.5);
     }
 
 //
 // toolbar
 //
   .btn-toolbar {
-    @include clearfix;
+    display: flex;
+    justify-content: flex-start;
 
-    .btn-group,
     .input-group {
-      float: left;
-
-      &::before {
-        background-color: $btn-toolbar-divider-bg;
-        content: "";
-        display: block;
-        position: absolute;
-          top: $btn-group-padding-y;
-          bottom: $btn-group-padding-y;
-          left: 0;
-        width: 1px;
-      }
-
-      &:first-child::before {
-        display: none;
-      }
+      width: auto;
     }
   }