@colijnit/sharedcomponents 1.0.24 → 1.0.26

package/lib/components/date-planning/component/agenda/style/_layout.scss

@@ -0,0 +1,443 @@
+@import "../../../../../style/mixin";
+
+@include export-module('sc-agenda') {
+  .sc-agenda {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+    overflow: hidden;
+
+    .no-user-select {
+      user-select: none;
+    }
+
+    .agenda-header-wrapper {
+      display: flex;
+      width: inherit;
+      height: $agenda-week-view-header-height;
+      background: white;
+      z-index: 9001;
+    }
+
+    .week-day {
+      display: flex;
+      position: relative;
+      flex-basis: 100%;
+    }
+
+    .content-wrapper {
+      display: flex;
+      width: 100%;
+      height: 100%;
+      flex-wrap: wrap;
+    }
+
+    .hour-label-placeholder {
+      display: flex;
+      flex-basis: $agenda-hour-view-labels-width;
+      flex-shrink: 0;
+      border: 1px solid $color_border;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .week-day-label {
+      background: #f1f1f1;
+      pointer-events: none;
+      position: relative;
+      flex-basis: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      border: 1px solid $color_border;
+
+      &.selectable {
+        pointer-events: all;
+      }
+
+      &.selected {
+        background: white;
+
+        .weekday-description, .weekday-value {
+          color: $color-active-light;
+        }
+      }
+
+      &.selectable:not(.selected) {
+        cursor: pointer;
+        color: $color-label;
+
+        &:not(:hover) {
+          background: none;
+
+          .weekday-description, .weekday-value, .day-description {
+            color: $color-dark;
+          }
+        }
+      }
+
+      .add-unit-icon, .sub-unit-icon {
+        pointer-events: all;
+      }
+
+      &:hover {
+        background: $color_border;
+      }
+    }
+
+    .weekday-description {
+      color: $color-inactive-day;
+      font-size: 14px;
+      text-transform: uppercase;
+      margin-top: 7px;
+    }
+
+    .weekday-value {
+      color: $color-inactive-day;
+      font-size: $agenda-week-label-value-font-size;
+      font-weight: bold;
+    }
+
+    .sub-unit-icon {
+      position: absolute;
+      left: 7px;
+    }
+
+    .add-unit-icon {
+      position: absolute;
+      right: 7px;
+    }
+
+    .day-description {
+      color: $color-inactive-day;
+      font-size: $agenda-week-label-value-font-size;
+      font-weight: bold;
+    }
+
+    .month-description {
+      top: 1px;
+      left: 3px;
+      font-size: 11px;
+      text-transform: capitalize;
+      position: absolute;
+      width: 100px;
+    }
+
+    .view-wrapper {
+      display: flex;
+      width: 100%;
+      margin-top: -1px;
+    }
+
+    .week-select-view {
+      display: flex;
+      position: relative;
+      padding: 50px;
+      height: 100%;
+    }
+
+    .week-day {
+      display: flex;
+      position: relative;
+      flex-basis: 100%;
+    }
+
+    @media screen and (max-width: $xs-width) {
+      .popup-card-content {
+        padding: 0 0 15px !important;
+      }
+    }
+    @media screen and (min-width: $sm-width) {
+      .select-agenda-button {
+        left: 50px;
+        float: left;
+        position: absolute;
+        bottom: 0;
+      }
+    }
+
+    agenda {
+      position: relative;
+    }
+
+    .agenda-content-wrapper {
+      min-width: 0 !important;
+    }
+
+    agenda-header {
+      width: 100% !important;
+    }
+
+    .agenda-header-wrapper {
+      padding: 0 50px;
+      height: auto;
+
+      .week-day-label {
+
+        .sub-unit-icon {
+          height: 100%;
+          width: 50px;
+          left: -50px;
+        }
+
+        .add-unit-icon {
+          height: 100%;
+          width: 50px;
+          right: -50px;
+        }
+
+        @media screen and (max-width: $xs-width) {
+          .sub-unit-icon {
+            width: 25px;
+            left: -25px;
+          }
+
+          .add-unit-icon {
+            width: 25px;
+            right: -25px;
+          }
+        }
+
+        .weekday-description {
+          font-size: 14px;
+          line-height: 20px;
+        }
+
+        .weekday-value {
+          line-height: 30px;
+        }
+
+        @media screen and (min-width: $sm-width) {
+          .weekday-value {
+            font-size: 18px;
+          }
+        }
+        @media screen and (max-width: $xs-width) {
+          .weekday-value {
+            line-height: 20px;
+            font-size: 9px;
+          }
+        }
+      }
+    }
+
+    @media screen and (max-width: $xs-width) {
+      .agenda-header-wrapper {
+        padding: 0 25px;
+        height: 60px !important;
+      }
+    }
+
+      .view-wrapper {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+
+        .week-day {
+          display: flex;
+          width: 100%;
+          height: 100%;
+
+          .week-select-container {
+            display: flex;
+            width: 100%;
+
+            .week-select-left {
+              width: 40%;
+
+              .no-events-banner {
+                display: flex;
+                width: 100%;
+                padding: 15px;
+                border-radius: 4px;
+                justify-content: space-evenly;
+                border: 1px solid #f7f5f4;
+                box-shadow: 0 0 15px 0 rgba(72, 79, 96, .30);
+              }
+
+              .week-select-list {
+                height: 100%;
+                padding: 10px;
+                margin: -10px 0 0 -10px;
+
+                agenda-events {
+                  position: static;
+                  flex-direction: column;
+                  height: auto;
+
+                  agenda-select-event {
+                    position: static;
+                    width: 100%;
+                    display: flex;
+                    margin: 0 0 20px;
+                    height: auto;
+
+                    &:last-child {
+                      margin: 0;
+                    }
+
+                    &:hover .week-select-item {
+                      background: $color_border;
+                    }
+
+                    .week-select-item {
+                      display: flex;
+                      width: 100%;
+                      padding: 30px 25px 30px 100px;
+                      border-radius: 4px;
+                      justify-content: space-evenly;
+                      border: 1px solid #f7f5f4;
+                      list-style-type: none;
+                      position: relative;
+                      cursor: pointer;
+                      box-shadow: 0 0 15px 0 rgba(72, 79, 96, .30);
+
+                      &.selected {
+                        background: $color-active-light;
+                        border-color: $color-active-light;
+                        color: #fff;
+
+                        .select-icon {
+                          path {
+                            fill: #fff !important;
+                          }
+
+                          polygon {
+                            fill: #fff !important;
+                          }
+                        }
+                      }
+
+                      .select-icon {
+                        height: 50px;
+                        width: 100px;
+                        position: absolute;
+                        left: 0;
+                        top: 50%;
+                        margin: -25px 0 0;
+                        opacity: 1;
+                      }
+
+                      @media screen and (max-width: $xs-width) {
+                        .select-icon {
+                          height: 40px;
+                          width: 80px;
+                          margin: -20px 0 0;
+                        }
+                      }
+
+                      .moment-name {
+                        display: flex;
+                        align-items: flex-start;
+                        width: 100%;
+                        flex-direction: column;
+
+                        h2 {
+                          margin: 5px 0 0;
+                        }
+
+                      }
+
+                    }
+
+                    @media screen and (max-width: $xs-width) {
+                      .week-select-item {
+                        padding: 20px 25px 20px 80px;
+                      }
+                    }
+
+                  }
+                }
+
+              }
+            }
+
+            @media screen and (max-width: $md-width) {
+              .week-select-left {
+                width: 50%;
+              }
+            }
+            @media screen and (max-width: $sm-width) {
+              .week-select-left {
+                width: 100%;
+                height: 100%;
+                display: flex;
+                flex-direction: column;
+                margin: 0 0 20px;
+              }
+            }
+            @media screen and (max-width: $xs-width) {
+              .week-select-left {
+                h3 {
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .week-select-right {
+              width: 50%;
+              padding: 0 0 0 50px;
+
+              li {
+                display: flex;
+                align-items: center;
+                margin: 10px 0;
+                line-height: 190%;
+                list-style-type: none;
+
+                .moment-icon {
+                  float: left;
+                  margin: 0 0 0 -50px;
+                  width: 30px;
+                  height: 35px;
+                }
+              }
+            }
+
+            @media screen and (max-width: $sm-width) {
+              .week-select-right {
+                display: flex;
+                flex-direction: column;
+                width: 100%;
+                padding: 0 0 40px;
+              }
+            }
+            @media screen and (max-width: $xs-width) {
+              .week-select-right {
+                font-size: 13px;
+
+                h3 {
+                  font-size: 14px;
+                }
+
+                li {
+                  margin: 10px 0;
+                }
+              }
+            }
+          }
+
+          @media screen and (max-width: $sm-width) {
+            .week-select-container {
+              flex-direction: column-reverse;
+            }
+          }
+        }
+      }
+
+    @media screen and (max-width: $sm-width) {
+      :host {
+        flex-direction: column;
+        padding: 50px 50px 0;
+      }
+    }
+
+    @media screen and (max-width: $xs-width) {
+      :host {
+        padding: 25px 25px 0;
+      }
+    }
+  }
+}

package/lib/components/date-planning/component/agenda/style/_material-definition.scss

@@ -0,0 +1,11 @@
+$agenda-week-view-header-height: 100px;
+$agenda-hour-view-labels-width: 80px;
+$color-active-light: #74B77F;
+$color-label: #5B6875;
+$color-dark: #171721;
+$color-inactive-day: rgba($color-dark, 0.2);
+$agenda-week-label-value-font-size: 2vw;
+$xs-width: 600px;
+$sm-width: 960px;
+$md-width: 1280px;
+$lg-width: 1920px;

package/lib/components/date-planning/component/agenda/style/_theme.scss

@@ -0,0 +1,7 @@
+@import "../../../../../style/mixin";
+
+@include export-module('sc-agenda-theme') {
+  .sc-agenda {
+
+  }
+}

package/lib/components/date-planning/component/agenda/style/material.scss

@@ -0,0 +1,5 @@
+@import "./material-definition";
+@import "./layout";
+@import "./theme";
+
+

package/lib/components/date-planning/component/calendar/style/_layout.scss

@@ -0,0 +1,167 @@
+@import "../../../../../style/mixin";
+
+@include export-module('sc-calendar') {
+  .sc-calendar {
+
+    .calendar-header-row{
+      flex-direction: row;
+      box-sizing: border-box;
+      display: flex;
+      place-content: center space-between;
+      align-items: center;
+    }
+
+    .pointer-hover {
+      cursor: pointer;
+    }
+
+    icon {
+      width: 20px;
+      height: 20px;
+    }
+
+    .month, .year {
+      user-select: none;
+    }
+
+    .month {
+      margin-right: 10px;
+    }
+
+    .select-month-year-window {
+      z-index: 9001;
+      background: white;
+    }
+
+    default-ok-cancel-buttons {
+      align-self: center;
+    }
+
+    .vertical-divider {
+      flex: 0 0;
+      padding: 0;
+      height: 80%;
+      flex-basis: 1px;
+      margin-top: 5px;
+    }
+
+    .selected-month {
+      color: $color-light;
+    }
+
+    .input-date-window {
+      &.expanded {
+        box-shadow: 0 0 5px 0 rgba(72,79,96,0.25);
+        border: 1px solid;
+        border-radius: 5px;
+      }
+      position: relative;
+      z-index: 1000;
+      transform-origin: center;
+      pointer-events: none;
+    }
+
+    .calendar-content {
+      pointer-events: initial;
+      background: $color-light;
+    }
+
+    .month-changer {
+      height: 40px;
+      .month-change {
+        opacity: 0.5;
+        &:hover {
+          opacity: 1;
+        }
+      }
+    }
+
+    .month-year-display {
+      margin-left: 10px;
+    }
+
+    .view-changer icon {
+      width: 20px;
+      height: 20px;
+      [fill] {
+        fill: $color-action;
+      }
+    }
+
+
+    .week-row {
+      flex-direction: row;
+      box-sizing: border-box;
+      display: flex;
+      > div {
+        flex: 1;
+        text-align: center;
+        line-height: 33px;
+      }
+    }
+
+    .week-day-label,
+    .week-acronym,
+    .week-number {
+      background: $color-less-light;
+    }
+
+    .week-day-label,
+    .week-number {
+      font-weight: bold;
+      border: 0 solid $color-light;
+    }
+
+    .week-number {
+      border-top-width: 1px;
+    }
+
+    .week-day-label {
+      border-left-width: 1px;
+    }
+
+    .week-acronym {
+      color: $color-grey;
+    }
+
+    .calendar-view,
+    .week-day {
+      cursor: pointer;
+      border: 1px solid transparent;
+      &.in-month {
+        color: $color-dark;
+      }
+      &.is-selected,
+      &:hover {
+        color: $color-light;
+        font-weight: normal;
+      }
+      &.is-today {
+        color: $color-action;
+        font-weight: bold;
+      }
+      &.is-selected {
+        color: $color-light;
+        background: $color-active !important;
+        border-color: $color-active !important;
+        border-radius: 0;
+      }
+      &:hover {
+        background: $color-active-accent;
+        border-color: $color-active-accent;
+      }
+    }
+
+    .week-day {
+      color: $color-grey;
+      //border-radius: 50%;
+    }
+
+    .calendar-view {
+      line-height: 45px;
+      text-align: center;
+      border-radius: 10px;
+      width: 69px;
+    }
+  }
+}

package/lib/components/date-planning/component/calendar/style/_material-definition.scss

@@ -0,0 +1,7 @@
+$color-grey: #DAD9D9;
+$color-active-accent: #8faba6;
+$color-active: #429777;
+$color-light: #FFFFFF;
+$color-dark: #171721;
+$color-less-light: #F7FAFA;
+$color-action: #4682b4;

package/lib/components/date-planning/component/calendar/style/_theme.scss

@@ -0,0 +1,7 @@
+@import "../../../../../style/mixin";
+
+@include export-module('sc-calendar-theme') {
+  .sc-calendar {
+
+  }
+}

package/lib/components/date-planning/component/calendar/style/material.scss

@@ -0,0 +1,5 @@
+@import "./material-definition";
+@import "./layout";
+@import "./theme";
+
+

package/lib/components/date-planning/style/_layout.scss

@@ -0,0 +1,47 @@
+@import "../../../style/mixin";
+
+@include export-module('sc-date-planning-layout') {
+  .sc-date-planning {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    min-height: 0;
+
+    .content-wrapper {
+      display: flex;
+      width: 100%;
+      flex-wrap: wrap;
+      height: 100%;
+    }
+
+    .agenda-wrapper {
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+      height: 100%;
+      overflow: hidden;
+    }
+
+    .agenda-content-wrapper {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      overflow: auto;
+      min-width: 400px;
+      flex-basis: 66%;
+      flex-grow: 1;
+      max-height: 100%;
+    }
+
+    .agenda-content {
+      width: 100%;
+      height: 100%;
+      flex-direction: column;
+    }
+
+    calendar {
+      flex-basis: 33%;
+      flex-grow: 1;
+    }
+  }
+}

package/lib/components/date-planning/style/_theme.scss

@@ -0,0 +1,7 @@
+@import "../../../style/mixin";
+
+@include export-module('sc-date-planning-theme') {
+  .sc-date-planning {
+
+  }
+}