voom-presenters 0.2.0 → 2.0.0

data/views/mdc/assets/scss/app.scss

@@ -1,5 +1,6 @@
 @import 'material.blue_grey-orange.min';
 @import "theme";
+@import "palette";
 
 // MDC
 @import "components/fab";
@@ -8,7 +9,9 @@
 @import "components/grid";
 @import "components/textfield";
 @import "components/list";
-@import "components/icon-toggles";
+@import "components/header";
+@import "components/drawer";
+@import "components/icon-button-toggles";
 @import "components/menu";
 @import "components/typography";
 @import "components/select";
@@ -19,21 +22,25 @@
 @import "components/radio";
 @import "components/slider";
 @import "components/tab-bars";
+@import "components/unordered-lists";
+@import "components/progress";
+@import "components/tooltip";
+@import "components/drag_n_drop";
+@import "components/image-list";
+@import "components/dialog";
+@import "components/data-table";
 
 // Custom
 @import "components/expansion-panel"; // MDL derivative
 //@import "components/table-pagination"; // WIP
 @import "components/avatar";
-@import "components/dialog";
 @import "components/switch";
 @import "components/image";
 @import "components/icon";
 @import "components/content";
-@import "components/data-table";
-
+@import "components/separator";
 @import "components/datetime";
 @import "components/file-input";
 @import "components/rich-text-area";
-@import 'components/vendor/flatpickr.min';
 @import "components/vendor/quill.snow";
 @import "styles";

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

@@ -1,25 +1,69 @@
 
 .v-avatar {
   margin-left: 0;
-  width: 40px;
-  height: 40px;
   border-radius: 50%;
   color: white;
+  background-color: var(--mdc-theme-text-icon-on-background, rgba(0, 0, 0, 0.38));
   align-items: center;
   justify-content: center;
   display: inline-flex;
   flex-shrink: 0;
+  &.v-avatar-size-small {
+    width: 30px;
+    height: 30px;
+  }
+  &.v-avatar-size-default, &.v-avatar-size-medium {
+    width: 40px;
+    height: 40px;
+  }
+  &.v-avatar-size-large {
+    width: 50px;
+    height: 50px;
+  }
+  &.v-avatar-size-x-large {
+    width: 60px;
+    height: 60px;
+  }
+  &.v-avatar-size-xx-large {
+    width: 110px;
+    height: 110px;
+  }
+  > img {
+    width: 100%;
+  }
 }
 
 .v-card-media {
   .v-avatar {
-    background-color: var(--mdc-theme-text-icon-on-background, rgba(0, 0, 0, 0.38));
-    margin-right: 8px;
     margin: 8px;
+    &.v-avatar-size-small {
+      width: 30px;
+      height: 30px;
+    }
+    &.v-avatar-size-default, &.v-avatar-size-medium {
+      width: 40px;
+      height: 40px;
+    }
+    &.v-avatar-size-large {
+      width: 50px;
+      height: 50px;
+    }
+    &.v-avatar-size-x-large {
+      width: 60px;
+      height: 60px;
+    }
+    &.v-avatar-size-xx-large {
+      width: 110px;
+      height: 110px;
+    }
   }
-  .v-avatar + .v-card-title {
-    margin-top: 8px;
-  }
+}
+
+
+
+.v-column > .v-avatar,
+.v-content > .v-avatar {
+  margin: 8px;
 }
 
 .v-avatar-position-left {

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

@@ -1,6 +1,7 @@
 @import "@material/button/mdc-button";
+@import "@material/icon-button/mdc-icon-button";
 
-.v-button-image {
+.v-button.v-button--image {
   width: 150px;
   height: 45px;
   background-color: $mdc-theme-background !important;
@@ -13,6 +14,7 @@
     position: absolute;
     margin-right: 0 !important;
     color: $v-header-background;
+    line-height: 1;
   }
 }
 
@@ -31,27 +33,23 @@
   left: 0;
 }
 
-.v-button-text-align-left {
- padding-left: 0;
-}
-
 .v-button-position-right {
   position: absolute;
-  right: 0
+  right: 0;
 }
 
 .v-button-position-top {
   position: absolute;
-  top: 0
+  top: 0;
 }
 
 .v-button-position-bottom {
   position: absolute;
-  bottom: 0
+  bottom: 0;
 }
 
 
-v-card-title-position-left {
+.v-card-title-position-left {
   position: absolute;
   left: 0;
 }

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

@@ -9,10 +9,6 @@
   position: relative;
 }
 
-.v-card-content {
-  padding: 10px 10px;
-}
-
 .v-card-title {
   padding: 10px 10px 0px 10px;
 }
@@ -46,7 +42,8 @@
 .v-card-media-image, .v-card-media-avatar {
 }
 
-.v-card__media-menu{
+.v-card__media-menu {
+  z-index: 2;
   .v-button-icon-position-top {
     top: 8px;
   }
@@ -57,3 +54,7 @@
   margin-left: 10px;
   position: relative;
 }
+
+.v-card-selected {
+  outline: medium solid rgb(63,81,181);
+}

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

@@ -1,5 +1,9 @@
 @import "@material/chips/mdc-chips";
 
+button.mdc-chip {
+  border: none;
+}
+
 .mdc-chip__icon.v-icon-position-left {
   float: none;
   padding-right: 0;

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

@@ -9,3 +9,28 @@
 .v-content--relative {
   position: relative;
 }
+
+.v-content-position-left {
+  position: absolute;
+  left: 0;
+}
+
+.v-content-position-right {
+  position: absolute;
+  right: 0;
+}
+
+.v-content-position-top {
+  position: absolute;
+  top: 0;
+}
+
+.v-content-position-bottom {
+  position: absolute;
+  bottom: 0;
+}
+
+.v-content-position-center {
+  margin: 0 auto;
+  width: 50%;
+}

data/views/mdc/assets/scss/components/data-table.scss

@@ -1,4 +1,6 @@
-.mdl-data-table {
+@import "@material/data-table/mdc-data-table";
+
+.mdc-data-table {
   .mdc-list-item__graphic {
     margin-right: 0px;
   }
@@ -78,3 +80,12 @@
 .v-paging__count + .v-paging__next {
   margin-left: 68px;
 }
+
+.v-no-border {
+  border: none;
+  box-shadow: none;
+  tfoot td {
+    border-bottom: none;
+    border-top: none;
+  }
+}

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

@@ -1,4 +1,4 @@
-@import "vendor/flatpickr.min";
+@import "flatpickr/dist/flatpickr.min";
 
 .v-datetime {
   &.mdc-text-field--upgraded:not(.mdc-text-field--fullwidth):not(.mdc-text-field--box) {
@@ -27,4 +27,3 @@
 i:focus.v-datetime--clear {
     outline: none;
 }
-

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

@@ -1,3 +1,8 @@
-.v-dialog--form  {
-  padding-bottom: 0;
+@import "@material/dialog/mdc-dialog";
+
+@media (min-width: 592px) {
+  .mdc-dialog .mdc-dialog__surface {
+    max-width: 100%;
+    width: 100%;
+  }
 }

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

@@ -0,0 +1,17 @@
+.v-dnd-moving {
+    opacity: 0.25;
+    border: dashed 1px red;
+    user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    cursor: move !important;
+}
+
+.v-dnd-draggable {
+    cursor: grab !important;
+}
+
+.v-dnd-over {
+    outline: 2px dashed #000 !important;
+}

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

@@ -0,0 +1,82 @@
+@import 'node_modules/@material/layout-grid/variables';
+@import 'node_modules/@material/layout-grid/mixins';
+@import "@material/drawer/mdc-drawer";
+@import '../media';
+
+.drawer-frame-root {
+  display: flex;
+  height: 100vh;
+}
+
+.drawer-frame-root .mdc-drawer {
+  position: fixed;
+}
+
+.mdc-drawer-app-content {
+  width: 100%;
+}
+
+.mdc-drawer--open:not(.mdc-drawer--closing) + .mdc-drawer-app-content > .mdc-top-app-bar.mdc-top-app-bar--fixed {
+    width: 100%;
+}
+
+// The width of the fixed header must be reduced when the drawer is present and
+// open.
+.mdc-drawer--open:not(.mdc-drawer--closing) + .mdc-drawer-app-content > .mdc-top-app-bar.mdc-top-app-bar--fixed {
+  @include lg {
+    width: calc(100% - 256px);
+  }
+}
+
+.mdc-drawer--modal {
+  --v-drawer-active:yes;
+  @include lg {
+    --v-drawer-active:no;
+  }
+}
+
+.mdc-drawer--dismissible.mdc-drawer--open {
+  display: none;
+  width: 0;
+  --v-drawer-active:no;
+  @include lg {
+    --v-drawer-active:yes;
+    display: flex;
+    width: 256px;
+  }
+}
+
+.mdc-drawer.mdc-drawer--open:not(.mdc-drawer--closing) + .mdc-drawer-app-content {
+  margin-left: 0;
+  margin-right: 0;
+  @include lg {
+    margin-left: 256px;
+    margin-right: 0;
+   }
+}
+
+.v-drawer .mdc-drawer__content .v-list {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+}
+
+.mdc-drawer.v-drawer.mdc-drawer--modal {
+  top: 0;
+}
+
+.mdc-drawer.v-drawer.v-drawer--full-height .mdc-drawer__content .v-list.v-list--full-height {
+  min-height: 100%;
+}
+
+.mdc-drawer.v-drawer .mdc-drawer__content .v-list .v-list--bottom-wrapper {
+  margin-top: auto;
+}
+
+.mdc-drawer.v-drawer .v-list-item--size-small {
+  font-size: 0.80rem;
+}
+
+.mdc-drawer.v-drawer .v-list-item.v-item__secondary:not(.mdc-list-item--activated) {
+  @include mdc-list-item-primary-text-ink-color(text-secondary-on-background);
+}

data/views/mdc/assets/scss/components/expansion-panel.scss

@@ -19,7 +19,7 @@ $v-expansion-bg: #fff;
     &::after {
       font-family: "Material Icons";
       content: "\e313";
-      font-size: 24px;
+      font-size: $mdc-headline5-font-size;
       font-weight: normal;
       font-style: normal;
       display: inline-flex;
@@ -118,7 +118,7 @@ $v-expansion-bg: #fff;
   align-items: center;
   height: 48px;
   padding: 0 24px;
-  font-size: 15px;
+  font-size: $mdc-subtitle1-font-size;
   font-weight: 400;
   outline: none;
 

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

@@ -1,9 +1,27 @@
 @import "@material/fab/mdc-fab";
+@import "@material/layout-grid/mdc-layout-grid";
+
+$fab-offsets: (
+  top: 2.25em,
+  right: 0.00em,
+  bottom: 0.00em,
+  left: 0.00em
+);
 
 .v-fab--absolute {
-  position: relative;
-  float: right;
-  //margin:  6px -40px -69px;
-  margin:  -46px -14px -69px;
-  z-index: 10;
+  position: absolute;
+  z-index: 1;
+}
+
+@each $size in map-keys($mdc-layout-grid-columns) {
+  @include mdc-layout-grid-media-query_($size) {
+    $gutter: map-get($mdc-layout-grid-default-gutter, $size);
+
+    @each $position, $offset in $fab-offsets {
+      .mdc-fab.v-button-fab-position-#{$position} {
+        position: absolute;
+        #{$position}: calc(#{-1 * $mdc-fab-height / 2} + #{$offset});
+      }
+    }
+  }
 }

data/views/mdc/assets/scss/components/file-input.scss

@@ -1,11 +1,11 @@
-.v-file-input {
-  align-items: center !important;
-  display: inline-block;
-  padding: 16px;
-  position: relative;
-  width: 450px;
-}
-
+//.v-file-input {
+//  align-items: center !important;
+//  display: inline-block;
+//  padding: 16px;
+//  position: relative;
+//  width: 450px;
+//}
+//
 .v-file-input > [type='file'] {
   cursor: pointer;
   height: 100%;
@@ -14,9 +14,5 @@
   position: absolute;
   top: 0;
   width: 100%;
-  z-index: 10;
-}
-
-.v-file-input > label {
-  line-height: 36px;
-}
+  z-index: 1;
+}