voom-presenters 0.2.0 → 2.1.0

data/views/mdc/assets/scss/components/grid.scss

@@ -1,5 +1,9 @@
 @import "@material/layout-grid/mdc-layout-grid";
 
+.v-column-hide-overflow {
+  overflow: hidden;
+}
+
 .v-column--relative {
   position: relative;
 }
@@ -10,6 +14,7 @@
   overflow-y: hidden;
   overflow-x: scroll;
   -webkit-overflow-scrolling: touch;
+
   &::-webkit-scrollbar {
     display: none;
   }
@@ -20,22 +25,30 @@
     $gutter: map-get($mdc-layout-grid-default-gutter, $size);
 
     $tops: (
-            top: $gutter,
+            top3: $gutter,
+            top2: $gutter/2,
+            top1: $gutter/4,
             top0: 0
     );
 
     $rights: (
-            right: $gutter,
+            right3: $gutter,
+            right2: $gutter/2,
+            right1: $gutter/4,
             right0: 0
     );
 
     $bottoms: (
-            bottom: $gutter,
+            bottom3: $gutter,
+            bottom2: $gutter/2,
+            bottom1: $gutter/4,
             bottom0: 0
     );
 
     $lefts: (
-            left: $gutter,
+            left3: $gutter,
+            left2: $gutter/2,
+            left1: $gutter/4,
             left0: 0
     );
 
@@ -43,24 +56,26 @@
       @each $right, $rsize in $rights {
         @each $bottom, $bsize in $bottoms {
           @each $left, $lsize in $lefts {
-            .v-grid__padding-#{$bottom}-#{$left}-#{$right}-#{$top} {
-              padding: $tsize $rsize $bsize $lsize;
+            .v-padding-#{$bottom}-#{$left}-#{$right}-#{$top} {
+              padding: $tsize $rsize $bsize $lsize !important;
             }
           }
         }
       }
     }
+  }
+}
 
-    @each $top, $tsize in $tops {
-          @each $right, $rsize in $rights {
-            @each $bottom, $bsize in $bottoms {
-              @each $left, $lsize in $lefts {
-                .v-col__padding-#{$bottom}-#{$left}-#{$right}-#{$top} {
-                  padding: $tsize/2 $rsize/2 $bsize/2 $lsize/2;
-                }
-              }
-            }
-          }
-        }
+.v-grid-column-align-right {
+  margin-right: 0;
+  margin-left: auto;
+}
+
+@each $size in map-keys($mdc-layout-grid-columns) {
+  @include mdc-layout-grid-media-query_($size) {
+    div.v-gutter-none {
+      grid-gap: 0;
+      gap: 0;
+    }
   }
 }

data/views/mdc/assets/scss/components/header.scss

@@ -0,0 +1,21 @@
+@import "@material/top-app-bar/mdc-top-app-bar";
+
+.v-header.v-header--static {
+  position: relative;
+}
+
+.v-header.v-header--fixed {
+  position: fixed;
+  top: 0;
+}
+
+.v-navigation {
+  overflow: hidden;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  box-sizing: border-box;
+}

data/views/mdc/assets/scss/components/icon-button-toggles.scss

@@ -0,0 +1,2 @@
+@import "@material/icon-button/mdc-icon-button";
+

data/views/mdc/assets/scss/components/icon.scss

@@ -19,6 +19,10 @@
   bottom: 8px;
 }
 
+.v-icon-position-center {
+  line-height: 4;
+}
+
 .v-icon__fa{
   font-size: 24px;
 }
@@ -31,4 +35,23 @@
   color: $mdc-theme-secondary;
 }
 
+.v-icon-size-x-small {
+  font-size: $mdc-subtitle1-font-size;
+}
+.v-icon-size-small {
+  font-size: $mdc-headline6-font-size;
+}
+.v-icon-size-default, .v-icon-size-medium {
+  font-size: $mdc-headline5-font-size;
+}
+.v-icon-size-large {
+  font-size: $mdc-headline4-font-size;
+}
+.v-icon-size-x-large {
+  font-size: $mdc-headline3-font-size;
+}
+.v-icon-size-xx-large {
+  font-size: $mdc-headline1-font-size;
+}
+
 

data/views/mdc/assets/scss/components/image-list.scss

@@ -0,0 +1,18 @@
+@import "@material/image-list/mdc-image-list";
+
+@for $size from 1 through 12  {
+  .v-image-list-standard-#{$size}, .v-image-list-text-protection-#{$size} {
+    @include mdc-image-list-standard-columns($size);
+  }
+  .v-image-list-masonry-#{$size} {
+    @include mdc-image-list-masonry-columns($size);
+  }
+}
+
+.v-image-list__border-primary {
+  border-color: $mdc-theme-primary;
+}
+
+.v-image-list__border-secondary {
+  border-color: $mdc-theme-secondary;
+}

data/views/mdc/assets/scss/components/image.scss

@@ -1,30 +1,22 @@
-
-.v-image-position-left {
-  position: absolute;
-  left: 0;
-  bottom: 0;
+.v-image {
+  display: inline-block;
+  width: 100%;
+  max-width: 100%;
+  height: 100%;
 }
 
-.v-image-position-top {
-  position: absolute;
-  top: 0;
+.v-image--fit-contain {
+  object-fit: contain;
 }
 
-.v-image-position-right {
-  position: absolute;
-  right: 0;
-  bottom: 0;
+.v-image--fit-cover {
+  object-fit: cover;
 }
 
-.v-image-position-bottom {
-  position: absolute;
-  bottom: 0;
-
+.v-image--fit-fill {
+  object-fit: fill;
 }
 
-.v-image-position-center {
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
+.v-image--fit-fit {
+  object-fit: scale-down;
 }
-

data/views/mdc/assets/scss/components/list.scss

@@ -19,6 +19,15 @@
 
 .mdc-list-item__meta {
   white-space: nowrap;
+  /*
+    Attempt to make tooltips display on icons in a list line action.
+    This works but the positioning can be off. Fixed position elements inside flex
+    elements just doesn't work well. This need a Javascript solution long-term.
+   */
+  .mdl-tooltip.is-active {
+    top: 50% !important;
+    left: 78% !important;
+  }
 }
 
 .v-list-switch-action {
@@ -32,6 +41,3 @@
 .v-list__border {
   border: 1px solid rgba(0,0,0,.1);
 }
-
-
-

data/views/mdc/assets/scss/components/menu.scss

@@ -1,5 +1,15 @@
+@import "@material/menu-surface/mdc-menu-surface";
 @import "@material/menu/mdc-menu";
 
+.mdc-menu-anchor {
+  display: inline;
+}
+
+.mdc-list-item.mdc-list-item--disabled .v-menu-link {
+  cursor: inherit;
+  pointer-events: none;
+}
+
 .v-menu-link {
   &:hover, &:visited, &:link, &:active {
     color: inherit;
@@ -10,9 +20,9 @@
 
 .mdl-navigation__link {
   i {
-    font-size: 18px;
+    font-size: $mdc-headline6-font-size;
   }
   .v-icon__fa {
-    font-size: 18px;
+    font-size: $mdc-headline6-font-size;
   }
-}
+}

data/views/mdc/assets/scss/components/multi-select.scss

@@ -0,0 +1,44 @@
+.v-multi-select-container {
+  .v-multi-select--options-list {
+    position: absolute;
+    width: 100%;
+    top: 71px;
+    border: 1px solid #C2C2C2;
+    border-radius: 4px;
+    background-color: #FFFFFF;
+    z-index: 1;
+    overflow: visible;
+    > div {
+      display: block;
+      text-align: left;
+      label {
+        line-height: 3em;
+      }
+    }
+  }
+
+  .v-multi-select {
+    @extend .mdc-select;
+    @extend .v-select;
+    overflow: visible;
+    background-color: #FFFFFF;
+    .v-multi-select--current-values {
+      padding: 19px;
+      overflow: hidden;
+    }
+    &:not(.mdc-select--disabled) {
+      background-color: #FFFFFF;
+    }
+    &:hover {
+      background: transparent;
+      .mdc-notched-outline .mdc-notched-outline__leading,
+      .mdc-notched-outline .mdc-notched-outline__notch,
+      .mdc-notched-outline .mdc-notched-outline__trailing {
+        border-color: rgba(0, 0, 0, 0.87);
+      }
+    }
+  }
+  .mdc-select:before {
+    background-color: transparent;
+  }
+}

data/views/mdc/assets/scss/components/progress.scss

@@ -0,0 +1 @@
+@import "@material/linear-progress/mdc-linear-progress";

data/views/mdc/assets/scss/components/rich-text-area.scss

@@ -1,10 +1,25 @@
+.v-rich-text-area-container[data-resizable] {
+  .ql-editor {
+    overflow-y: scroll;
+    resize: vertical;
+  }
+}
+
 .v-rich-text-area-container {
   position: relative;
   width: 100%;
-  > label {
+
+  &[disabled] {
+    opacity: 0.67; // closely approximates MDC
+    cursor: default;
+    pointer-events: none;
+  }
+
+  label {
     display: block;
     margin-top: 16px;
   }
+
   .ql-toolbar {
     margin-top: 16px;
 
@@ -13,21 +28,27 @@
       border-top-left-radius: $v-input-border-radius;
       border-top-right-radius: $v-input-border-radius;
     }
+
+    .ql-horizontal-rule:after {
+      content: '—–';
+    }
   }
+
   .v-rich-text-area {
-    height: 350px;
     &.ql-snow {
       border-color: $v-input-border-color;
       border-bottom-left-radius: $v-input-border-radius;
       border-bottom-right-radius: $v-input-border-radius;
     }
   }
+
   &:hover {
     .ql-toolbar {
       &.ql-snow {
         border-color: $v-input-hover-border-color;
       }
     }
+
     .v-rich-text-area {
       &.ql-snow {
         border-color: $v-input-hover-border-color;
@@ -35,3 +56,18 @@
     }
   }
 }
+
+$fontSizes: (
+  xx-small: 'Tiny',
+  x-small: 'Small',
+  medium: 'Normal',
+  large: 'Large',
+  x-large: 'Huge',
+);
+
+@each $size, $text in $fontSizes {
+  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="#{$size}"]::before {
+    content: $text;
+    font-size: $size;
+  }
+}

data/views/mdc/assets/scss/components/select.scss

@@ -4,17 +4,20 @@
 .mdc-select__native-control {
   -webkit-appearance: none;
   -moz-appearance: none;
-  border-bottom: 1px solid;
-  border-radius: 0;
 }
 
 select {
   text-transform: none;
-  font-size: 14px;
+  font-size: $mdc-body2-font-size;
   line-height: 1.15;
   margin: 0;
 }
 
+.v-select {
+  margin-top: 16px;
+  margin-bottom: 8px;
+}
+
 .mdc-select__label--float-above {
   white-space: nowrap;
 }

data/views/mdc/assets/scss/components/separator.scss

@@ -0,0 +1,3 @@
+.v-separator {
+  margin: 0;
+}

data/views/mdc/assets/scss/components/switch.scss

@@ -2,4 +2,14 @@
 
 .mdc-form-field > label.v-switch__label {
     padding-left: 11px;
+}
+
+.v-switch {
+    margin-left: 10px;
+}
+
+.mdc-switch--checked {
+    .mdc-switch__native-control {
+        margin-left: 20px;
+    }
 }

data/views/mdc/assets/scss/components/textfield.scss

@@ -1,10 +1,9 @@
 @import "@material/textfield/mdc-text-field";
 @import "@material/notched-outline/mdc-notched-outline";
 
-.mdc-text-field__input {
-  .v-text-field {
-    padding: inherit;
-  }
+.mdc-text-field {
+  margin-top:16px;
+  margin-bottom: 8px;
 }
 
 .mdc-text-field--textarea:not(.mdc-text-field--disabled) {
@@ -12,4 +11,9 @@
   &:hover {
     border-color: $v-input-hover-border-color;
   }
+}
+
+.mdc-text-field-helper-text--validation-msg {
+  color: #d50000 !important;
+  font-weight: bold !important;
 }