@colijnit/sharedcomponents 1.0.61 → 1.0.62

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

@@ -1,443 +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 {
-      margin: 0.25em;
-      padding: 0.25em;
-      background: white;
-      pointer-events: none;
-      position: relative;
-      flex-basis: 100%;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      border: 1px solid $color-border;
-
-      .weekday-description, .weekday-value, .day-description {
-        color: $color-dark;
-      }
-
-      &.selectable {
-        pointer-events: all;
-      }
-
-
-
-      &.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;
-
-    }
-
-    .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;
-      }
-    }
-  }
-}
+@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 {
+      margin: 0.25em;
+      padding: 0.25em;
+      background: white;
+      pointer-events: none;
+      position: relative;
+      flex-basis: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      border: 1px solid $color-border;
+
+      .weekday-description, .weekday-value, .day-description {
+        color: $color-dark;
+      }
+
+      &.selectable {
+        pointer-events: all;
+      }
+
+
+
+      &.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;
+
+    }
+
+    .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;
+      }
+    }
+  }
+}