coprl 0.1.0 → 3.0.0.beta.1

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

@@ -0,0 +1,153 @@
+// https://codepen.io/rustemgareev/pen/dVyyYM/
+$v-expansion-bg: #fff;
+
+.v-expansion {
+  border-bottom: 1px solid rgba(0, 0, 0, .12);
+
+  &__summary {
+    padding-left: 24px;
+    padding-right: 24px;
+    height: 48px;
+    display: flex;
+    outline: none;
+    cursor: pointer;
+
+    &::-webkit-details-marker {
+      display: none;
+    }
+
+    &::after {
+      font-family: "Material Icons";
+      content: "\e313";
+      font-size: $mdc-headline5-font-size;
+      font-weight: normal;
+      font-style: normal;
+      display: inline-flex;
+      flex-direction: column;
+      user-select: none;
+      justify-content: center;
+      transition: transform .2s, color .2s;
+      margin-left: auto;
+      // color: rgba(0, 0, 0, .38);
+    }
+  }
+
+  &__header {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    font-size: 0.937rem;
+    font-weight: 500;
+    flex-basis: 30%;
+    margin-right: 1rem;
+    cursor: pointer;
+  }
+
+  &__subheader {
+    font-size: .75rem;
+    color: rgba(0, 0, 0, .54);
+  }
+
+  &__secondary-content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    font-size: 0.9375rem;
+    font-weight: 500;
+    flex-basis: 30%;
+    color: rgba(0, 0, 0, .87);
+    margin-right: 16px;
+  }
+
+  &__content {
+    padding-left: 24px;
+    padding-right: 24px;
+    padding-top: 16px;
+    padding-bottom: 16px;
+
+    & + .v-expansion__actions {
+      border-top: 1px solid rgba(0, 0, 0, .12);
+    }
+  }
+
+  &__actions {
+    display: flex;
+    flex-direction: row-reverse;
+    padding-top: 16px;
+    padding-bottom: 16px;
+  }
+
+  &__action {
+    margin-right: 8px;
+  }
+
+  &[open] {
+    .v-expansion__summary::after {
+      transform: rotate(180deg);
+    }
+  }
+
+  // Open state
+  &[open] {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+
+    &:first-child {
+      margin-top: 0;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.v-expansion {
+  display: block;
+  // margin: 0;
+  transition: margin 225ms cubic-bezier(.4,0,.2,1);
+
+  background-color: $v-expansion-bg;
+  box-sizing: content-box;
+  color: rgba(0,0,0,.87);
+}
+
+.v-expansion-header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 48px;
+  padding: 0 24px;
+  font-size: $mdc-subtitle1-font-size;
+  font-weight: 400;
+  outline: none;
+
+  &::-webkit-details-marker {
+    display:none;
+  }
+
+  &__content {
+    display: flex;
+    flex: 1;
+    flex-direction: row;
+    overflow: hidden;
+  }
+
+  &__title {
+    display: flex;
+    flex-grow: 1;
+    margin-right: 16px;      
+  }
+
+  &__description {
+    display: flex;
+    flex-grow: 1;
+    margin-right: 16px;
+  }
+}
+
+.v-expansion-panel {
+  &__content {
+    padding: 0 24px 16px;
+  }
+}

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

@@ -0,0 +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: 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

@@ -0,0 +1,18 @@
+//.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%;
+  left: 0;
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 1;
+}

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

@@ -0,0 +1,81 @@
+@import "@material/layout-grid/mdc-layout-grid";
+
+.v-column-hide-overflow {
+  overflow: hidden;
+}
+
+.v-column--relative {
+  position: relative;
+}
+
+// Used to support side to side scrolling for wide grid elements.
+// Grids that contain a wide table use this.
+.v-grid__wide {
+  overflow-y: hidden;
+  overflow-x: scroll;
+  -webkit-overflow-scrolling: touch;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+@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);
+
+    $tops: (
+            top3: $gutter,
+            top2: $gutter/2,
+            top1: $gutter/4,
+            top0: 0
+    );
+
+    $rights: (
+            right3: $gutter,
+            right2: $gutter/2,
+            right1: $gutter/4,
+            right0: 0
+    );
+
+    $bottoms: (
+            bottom3: $gutter,
+            bottom2: $gutter/2,
+            bottom1: $gutter/4,
+            bottom0: 0
+    );
+
+    $lefts: (
+            left3: $gutter,
+            left2: $gutter/2,
+            left1: $gutter/4,
+            left0: 0
+    );
+
+    @each $top, $tsize in $tops {
+      @each $right, $rsize in $rights {
+        @each $bottom, $bsize in $bottoms {
+          @each $left, $lsize in $lefts {
+            .v-padding-#{$bottom}-#{$left}-#{$right}-#{$top} {
+              padding: $tsize $rsize $bsize $lsize !important;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.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

@@ -0,0 +1,57 @@
+
+.v-icon-position-left {
+  float:left;
+  padding-right: 16px;
+}
+
+.v-icon-position-top {
+  top: 0;
+}
+
+.v-icon-position-right {
+  float:right;
+  padding-left: 16px;
+  right: 8px;
+}
+
+.v-icon-position-bottom {
+  position: absolute;
+  bottom: 8px;
+}
+
+.v-icon-position-center {
+  line-height: 4;
+}
+
+.v-icon__fa{
+  font-size: 24px;
+}
+
+.v-icon__primary {
+  color: $mdc-theme-primary;
+}
+
+.v-icon__secondary {
+  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

@@ -0,0 +1,22 @@
+.v-image {
+  display: inline-block;
+  width: 100%;
+  max-width: 100%;
+  height: 100%;
+}
+
+.v-image--fit-contain {
+  object-fit: contain;
+}
+
+.v-image--fit-cover {
+  object-fit: cover;
+}
+
+.v-image--fit-fill {
+  object-fit: fill;
+}
+
+.v-image--fit-fit {
+  object-fit: scale-down;
+}

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

@@ -0,0 +1,43 @@
+@import "@material/list/mdc-list";
+@import "@material/theme/mixins";
+
+.v-list-item--with-avatar {
+  @include mdc-theme-prop(color, white);
+  @include mdc-theme-prop(background-color, text-icon-on-background);
+}
+
+.v-list-item--header {
+  background-color: #F5F5F5;
+}
+
+#list-item-select-all-header {
+  height: 45px;
+  > span {
+    margin: auto;
+  }
+}
+
+.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 {
+  margin-left: 6px;
+}
+
+.mdc-list-item__secondary-text::before {
+    content: unset;
+}
+
+.v-list__border {
+  border: 1px solid rgba(0,0,0,.1);
+}