ode-csslib 1.0.0-dev-produit.202209220950

package/scss/modules/_tables.scss

@@ -0,0 +1,238 @@
+table {
+  border-collapse: collapse;
+  margin-bottom: 20px;
+  tr {
+    border-top: 1px solid #ccc;
+    background: transparent;
+    @include run-transition(background);
+  }
+  tr.checked {
+    background: #eee;
+  }
+  tr.disabled {
+    color: #999;
+  }
+  tr.overline {
+    border-bottom: none;
+  }
+
+  tr.underline {
+    border-top: none;
+  }
+
+  tr.nested-root {
+    border-left: 3px solid $primary;
+  }
+  tr.nested-child {
+    border-left: 3px solid $primary-light;
+  }
+}
+
+td.icon {
+  width: 25px !important;
+  height: 25px !important;
+  position: relative;
+}
+
+td.text {
+  min-width: 150px !important;
+}
+
+td.main-cell {
+  width: 100% !important;
+}
+
+.light-style {
+  tr {
+    border: 1px solid #fff;
+  }
+}
+
+.table-condensed {
+  font-size: 12px;
+  tr {
+    td,
+    th {
+      padding: 0;
+    }
+  }
+}
+
+.blogs-posts-list table {
+  table-layout: fixed;
+}
+
+table.sticky-header thead tr th,
+table.sticky-header thead tr td {
+  background: $primary;
+  color: $white;
+  border: none;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+table th .sortable {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+table th .sortable .icons {
+  display: flex;
+  flex-direction: column;
+  float: left;
+}
+
+table th .sortable .icons i {
+  margin: 0;
+}
+
+table th .sortable .icons i.arrow:before {
+  font-size: 10px;
+}
+table.darkgrey tbody tr *,
+table.darkgrey tbody tr.checked *,
+table.darkgrey tbody tr.checked:hover * {
+  color: $darkest-grey;
+}
+table.primary-hover tbody tr:hover * {
+  color: $orange;
+}
+
+.fixed-head {
+  & + .row {
+    -webkit-overflow-scrolling: touch;
+  }
+}
+.responsive-table {
+  margin: 30px 0;
+  border: 1px solid $medium-grey;
+  line-height: 18px;
+  font-size: 14px;
+  .fixed-head {
+    margin-bottom: 0;
+    background: $white;
+    border-collapse: initial;
+    //	z-index: 99;
+
+    th {
+      text-align: center;
+      padding: 10px;
+      width: 20%;
+    }
+    tr {
+      border: none;
+    }
+    tr:hover {
+      background: transparent;
+    }
+    td:hover {
+      background: transparent;
+    }
+  }
+
+  table {
+    width: 100%;
+    box-sizing: border-box;
+    background: transparent;
+    margin-bottom: 0;
+
+    thead {
+      tr {
+        font-weight: bold;
+        color: $black;
+        border-top: 1px solid $medium-grey;
+      }
+      td {
+        padding: 10px;
+        position: relative;
+        font-size: 14px;
+      }
+    }
+    tbody {
+      tr {
+        td {
+          padding: 10px;
+          font-size: 14px;
+        }
+      }
+    }
+    td {
+      text-align: center;
+      width: 20%;
+    }
+    td:first-child {
+      text-align: left;
+    }
+  }
+  thead.slided + tbody {
+    //cause display block slide
+    display: table-row-group !important;
+  }
+  input[type="radio"] {
+    cursor: pointer;
+  }
+}
+.row.my-notifications .responsive-table {
+  .fixed-head tbody tr:hover {
+    background: transparent;
+  }
+}
+
+.share .responsive-table {
+  thead tr {
+    border-top: none;
+    color: $white;
+  }
+}
+@media screen and (max-width: $fat-mobile) {
+  .responsive-table {
+    border: 0;
+
+    table.fixed-head {
+      display: none;
+    }
+
+    table {
+      margin-bottom: 15px;
+      display: block;
+
+      thead,
+      tbody,
+      tr,
+      td {
+        display: block;
+      }
+      tr {
+        margin: 10px 2px;
+        box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.4);
+        border: none;
+      }
+      thead td,
+      td {
+        width: auto;
+        padding: 15px 10px;
+      }
+      td:before {
+        content: attr(data-label);
+        display: block;
+        text-align: center;
+        text-transform: uppercase;
+      }
+      td:first-child {
+        padding: 15px 25px;
+        text-transform: uppercase;
+        font-weight: bold;
+        font-size: 16px;
+        text-align: center;
+        border-bottom: 1px solid $medium-grey;
+      }
+      tbody {
+        td:first-child {
+          border-top: 1px solid $medium-grey;
+        }
+      }
+    }
+  }
+}

package/scss/modules/_tabs.scss

@@ -0,0 +1,116 @@
+.tabs {
+  text-align: center;
+
+  > * {
+    text-align: initial;
+  }
+
+  header {
+    display: inline-block;
+    padding: 6px;
+    background: #eee;
+    font-size: 14px;
+    font-weight: bold;
+    text-transform: uppercase;
+    background: transparent;
+    margin-right: 10px;
+    position: relative;
+
+    &:hover {
+      &::after {
+        transform: scaleX(1);
+      }
+    }
+
+    i {
+      font-weight: normal;
+      font-size: 24px;
+      margin-top: -2px;
+      margin-right: 6px;
+      display: inline-block;
+      vertical-align: middle;
+    }
+
+    i18n {
+      display: inline-block;
+    }
+
+    &::after {
+      content: " ";
+      display: block;
+      transform: scaleX(0);
+      height: 2px;
+      width: 100%;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      transition: transform 250ms ease;
+    }
+  }
+
+  header.selected {
+    &::after {
+      transform: scaleX(1);
+    }
+  }
+
+  section {
+    margin-top: -1px;
+    border: 1px solid;
+    padding: 6px;
+    position: relative;
+  }
+}
+
+.tabs.heading-tabs {
+  display: flex;
+  justify-content: space-between;
+  box-sizing: border-box;
+  margin-bottom: 2rem !important;
+  overflow-x: auto;
+
+  > * {
+    text-align: initial;
+  }
+
+  header {
+    cursor: pointer;
+    flex: 1;
+    text-align: center;
+    white-space: nowrap;
+    margin: 0 0.4rem;
+    padding: 0.625rem 1.5rem;
+    transition: color 250ms ease;
+
+    a {
+      vertical-align: middle;
+
+      i {
+        font-size: 15px;
+        margin-right: 5px;
+      }
+
+      &:hover {
+        color: $primary;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: $tablette) {
+  .tabs.heading-tabs {
+    header {
+      font-size: 12px;
+    }
+  }
+}
+
+@media screen and (max-width: $fat-mobile) {
+  .tabs.heading-tabs {
+    header {
+      &.selected {
+        order: -1;
+      }
+    }
+  }
+}

package/scss/modules/_ticket-card.scss

@@ -0,0 +1,66 @@
+.ticket-card {
+  @include run-transition(all);
+  position: relative;
+  padding: 5px;
+  overflow: hidden;
+  height: 92px;
+  box-sizing: border-box;
+  cursor: pointer;
+
+  figure {
+    position: absolute;
+    top: 50%;
+    left: 13px;
+    margin: 0;
+    margin-top: -25px;
+    padding: 0;
+    border-radius: 50%;
+    @include run-transition(all);
+    i {
+      width: 50px;
+      height: 50px;
+      display: block;
+      text-align: center;
+      line-height: 50px;
+      font-size: 24px;
+    }
+  }
+  section {
+    margin-left: 70px;
+    margin-top: 5px;
+    h5 {
+      margin: 0;
+      line-height: normal;
+      padding-top: 13px;
+      span {
+        font-size: 13px;
+      }
+    }
+    p,
+    em {
+      overflow: hidden;
+      display: block;
+      height: 27px;
+      margin: 0;
+      padding: 5px 2px 0 2px;
+      font-size: 9px;
+      line-height: normal;
+      vertical-align: middle;
+      text-align: left;
+    }
+    p {
+      font-size: 11px;
+    }
+  }
+  section + i {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    padding: 0px 10px 5px 12px;
+    font-weight: bold;
+    font-size: 22px;
+    letter-spacing: 1px;
+    line-height: normal;
+    @include run-transition(all);
+  }
+}

package/scss/modules/_timeline-story.scss

@@ -0,0 +1,71 @@
+.timeline-story {
+  position: relative;
+
+  &::before {
+    content: " ";
+    position: absolute;
+    top: 0;
+    width: 5px;
+    height: 100%;
+    left: 12.3%;
+  }
+  .event-row {
+    margin-top: 25px;
+
+    .date-field,
+    .event {
+      height: 54px;
+      @include grid-cell-width(1);
+    }
+    .date-field {
+      text-align: center;
+      line-height: 54px;
+
+      .label {
+        vertical-align: middle;
+        line-height: normal;
+        display: inline-block;
+        text-align: left;
+      }
+    }
+    .event {
+      .round {
+        position: absolute;
+        left: 50%;
+        margin-left: -10px;
+        top: 50%;
+        margin-top: -10px;
+      }
+    }
+
+    .event-description {
+      max-height: 54px;
+      overflow: hidden;
+
+      .mobile-label {
+        display: none;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: $tablette) {
+  .timeline-story {
+    &::before {
+      left: 3.8%;
+    }
+    .event-row {
+      .date-field {
+        display: none;
+      }
+
+      .event-description {
+        max-height: 74px;
+
+        .mobile-label {
+          display: block;
+        }
+      }
+    }
+  }
+}

package/scss/modules/_timepicker.scss

@@ -0,0 +1,146 @@
+/*!
+ * Timepicker Component for Twitter Bootstrap
+ *
+ * Copyright 2013 Joris de Wit
+ *
+ * Contributors https://github.com/jdewit/bootstrap-timepicker/graphs/contributors
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+.bootstrap-timepicker {
+  position: relative;
+}
+.bootstrap-timepicker.pull-right .bootstrap-timepicker-widget.dropdown-menu {
+  left: auto;
+  right: 0;
+}
+.bootstrap-timepicker.pull-right
+  .bootstrap-timepicker-widget.dropdown-menu:before {
+  left: auto;
+  right: 12px;
+}
+.bootstrap-timepicker.pull-right
+  .bootstrap-timepicker-widget.dropdown-menu:after {
+  left: auto;
+  right: 13px;
+}
+.bootstrap-timepicker .add-on {
+  cursor: pointer;
+}
+.bootstrap-timepicker .add-on i {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+}
+.bootstrap-timepicker-widget.dropdown-menu {
+  padding: 4px;
+}
+.bootstrap-timepicker-widget.dropdown-menu.open {
+  display: inline-block;
+}
+
+.bootstrap-timepicker-widget.timepicker-orient-left:before {
+  left: 6px;
+}
+.bootstrap-timepicker-widget.timepicker-orient-left:after {
+  left: 7px;
+}
+.bootstrap-timepicker-widget.timepicker-orient-right:before {
+  right: 6px;
+}
+.bootstrap-timepicker-widget.timepicker-orient-right:after {
+  right: 7px;
+}
+.bootstrap-timepicker-widget.timepicker-orient-top:before {
+  top: -7px;
+}
+.bootstrap-timepicker-widget.timepicker-orient-top:after {
+  top: -6px;
+}
+.bootstrap-timepicker-widget.timepicker-orient-bottom:before {
+  bottom: -7px;
+  border-bottom: 0;
+  border-top: 7px solid #999;
+}
+.bootstrap-timepicker-widget.timepicker-orient-bottom:after {
+  bottom: -6px;
+  border-bottom: 0;
+  border-top: 6px solid #ffffff;
+}
+.bootstrap-timepicker-widget a.btn,
+.bootstrap-timepicker-widget input {
+  border-radius: 4px;
+}
+.bootstrap-timepicker-widget table {
+  width: 100%;
+  margin: 0;
+}
+.bootstrap-timepicker-widget table td {
+  text-align: center;
+  height: 30px;
+  margin: 0;
+  padding: 2px;
+}
+.bootstrap-timepicker-widget table td:not(.separator) {
+  min-width: 30px;
+}
+.bootstrap-timepicker-widget table td span {
+  width: 100%;
+}
+.bootstrap-timepicker-widget table td a {
+  border: 1px transparent solid;
+  width: 100%;
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  outline: 0;
+  color: #333;
+}
+.bootstrap-timepicker-widget table td a:hover {
+  text-decoration: none;
+  background-color: #eee;
+  border-radius: 4px;
+  border-color: #ddd;
+}
+.bootstrap-timepicker-widget table td a i {
+  padding: 8px 16px;
+  margin-top: 2px;
+  background-repeat: no-repeat;
+  background-position: center;
+  display: block;
+}
+.bootstrap-timepicker-widget table td input {
+  width: 25px;
+  margin: 0;
+  text-align: center;
+}
+.bootstrap-timepicker-widget .modal-content {
+  padding: 4px;
+}
+@media (min-width: 767px) {
+  .bootstrap-timepicker-widget.modal {
+    width: 200px;
+    margin-left: -100px;
+  }
+}
+@media (max-width: 767px) {
+  .bootstrap-timepicker {
+    width: 100%;
+  }
+  .bootstrap-timepicker .dropdown-menu {
+    width: 100%;
+  }
+}
+
+.icon-chevron-up {
+  background-image: url("../../img/icons/glyphicons_223_chevron-top.png");
+}
+
+.icon-chevron-down {
+  background-image: url("../../img/icons//glyphicons_223_chevron-bottom.png");
+}
+
+.bootstrap-timepicker-widget.dropdown-menu {
+  z-index: 100001;
+}

package/scss/modules/_tipbox.scss

@@ -0,0 +1,54 @@
+.tipbox {
+  align-items: flex-start;
+  backface-visibility: hidden;
+  i {
+    font-size: 26px;
+    color: $primary;
+  }
+  .tipbox-content {
+    position: absolute;
+    padding: 10px 15px;
+    opacity: 0;
+    width: 0;
+    height: 0;
+    overflow: hidden;
+    border-radius: 3px;
+    background: white;
+    z-index: 10000;
+    border: 1px solid $primary-light;
+    background: $white;
+    box-shadow: 0 1px 3px $shadow;
+  }
+  &.left {
+    .tipbox-content {
+      right: 40px;
+    }
+  }
+}
+
+.tipbox:hover {
+  .tipbox-content {
+    opacity: 1;
+    width: auto;
+    height: auto;
+    transition: opacity 400ms;
+    margin-left: 40px; // less than tipbox i width
+    &.top {
+      bottom: 40px;
+      right: 30px;
+    }
+    &.bot {
+      top: 40px;
+      right: 30px;
+    }
+  }
+}
+
+@media screen and (min-width: $tablette) {
+  tr .tipbox i {
+    color: $disabled-color;
+  }
+  tr:hover .tipbox i {
+    color: $primary;
+  }
+}

package/scss/modules/_toaster.scss

@@ -0,0 +1,18 @@
+.toggle-buttons {
+  .toggle-buttons-label {
+    position: absolute;
+    top: -15px;
+    padding: 0 15px 0 5px;
+    border-top-right-radius: 20px;
+    border-bottom-right-radius: 20px;
+    i {
+      padding: 0 5px;
+      &:before {
+        font-size: 13px;
+      }
+    }
+    em {
+      font-size: 11px;
+    }
+  }
+}