ode-csslib 1.0.0-dev-produit.202209220950

package/scss/specifics/cahier-de-textes/generics/_toasts.scss

@@ -0,0 +1,107 @@
+.toasts {
+  position: fixed;
+  top: 74px;
+  right: 25px;
+  width: 350px;
+  z-index: 1000;
+  box-sizing: border-box;
+
+  @include mobile {
+    width: 100%;
+    right: 0;
+  }
+
+  .toast-content {
+    //@include material-card();
+    margin-bottom: 10px;
+    position: relative;
+    opacity: 0;
+    margin-top: 40px;
+    box-sizing: border-box;
+    font-size: 16px !important;
+    border-left: none !important;
+    height: 0 !important;
+    overflow: hidden;
+    transition: all 0.25s ease;
+
+    .content {
+      padding: 15px 10px;
+      line-height: 28px;
+
+      &:before {
+        @include fonticon();
+        margin-right: 10px;
+      }
+    }
+
+    &.show {
+      margin-top: 10px !important;
+      opacity: 1;
+      height: auto !important;
+      overflow: auto !important;
+    }
+
+    &.confirm {
+      color: darken($green, 35%);
+      background-color: lighten($green, 30%);
+
+      .content:before {
+        content: '\e871';
+      }
+
+      .timer {
+        background-color: darken($green, 15%);
+      }
+    }
+
+    &.info {
+      color: darken($cyan, 35%);
+      background-color: lighten($cyan, 30%);
+
+      .content:before {
+        content: '\e84b';
+      }
+
+      .timer {
+        background-color: darken($cyan, 15%);
+      }
+    }
+
+    &.warning {
+      color: darken($warning-color, 35%);
+      background-color: lighten($warning-color, 30%);
+
+      .content:before {
+        content: '\e903';
+      }
+
+      .timer {
+        background-color: darken($warning-color, 15%);
+      }
+    }
+
+    &.info, &.warning {
+      .content:before {
+        font-size: 20px !important;
+      }
+    }
+
+    .timer {
+      width: 100%;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      height: 4px;
+      border-bottom-left-radius: 2px;
+      border-bottom-right-radius: 2px;
+      transition-timing-function: linear;
+      transition-property: all;
+      transition-duration: 3s;
+
+      &.animation {
+        width: 0;
+        border-bottom-right-radius: 0;
+      }
+    }
+  }
+}

package/scss/specifics/calendar/_calendar.scss

@@ -0,0 +1,39 @@
+body.calendar {
+
+  @import "./mixins";
+  @import './components/index';
+
+  .calendar.widget {
+
+    span.last-events-widget {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: inline-block;
+      max-width: 100%;
+    }
+
+    .widget-list {
+      padding-right: 10px;
+    }
+
+    .calendar-detail-tooltip {
+      padding: 0px !important;
+    }
+  }
+
+  switch {
+    .switch {
+      .tick {
+        &:before {
+          height: 20px !important;
+          margin-top: 0 !important;
+        }
+      }
+    }
+  }
+
+  calendar .week-switcher .date-picker-icon {
+    margin-left: 0 !important;
+  }
+}

package/scss/specifics/calendar/_mixins.scss

@@ -0,0 +1,48 @@
+/*Calendar module colors*/
+$calendar-blue: #39a5ce;
+$calendar-white: #ffffff;
+$calendar-orange: #ff8500;
+$calendar-black: #000000;
+$calendar-grey: #8c939e;
+$calendar-ode-grey: #3F454F;
+
+
+/*Tooltip mixins*/
+
+
+@mixin tooltipTemplate($width) {
+  font-family: Roboto;
+  visibility: hidden;
+  width: $width;
+  font-size: 12px;
+  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.26);
+  position: absolute;
+  background-color: $calendar-white;
+  color: $calendar-black;
+  padding: 10px;
+  border-radius: 5px;
+  z-index: 1;
+  opacity: 0;
+}
+
+@mixin tooltipVisible() {
+  visibility: visible;
+  opacity: 1;
+  transition: opacity .6s;
+}
+
+@mixin tooltipBottomArrow() {
+  content: ' ';
+  position: absolute;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-top: 10px solid $calendar-white;
+}
+
+@mixin tooltipTopArrow() {
+  content: ' ';
+  position: absolute;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-bottom: 10px solid $calendar-white;
+}

package/scss/specifics/calendar/components/_edit-event.scss

@@ -0,0 +1,68 @@
+.editEvent {
+  &-itemColumn {
+    width: max-content;
+  }
+
+  &-attachments {
+    display: flex;
+    flex-direction: column;
+
+    &-buttonSection {
+      display: flex;
+      justify-content: left;
+
+      i {
+        transform: rotate(-45deg);
+      }
+
+    }
+    &-fileSection {
+      display: flex;
+      flex-wrap: wrap;
+
+      &-list {
+        max-width: 150px;
+
+        &-item {
+          display: flex;
+
+          &-title {
+            color: $calendar-blue;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          &-cross {
+            font-size: 10px;
+          }
+        }
+
+        &:hover .tooltip-title {
+          @include tooltipVisible();
+        }
+
+        .tooltip-title {
+          @include tooltipTemplate(150px);
+          bottom: 33px;
+          margin-left: -47px;
+
+          &:after {
+            @include tooltipBottomArrow();
+            top: 100%;
+            left: 15%;
+          }
+        }
+
+      }
+    }
+  }
+
+  .content .flex-row {
+    height: 150px;
+  }
+
+  .content::after {
+    content: unset;
+  }
+}

package/scss/specifics/calendar/components/_icons.scss

@@ -0,0 +1,9 @@
+i {
+  &.attachment::before {
+    content: "\e805";
+  }
+
+  &.cross::before {
+    content: "\e866";
+  }
+}

package/scss/specifics/calendar/components/_index.scss

@@ -0,0 +1,10 @@
+@import "additional.scss";
+@import "calendar";
+@import "jquery.timepicker";
+@import "timepicker";
+@import "fixCalendar";
+@import "toasts";
+@import "sidebar";
+@import "edit-event";
+@import "lightbox";
+@import "icons";

package/scss/specifics/calendar/components/_lightbox.scss

@@ -0,0 +1,29 @@
+.editRecurrentEvent {
+  section.lightbox {
+    .content {
+      padding: 0;
+
+      .lightbox-container {
+        padding: 15px;
+      }
+
+      .close-lightbox {
+        color: $calendar-white;
+      }
+    }
+
+    section.head {
+      background: $calendar-blue;
+      padding: 1px 15px !important;
+      border-radius: 5px 5px 0 0;
+
+      h1, h2, h3, h4, h5, h6 {
+        color: $calendar-white;
+      }
+    }
+
+    section.body {
+      padding: 8px 20px;
+    }
+  }
+}

package/scss/specifics/calendar/components/additional.scss

@@ -0,0 +1,154 @@
+.details label {
+	font-weight: bold;
+}
+
+.details p {
+	margin-top: 2px;
+	margin-bottom: 12px;
+	padding: 5px 0;
+}
+
+p.placeholder {
+	font-style: italic;
+}
+
+.accordions .accordion.opened .toggle {
+	overflow: auto !important;
+}
+
+.content {
+	margin: 5px;
+	padding-bottom: 5px;
+	padding-left: 5px;
+}
+
+div.disabled {
+	color: #888;
+}
+
+.centered-text {
+	text-align: center;
+}
+
+.scrollable-content {
+	max-height: 350px;
+	overflow: auto;
+}
+
+.scrollable-content-small {
+	max-height: 220px;
+	overflow: auto;
+}
+
+nav.vertical ul li i.caret {
+	height: 20px;
+	width: 25px;
+	display: block;
+	float: left !important;
+	color: #fff;
+	font-size: 25px;
+	font-family: Arial;
+	font-weight: 900;
+	line-height: 12px;
+}
+
+nav.vertical ul li i.caret::before {
+	content: "▸";
+}
+
+nav.vertical ul li i.caret.expanded::before {
+	content: "▾";
+}
+
+table.colored i.pending-icon::before {
+	content: "?";
+	height: 20px;
+	width: 20px;
+	display: block;
+	color: #000;
+	font-size: 21px;
+	font-family: Arial;
+	font-weight: 900;
+}
+
+div.schedule-item-content i.pending-status::before {
+	bottom: 12px !important;
+	right: 12px !important;
+	z-index: 502;
+}
+div.schedule-item-content i.validated-status {
+	bottom: 14px !important;
+	right: 12px !important;
+	z-index: 502;
+}
+
+div.schedule-item-content i.refused-status {
+	bottom: 15px !important;
+	right: 14px !important;
+	z-index: 502;
+}
+
+div.schedule-item-content {
+	padding: 5px !important;
+	text-align: left !important;
+	text-overflow: ellipsis;
+	white-space: initial !important;
+}
+
+div.schedule-item-content .checkbox {
+	position: absolute;
+	bottom: 12px;
+	z-index: 504;
+}
+
+.filters div.dates {
+	position: absolute;
+	right: 0px;
+	top: 4px;
+}
+
+.filters div.dates div.cell {
+	margin-right: 5px;
+	line-height: 40px;
+	vertical-align: middle;
+}
+
+.form-section select {
+	padding: 3px 1px;
+}
+
+.form-section input[type=radio] {
+	margin-top: 7px;
+}
+
+ul.colored a.notselected {
+	color: #fff !important;
+}
+
+ul.colored a.notselected:hover {
+	color : #fff !important;
+}
+
+ul.colored a.selected {
+	color : #fff !important;
+}
+
+.down-open {
+	padding-left :5px;
+}
+
+.multi-combo{
+	margin-top: 10px;
+	margin-bottom: 10px;
+}
+
+.warningEventView{
+	margin-top: 20px;
+	margin-bottom: 10px;
+}
+
+.ellipsis {
+	text-overflow: ellipsis;
+	overflow: hidden;
+	white-space: nowrap;
+}

package/scss/specifics/calendar/components/calendar.scss

@@ -0,0 +1,236 @@
+.color-selector .grey, .row .grey, nav.vertical ul li a {
+    overflow:hidden;
+}
+
+.backgroundOrangeTitle {
+    background: #ff8500;
+    color: #fff;
+}
+
+.backgroundBlueTitle {
+    background: #4bafd5;
+    color: #fff;
+    padding: 10px;
+}
+
+.color-selector .green, .row .green, nav.vertical ul li a.green, .calendarTooltip>.green {
+    background-color: #28c7a9 !important;
+}
+.color-selector .purple, .row .purple, nav.vertical ul li a.purple, .calendarTooltip>.purple {
+    background-color: #ab6fc9 !important;
+}
+.color-selector .orange, .row .orange, nav.vertical ul li a.orange, .calendarTooltip>.orange {
+    background-color: #f4ce01 !important;
+}
+.color-selector .pink, .row .pink, nav.vertical ul li a.pink, .calendarTooltip>.pink {
+    background-color: #ec6045 !important;
+}
+.color-selector .cyan, .row .cyan , nav.vertical ul li a.cyan, .calendarTooltip>.cyan {
+    background-color: $calendar-blue !important;
+}
+.color-selector .grey, .row .grey, nav.vertical ul li a.grey, .calendarTooltip>.grey {
+    background-color: #b7b8ba !important;
+}
+
+.color-selector .yellow, .row .yellow, nav.vertical ul li a.yellow, .calendarTooltip>.yellow {
+    background-color: #ecbe30 !important;
+}
+
+.color-selector .color {
+    border:1px #CCCCCC solid;
+    width:30px;
+    height:30px;
+    display:inline-block;
+    margin-left:5px;
+}
+
+.color-selector .color.selected {
+    border:2px black solid;
+}
+
+
+.patchwork .navigation .items > .row {
+    height:auto !important;
+}
+
+.patchwork .navigation .items > .row h1 {
+    color:black !important;
+    font-weight: normal !important;
+}
+
+.patchwork .navigation .items > .row .buttons {
+    z-index:1000 !important;
+}
+
+.colored li a {
+    opacity:0.4;
+    color:black;
+}
+
+.colored li a.selected {
+    opacity:1;
+}
+
+nav.vertical ul {
+    padding-left: 15px;
+    border-left: none;
+}
+
+nav.vertical > ul > li:not(:first-child) {
+    margin-top: 1rem;
+}
+
+nav.vertical ul li ul {
+    padding-left: 0;
+}
+
+nav.vertical ul li ul > li {
+    padding-left: 0;
+}
+
+nav.vertical ul li a input.calendar-checkbox {
+  float:right;
+}
+
+.filters div.dates {
+    position: absolute;
+    right: 0px;
+    top: 4px;
+}
+
+.filters div.dates div.cell {
+    line-height: 40px;
+    vertical-align: middle;
+}
+
+.toggle-buttons{
+    z-index:1000 !important;
+}
+
+button#special {
+    color: inherit;
+    padding: inherit;
+    background: inherit;
+    cursor: pointer;
+    padding: 0;
+    -webkit-margin-end: 0px;
+    text-transform: capitalize;
+    font-weight: 400;
+    line-height: 30px;
+    display: block;
+    width: 103%;
+    font-family: Roboto;
+    font-size: 20px;
+    margin-left: -10px;
+    margin-bottom: 3px;
+    margin-right: 3px;
+    margin-top: 3px;
+    padding-left: 10px;
+
+}
+
+button.noTransition {
+    -webkit-transition: none !important;
+    -moz-transition: none !important;
+    -o-transition: none !important;
+    -ms-transition: none !important;
+    transition: none !important;
+}
+
+
+calendar {
+    .displayModeButtons {
+        margin-top: 0;
+    }
+
+    i.calendar {
+        padding: 18px 40px;
+        background-image: none;
+
+        &::before {
+            content: '\e834';
+            font-family: 'generic-icons';
+            font-size: 3rem;
+            display: block;
+            color: #eac403;
+        }
+    }
+
+    legend, .legend>.month-day, button.cyan {
+        background: $calendar-blue !important;
+    }
+
+    button.previous-timeslots, button.next-timeslots {
+        margin-right: 0px;
+        margin-left: 0px;
+    }
+
+    .dates>i18n {
+        margin-left: 20px;
+    }
+
+    .dates>.date-picker-icon a {
+        width: 30px;
+        margin-left: 20px;
+    }
+
+    span {
+        overflow-wrap: break-word;
+    }
+
+    .calendar-current-week {
+        max-height: unset;
+    }
+}
+
+h1 a {
+    color: $calendar-blue !important;
+}
+
+.top-spacing-four {
+    margin-top: 0px !important;
+}
+
+.date-picker-icon>input[type=text] {
+    padding-left: 29px;
+}
+
+.calendarTooltip {
+    padding: 11px;
+    text-align: center;
+    background-color: $calendar-white !important;
+    max-width: 300px;
+
+    &-title{
+        color: $calendar-white !important;
+        border-radius: 9px;
+        padding: 1px 6px;
+    }
+
+    &-blueText{
+        color : $calendar-blue;
+    }
+}
+
+.sidebar-calendar-choice-view-item {
+    margin: .4rem 0;
+    justify-content: center;
+    align-items: center;
+}
+
+.show-calendar,
+.show-list {
+    height: 24px;
+}
+
+.schedule{
+    .hidden-schedule-items{
+        &.after{
+            bottom:-16px;
+        }
+    }
+    .days{
+        height:538px;
+    }
+}
+

package/scss/specifics/calendar/components/fixCalendar.scss

@@ -0,0 +1,14 @@
+.schedule .days .day .timeslots .timeslot hr {
+  border-bottom: thin solid #fff !important;
+}
+
+.schedule .days .day.single {
+  width: 100%
+}
+.datepicker{
+  display: none;
+}
+.schedule, .schedule list-view {
+  margin-top: 0px !important;
+  padding-top: 25px;
+}