@everchron/ec-shards 0.0.12

package/src/components/tab-button/tab-button.vue

@@ -0,0 +1,413 @@
+<template>
+  <button class="ecs-tab-button"
+    :class="[
+      subtab ? `ecs-tab-button-child` : '',
+      show ? `show` : '',
+      badge ? `ecs-tab-button-badge` : '']"
+    :disabled="disabled"
+    @click="handleClick">
+
+    <ecs-icon v-if="icon" :type="icon" />
+    <ecs-icon v-if="icon && sticker" :type="`sticker-${sticker}`" class="sticker" size="16" />
+    <slot></slot>
+    <span v-if="shortcut" class="shortcut">{{ shortcut }}</span>
+    <span class="hover" />
+  </button>
+</template>
+
+<script>
+  import EcsIcon from '../icon/icon'
+
+  export default {
+    components: {
+      EcsIcon
+    },
+
+    props: {
+      /** Makes the tab button smaller as it's designed to be a sub tab button of a larger one. Sub tabs do only work with the `standard` tab bar style. */
+      subtab: {
+        type: Boolean,
+        default: false
+      },
+      /** Sets the icon of the tab button. */
+      icon: {
+        type: String
+      },
+      /** Turns the tab button into activated state, to indicate that this tab is currently opened. */
+      show: {
+        type: Boolean,
+        default: false
+      },
+      /** Adds a small badge to the tab button, to indicate some kind of activity, notifications, etc. that are related to this tab. */
+      badge: {
+        type: Boolean,
+        default: false
+      },
+      /** Adds an ecs-sticker to this tab button, check the Sticker component for available types. */
+      sticker: {
+        type: String
+      },
+      /** Disables the tab button. */
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      /** Adds a shortcut label to the tab button. Should only be used with `modal` tab bar variant. */
+      shortcut: {
+        type: String
+      }
+    },
+
+    computed: {
+
+    },
+
+    methods: {
+      handleClick (e) {
+        this.$emit('click', e)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+@import "../mixins/svg-uri";
+
+.ecs-tab-button{
+  transition: .2s;
+  position: relative;
+  cursor: pointer;
+
+  &:after{
+    content: "";
+    width: 6px;
+    height: 6px;
+    background: #157EFB;
+    border-radius: 100%;
+    transform: scale(0);
+    opacity: 0;
+    transition: .25s transform, .25s opacity;
+    pointer-events: none;
+    position: absolute;
+  }
+
+  &-badge:after{
+    transform: scale(1);
+    opacity: 1;
+  }
+
+  &:disabled{
+    opacity: .5;
+    pointer-events: none;
+  }
+
+  .sticker{
+    position: absolute;
+  }
+}
+
+.ecs-tab-bar-standard{
+  .ecs-tab-button{
+    color: $color-gray-10;
+    display: flex;
+    align-items: center;
+    font-size: $type-scale-3-font-size;
+    line-height: 30px;
+    z-index: 0;
+
+    &:before{
+      content: "";
+      position: absolute;
+      background: $color-blue-9;
+      transition: .2s;
+      opacity: 0;
+    }
+
+    .icon{
+      color: $color-gray-8;
+    }
+
+    .hover{
+      position: absolute;
+      border-radius: $border-radius-medium;
+      background: rgba($color-gray-6, .1);
+      opacity: 0;
+      transform: scale(.6);
+      transition: opacity .15s ease-in-out, transform .3s cubic-bezier(0.3, 0.76, 0.27, 1);
+      z-index: -1;
+      pointer-events: none;
+    }
+
+    &:hover .hover{
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    &.show{
+      color: $color-blue-10;
+
+      .icon{
+        color: $color-blue-9;
+      }
+
+      .hover{
+        background: rgba($color-blue-6, .1);
+      }
+
+      &:before{
+        opacity: 1;
+      }
+    }
+  }
+
+  &.ecs-tab-bar-row{
+    .ecs-tab-button{
+      padding: $spacing-10;
+      margin-right: $spacing-20;
+
+      &:after{
+        right: 0;
+        top: $spacing-10;
+      }
+
+      &:before{
+        width: 100%;
+        height: 2px;
+        left: 0;
+        bottom: -1px;
+        border-radius: $border-radius-x-small 2px 0 0;
+      }
+
+      &:last-child{
+        margin-right: 0;
+      }
+
+      .icon:not(.sticker){
+        margin: 0 4px 0 -4px;
+      }
+
+      .sticker{
+        left: $spacing-25;
+        bottom: $spacing-10;
+      }
+
+      .hover{
+        inset: 6px 0;
+      }
+    }
+  }
+
+  &.ecs-tab-bar-column{
+    .ecs-tab-button{
+      padding: 5px $spacing-5 5px $spacing-25;
+
+      &:after{
+        position: relative;
+        margin: 1px 0 0 8px;
+      }
+
+      &:before{
+        height: 100%;
+        width: 3px;
+        left: 0;
+        top: 0;
+        border-radius: 0 2px 2px 0;
+      }
+
+      .icon:not(.sticker){
+        margin: -5px 5px -5px -5px;
+      }
+
+      .sticker{
+        top: 20px;
+        left: 29px;
+      }
+
+      .hover{
+        inset: 0 $spacing-10;
+        transform-origin: left;
+      }
+
+      &.ecs-tab-button-child{
+        font-size: $type-scale-3-font-size;
+        padding: 2px 8px 2px 52px;
+      }
+    }
+  }
+}
+
+.ecs-tab-bar-sidebar{
+  .ecs-tab-button{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: $color-gray-8;
+    padding: 2px;
+    border-radius: $border-radius-small;
+    height: 34px;
+    width: 34px;
+    margin-bottom: 2px;
+
+    &:after{
+      right: 5px;
+      top: 5px;
+      width: 10px;
+      height: 10px;
+      border: 2px solid #E7E8EC;
+    }
+
+    &:last-child{
+      margin-bottom: 0;
+    }
+
+    &:hover{
+      color: darken($color-gray-10, 15%);
+      background: rgba($color-gray-10, .05);
+    }
+
+    &.show{
+      color: $color-gray-13;
+    }
+  }
+}
+
+.ecs-tab-bar-segment{
+  .ecs-tab-button{
+    border-radius: $border-radius-large;
+    color: $color-gray-10;
+    padding: 0 12px;
+    text-align: center;
+    font-size: $type-scale-3-font-size;
+    line-height: 26px;
+    text-transform: capitalize;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+
+    &:after{
+      position: absolute;
+      margin: -6px 0 0 2px;
+    }
+
+    &-badge:after{
+      position: relative;
+    }
+
+    .icon{
+      width: 20px;
+      height: 20px;
+      margin-right: 5px;
+    }
+
+    &.show{
+      color: $color-gray-13;
+      font-weight: $font-weight-medium;
+      background: #FFFFFF;
+      box-shadow: 0 0 0 1px rgba(0,0,0,0.04),
+                  0 3px 8px 0 rgba(0,0,0,0.12),
+                  0 3px 1px 0 rgba(0,0,0,0.04);
+    }
+  }
+}
+
+.ecs-tab-bar-sheet{
+  padding-left: 1px;
+  
+  .ecs-tab-button{
+    border-radius: 0 0 $border-radius-small $border-radius-small;
+    color: $color-gray-14;
+    height: 38px;
+    padding: 0 $spacing-25;
+    text-align: center;
+    font-size: $type-scale-3-font-size;
+    line-height: 26px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid transparent;
+    border-top-color: $color-gray-4;
+    position: relative;
+    margin-left: -1px;
+    transition: .2s background-color, .2s border-color, .2s color;
+
+    &:hover{
+      background-color: $color-gray-3;
+    }
+
+    &:before{
+      content: "";
+      height: 24px;
+      width: 1px;
+      background: $color-gray-4;
+      border-radius: 1px;
+      position: absolute;
+      left: 0;
+    }
+
+    &:after{
+      height: 2px;
+      width: auto;
+      left: 3px;
+      bottom: 3px;
+      top: auto;
+      right: 3px;
+      border-radius: $border-radius-x-small;
+    }
+
+    &.show{
+      color: $color-blue-10;
+      font-weight: $font-weight-medium;
+      letter-spacing: -.015em;
+      background: #FFFFFF;
+      border: 1px solid $color-gray-4;
+      border-top-color: #FFF;
+      z-index: 1;
+
+      &:after{
+        transform: scale(1);
+        opacity: 1;
+      }
+
+      + .ecs-tab-button:before{
+        opacity: 0;
+      }
+    }
+
+    &.show:before,
+    &:first-child:before{
+      opacity: 0;
+    }
+  }
+}
+
+.ecs-tab-bar-modal{
+  .ecs-tab-button{
+    font-size: $type-scale-4-font-size;
+    line-height: 24px;
+    color: $color-gray-15;
+    display: flex;
+    align-items: center;
+    transition: .2s;
+    height: 48px;
+    padding: 0 16px;
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+
+    &:hover{
+      background: rgba($color-gray-10, .05);
+    }
+
+    &.show{
+      background: #FFF;
+    }
+
+    .shortcut{
+      color: $color-gray-6;
+      font-size: $type-scale-2-font-size;
+      margin-left: 8px;
+    }
+  }
+}
+</style>

package/src/components/tabs/tabs.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="ecs-tab-content" :class="[fill ? 'ecs-tab-content-fill' : '']">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      /** Sets the height of the tabs area to 100%. */
+      fill: {
+        type: Boolean,
+        default: false
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+@import "../mixins/svg-uri";
+
+.ecs-tab-content-fill{
+  height: 100%;
+  width: 100%;
+  min-height: 0;
+
+  .ecs-tab-pane{
+    height: 100%;
+    width: 100%;
+  }
+}
+</style>

package/src/components/tag/tag.vue

@@ -0,0 +1,256 @@
+<template>
+  <span class="ecs-tag"
+    :class="[
+      typeClass,
+      active ? `active` : '',
+      hover ? `hover` : '',
+      loading ? `loading` : ''
+      ]"
+      @click="handleClick">
+
+    <slot></slot>
+    <span class="count" v-if="count">{{count}}</span>
+    <ecs-skeleton-loader v-if="loading" type="single" :width="100" style="width: calc(100% - 20px)" />
+  </span>
+</template>
+
+<script>
+  import EcsSkeletonLoader from '../skeleton-loader/skeleton-loader'
+
+  export default {
+    components: { EcsSkeletonLoader },
+
+    props: {
+      /** Determines the visual style of the tag. */
+      type: {
+        type: String,
+        validator: v => ['regular', 'filter', 'party', 'group', null].includes(v),
+        default: 'regular'
+      },
+      /** Only to be used together with the `party` type. Determines the party side color of the tag. */
+      party: {
+        type: String,
+        validator: v => ['client', 'opposing', 'joint', 'other', 'court', 'unaffiliated', null].includes(v)
+      },
+      /** The tag filter count. Only to be used with the `filter` type. */
+      count: {
+        type: Number,
+        default: null
+      },
+      /** Turns the tag into an active state. */
+      active: {
+        type: Boolean,
+        default: false
+      },
+      /** Determines if the tag should have a mouse over effect. */
+      hover: {
+        type: Boolean,
+        default: false
+      },
+      /** Turns the tag into loading/fetching state. */
+      loading: {
+        type: Boolean,
+        default: false
+      }
+    },
+
+    computed: {
+      typeClass() {
+        if (this.type && this.type !== '')
+          if (this.type === 'group')
+            return `ecs-tag-round ecs-tag-${this.type}`
+          if (this.type === 'party' && this.party && this.party !== '')
+            return `ecs-tag-party-${this.party}`
+          else
+            return `ecs-tag-${this.type}`
+        return this.type
+      }
+    },
+    methods: {
+      handleClick (e) {
+        this.$emit('click', e)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+@import "../mixins/svg-uri";
+
+.ecs-tag{
+  text-decoration: none;
+  line-height: 26px;
+  padding: 0 10px;
+  border-radius: $border-radius-small;
+  font-size: $type-scale-3-font-size;
+  transition: .2s;
+  display: inline-block;
+  position: relative;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+  &.hover,
+  &.active{
+    cursor: pointer;
+  }
+
+  .count{
+    opacity: .4;
+    font-size: $type-scale-1-font-size;
+    margin-left: 3px;
+  }
+
+  &-round{
+    border-radius: 30px;
+  }
+
+  &-regular{
+    background: #D5EBFF;
+    color: #00417A;
+
+    &.hover:hover{
+      background: #C6E4FF;
+    }
+
+    &.active{
+      background: $color-blue-5;
+      color: $color-blue-15;
+    }
+  }
+
+  &-filter{
+    background: #FFF;
+    color: rgba($color-gray-10, .8);
+    box-shadow: 0 0 0 1px rgba($color-gray-8, .25) inset;
+
+    &.hover{
+      &:hover{
+        color: $color-gray-10;
+        box-shadow: 0 0 0 1px rgba($color-gray-8, .3) inset, 0 1px 2px rgba($color-gray-8, .15);
+      }
+
+      &:active{
+        background: rgba($color-gray-6, .1);
+        box-shadow: 0 0 0 1px rgba($color-gray-8, .3) inset;
+      }
+    }
+
+    &.active{
+      background: #D5EBFF;
+      color: #00417A;
+      box-shadow: 0 0 0 1px rgba($color-gray-8, .2) inset;
+
+      &.hover:hover{
+        background: #C6E4FF;
+        color: #00417A;
+        box-shadow: 0 0 0 1px rgba($color-gray-8, .2) inset;
+      }
+    }
+  }
+
+  &-party-client{
+    background: $color-party-client-background;
+    color: $color-party-client-content;
+
+    &.hover:not(.active):hover{
+      background: darken($color-party-client-background, 5%);
+    }
+
+    &.active{
+      color: #FFF;
+      background: darken($color-party-client-background, 40%);
+    }
+  }
+
+  &-party-opposition,
+  &-party-opposing{
+    background: $color-party-opposing-background;
+    color: $color-party-opposing-content;
+
+    &.hover:not(.active):hover{
+      background: darken($color-party-opposing-background, 5%);
+    }
+
+    &.active{
+      color: #FFF;
+      background: darken($color-party-opposing-background, 40%);
+    }
+  }
+
+  &-party-joint{
+    background: $color-party-joint-background;
+    color: $color-party-joint-content;
+
+    &.hover:not(.active):hover{
+      background: darken($color-party-joint-background, 5%);
+    }
+
+    &.active{
+      color: #FFF;
+      background: darken($color-party-joint-background, 40%);
+    }
+  }
+
+  &-party-other{
+    background: $color-party-other-background;
+    color: $color-party-other-content;
+
+    &.hover:not(.active):hover{
+      background: darken($color-party-other-background, 5%);
+    }
+
+    &.active{
+      color: #FFF;
+      background: darken($color-party-other-background, 40%);
+    }
+  }
+
+  &-party-court{
+    background: $color-party-court-background;
+    color: $color-party-court-content;
+
+    &.hover:not(.active):hover{
+      background: darken($color-party-court-background, 5%);
+    }
+
+    &.active{
+      color: #FFF;
+      background: darken($color-party-court-background, 40%);
+    }
+  }
+
+  &-group,
+  &-party-unaffiliated{
+    background: $color-gray-3;
+    color: $color-gray-10;
+
+    &.hover:not(.active):hover{
+      background: $color-gray-4;
+      color: $color-gray-11;
+    }
+
+    &.active{
+      color: #FFF;
+      background: $color-gray-7;
+    }
+  }
+
+  &.loading{
+    background: $color-gray-4;
+    box-shadow: none;
+    color: transparent;
+    pointer-events: none;
+    transition: none;
+  }
+
+  .ecs-skeleton{
+    position: absolute;
+    top: 50%;
+    margin-top: -8px;
+    left: 10px;
+  }
+}
+</style>

package/src/components/tag-cloud/tag-cloud.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="ecs-tag-cloud d-flex flex-wrap">
+    <slot></slot>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.ecs-tag-cloud{
+  margin-bottom: -6px;
+
+  .ecs-tag{
+    margin: 0 6px 6px 0;
+  }
+
+  .ecs-tag-round{
+    margin: 0 10px 8px 0;
+  }
+}
+</style>