ode-csslib 1.0.0-dev-produit.202209220950

package/scss/modules/_select-box.scss

@@ -0,0 +1,125 @@
+.select-box {
+  position: relative;
+  width: 300px;
+  height: 42px;
+  font-size: 14px;
+  line-height: 1;
+  margin: 10px 0;
+  &__select-button {
+    position: relative;
+    padding: 10px;
+    background-color: #fff;
+    border-radius: 4px;
+    cursor: pointer;
+    border: 1px solid $light-grey;
+  }
+  &:hover .select-box__select-button {
+    border-color: $neutral-grey;
+  }
+  &__options-view-button {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    opacity: 0;
+    cursor: pointer;
+    z-index: 3;
+  }
+  &__option,
+  &__label {
+    color: $dark-grey;
+  }
+  &__selected-value {
+    color: $darkest-grey;
+  }
+  .chevrons {
+    position: absolute;
+    top: -5px;
+    right: 0;
+    bottom: 0;
+    padding: 10px;
+    i {
+      display: block;
+      height: 50%;
+      color: $neutral-grey;
+      font-size: 12px;
+      text-align: right;
+      &::before {
+        font-size: 10px !important;
+      }
+    }
+  }
+
+  &__options-view-button:checked + .select-box__select-button .chevrons i {
+    color: $dark-grey;
+  }
+
+  &__options {
+    position: absolute;
+    top: 42px;
+    right: 0;
+    left: 0;
+    width: 298px;
+    margin: 0 auto;
+    background-color: #fff;
+    border: 1px solid $light-grey;
+    box-shadow: 3px 3px 10px rgba($dark-grey, 0.1);
+    border-radius: 4px;
+    max-height: 300px;
+    overflow-x: auto;
+    scrollbar-width: thin;
+    scrollbar-color: $medium-grey white;
+    opacity: 0;
+  }
+
+  &__options-view-button:checked ~ .select-box__options {
+    opacity: 1;
+  }
+
+  &__option {
+    position: relative;
+    line-height: 1;
+    transition: 0.3s ease all;
+    z-index: 2;
+  }
+
+  &__label {
+    display: none;
+    padding: 0;
+  }
+
+  &__options-view-button:checked ~ .select-box__options .select-box__label {
+    display: block;
+    padding: 10px;
+  }
+
+  .select-box__radio {
+    position: absolute;
+    right: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    opacity: 0;
+    cursor: pointer;
+  }
+
+  &__option .select-box__radio:checked ~ .select-box__label:before {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: -1;
+  }
+
+  &__option:hover .select-box__label {
+    background-color: $primary;
+    color: #fff;
+  }
+}

package/scss/modules/_select-list.scss

@@ -0,0 +1,77 @@
+select-list {
+  position: relative;
+  font-size: 14px;
+  z-index: 12;
+  &.button {
+    .selected-value {
+      border: none;
+      box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.35);
+      background: #efefef;
+      padding: 5px;
+      padding-right: 25px;
+      padding-left: 15px;
+      border-radius: 2px;
+      max-width: 150px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      margin-top: -1px;
+    }
+    .options {
+      top: -11px;
+    }
+  }
+
+  .options {
+    position: absolute;
+    background-color: $white;
+    opacity: 1;
+    @include run-transition(all);
+    overflow: hidden;
+    top: 0;
+    left: 0;
+    min-width: 105%;
+    box-sizing: border-box;
+    box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.4);
+    opt {
+      padding: 2px;
+      padding-left: 10px;
+      padding-right: 10px;
+      display: block;
+      white-space: nowrap;
+      i {
+        line-height: 20px;
+        font-size: 22px;
+      }
+    }
+  }
+  .options.hidden {
+    height: 0 !important;
+    opacity: 0;
+    padding: 0 10px;
+    pointer-events: none !important;
+  }
+  .selected-value {
+    border-bottom: 1px solid #ddd;
+    min-width: 100px;
+    min-height: 24px;
+    pointer-events: all;
+    line-height: 28px;
+    display: inline-block;
+    vertical-align: middle;
+    padding-right: 15px;
+    cursor: pointer;
+    &::after {
+      width: 0;
+      height: 0;
+      border-left: 5px solid transparent;
+      border-right: 5px solid transparent;
+      border-top: 6px solid #888;
+      content: " ";
+      position: absolute;
+      right: 6px;
+      top: 50%;
+      margin-top: -1px;
+    }
+  }
+}

package/scss/modules/_share.scss

@@ -0,0 +1,149 @@
+.share {
+  width: 100%;
+
+  table {
+    width: 100%;
+  }
+  td,
+  th {
+    width: 100px;
+    text-align: center;
+    line-height: 18px;
+
+    i.down-open,
+    i.up-open {
+      margin: 0 0 0 5px;
+      &::before {
+        color: $primary;
+        font-size: 12px;
+      }
+      &:hover::before {
+        color: $accent;
+      }
+    }
+  }
+  td:first-child,
+  th:first-child {
+    width: 30%;
+    text-align: left;
+  }
+
+  .line {
+    margin-bottom: 10px;
+    padding-bottom: 10px;
+  }
+
+  h2 {
+    margin-bottom: 0px !important;
+    margin-top: 0px !important;
+  }
+
+  h3 {
+    padding: 15px;
+  }
+
+  input[type="text"] {
+    margin-left: 15px;
+    margin-bottom: 15px;
+  }
+
+  .publication-option {
+    padding: 15px;
+  }
+
+  .display-more {
+    text-align: right;
+    display: block;
+    font-size: 15px;
+    box-sizing: border-box;
+  }
+  .saveSharebookmark {
+    font-size: 15px;
+
+    input[type="text"] {
+      width: 250px;
+      height: 37px;
+      margin-right: 10px;
+    }
+
+    .saved-in {
+      padding-right: 5px;
+    }
+  }
+
+  i.add-favorite {
+    margin: 0 5px 0 0;
+    &::before {
+      color: $primary;
+    }
+  }
+
+  .responsive-table {
+    margin: 10px 0;
+  }
+}
+
+.read-only {
+  .share {
+    label {
+      pointer-events: none;
+    }
+    input[type="checkbox"] {
+      opacity: 0.5;
+    }
+    .row:last-child {
+      display: none;
+    }
+    .line {
+      margin: 0 !important;
+      border: none !important;
+    }
+    .drop-line {
+      pointer-events: none;
+      background: none !important;
+    }
+  }
+}
+
+.share.publish {
+  table {
+    tr {
+      td:first-child,
+      th:first-child {
+        width: 95%;
+      }
+    }
+  }
+}
+
+.flowing.sharing {
+  td:nth-child(2),
+  td:nth-child(3),
+  td:nth-child(4),
+  td:nth-child(5),
+  th:nth-child(2),
+  th:nth-child(3),
+  th:nth-child(4),
+  th:nth-child(5) {
+    min-width: 80px;
+    text-align: center;
+  }
+  th:first-child {
+    width: 500px;
+  }
+  th {
+    font-size: 14px;
+    font-weight: normal;
+    padding: 5px;
+  }
+  td:first-child {
+    text-align: left;
+  }
+  td {
+    text-align: center;
+    input[type="checkbox"] {
+      display: inline;
+      float: none;
+    }
+  }
+}

package/scss/modules/_side-panel.scss

@@ -0,0 +1,54 @@
+side-panel {
+  position: absolute;
+  z-index: 7001;
+  .opener {
+    cursor: pointer;
+    width: 40px;
+    height: 40px;
+    text-align: center;
+    line-height: 40px;
+    display: inline-block;
+    vertical-align: middle;
+    border-radius: 25px;
+    transform: rotate(90deg);
+    -webkit-transform: rotate(90deg);
+    font-size: 24px;
+    margin-top: -6px;
+    @include run-transition(transform);
+    @include run-transition(-webkit-transform);
+  }
+
+  .opener::after {
+    content: "\25B2";
+    display: block;
+    margin-top: -3px;
+  }
+  &.hidden {
+    .toggle {
+      width: 0;
+    }
+    .opener {
+      transform: rotate(-90deg);
+      -webkit-transform: rotate(-90deg);
+    }
+  }
+  .toggle {
+    position: absolute;
+    width: 300px;
+    box-sizing: border-box;
+    @include run-transition(width);
+    overflow: hidden;
+    top: 0;
+    left: 55px;
+    .content {
+      padding: 15px;
+      width: 300px;
+      box-sizing: border-box;
+    }
+  }
+}
+side-panel + app-title {
+  float: left;
+  margin-top: 0;
+  margin-left: 50px;
+}

package/scss/modules/_side-tabs.scss

@@ -0,0 +1,34 @@
+.side-tabs {
+  z-index: 2;
+  border-right: none;
+  background: #eee;
+  width: 180px;
+  margin-top: 10px;
+  ul {
+    margin: 0;
+    padding: 0;
+    li {
+      list-style-type: none;
+      padding: 7px;
+      padding-left: 17px;
+      background: #ddd;
+    }
+    li.selected {
+      background: #eee;
+      border: 1px solid #ccc;
+      border-right: none;
+      border-left-width: 5px;
+      box-sizing: content-box;
+      margin-left: -5px;
+    }
+  }
+}
+
+.side-tabs-content {
+  border-radius: 0;
+  z-index: 1;
+  border: 1px solid #ccc;
+  margin-left: -1px;
+  border-top-width: 11px;
+  border-bottom-width: 11px;
+}

package/scss/modules/_signature.scss

@@ -0,0 +1,10 @@
+.signature:not(:empty) {
+  border-top: 1px solid $neutral-grey;
+  margin-top: 25px;
+  font-size: $font-size - 1;
+  &:before {
+    content: " ";
+    display: block;
+    padding-top: 10px;
+  }
+}

package/scss/modules/_sliders.scss

@@ -0,0 +1,59 @@
+slider,
+slider.drawing-zone {
+  overflow: visible;
+  height: 15px;
+  margin-left: -12px;
+  display: block;
+  position: relative;
+  width: 100%;
+  margin-top: 35px;
+  margin-bottom: 20px;
+  padding: 0 !important;
+  .bar {
+    width: 100%;
+    height: 15px;
+    background: #ddd;
+    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1) inset;
+    margin-left: 12px;
+  }
+  .cursor {
+    width: 0;
+    height: 0;
+    border-top: 20px solid #666;
+    border-right: 13px solid transparent;
+    border-left: 13px solid transparent;
+    margin-top: -26px;
+    z-index: 1;
+    cursor: pointer;
+    top: 0;
+  }
+  .label {
+    top: 24px;
+    margin-left: -42px;
+    width: 100px;
+    text-align: center;
+    font-size: 12px;
+    font-weight: bold;
+    color: #666;
+    position: absolute;
+  }
+  .filled {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 15px;
+    background: #666;
+    margin-left: 12px;
+  }
+  legend {
+    position: absolute;
+    top: -18px;
+    font-size: 12px;
+  }
+  legend.min {
+    left: 10px;
+  }
+  legend.max {
+    right: -15px;
+  }
+}

package/scss/modules/_specifics.scss

@@ -0,0 +1,31 @@
+.action-cell {
+  width: 30px;
+  height: 30px;
+}
+
+section.selected,
+article.selected {
+  background: $medium-grey;
+}
+
+article.media {
+  border: 2px dashed $medium-grey;
+}
+
+article {
+  border: 1px solid $medium-grey;
+  padding: 8px;
+}
+
+article.preview {
+  height: auto;
+  max-height: 465px;
+  @include run-transition(max-height);
+}
+
+.user-infos {
+  line-height: 25px;
+  input[type="text"] {
+    margin: 0;
+  }
+}

package/scss/modules/_square-menu.scss

@@ -0,0 +1,77 @@
+.square-menu {
+  min-width: 51px;
+  width: 51px;
+  display: table-cell;
+  button {
+    width: 51px;
+    height: 47px;
+    margin: 0;
+    float: right;
+    margin-top: 1px;
+  }
+  .buttons-line {
+    button {
+      width: 25px;
+      float: left;
+      font-size: 10px;
+      padding: 0;
+      height: 25px;
+    }
+    button:first-child {
+      margin-right: 1px;
+    }
+  }
+  ul.menu-items {
+    margin: 0;
+    padding: 0;
+    li {
+      @include run-transition(background);
+      height: 30px;
+      width: 30px;
+      margin: 3px;
+      margin-top: 0;
+      margin-bottom: 6px;
+      float: left;
+
+      list-style-type: none;
+      i {
+        float: none;
+        display: inline-block;
+      }
+
+      i.text {
+        background-size: 60% auto;
+        background-color: transparent;
+      }
+      i.image,
+      input[type="button"].image {
+        background-size: 60% auto;
+        background-color: transparent;
+      }
+      i.sound,
+      input[type="button"].sound {
+        background-size: 60% auto;
+        background-color: transparent;
+      }
+      i.video {
+        background-size: 60% auto;
+        background-color: transparent;
+      }
+      i.grid {
+        background-size: 60% auto;
+        background-color: transparent;
+      }
+      > li > div > input[type="button"]:hover {
+        background-color: transparent;
+      }
+    }
+  }
+}
+
+.square-menu-actions {
+  display: table-cell;
+  width: 100%;
+  vertical-align: top;
+  position: relative;
+  padding: 1px;
+}

package/scss/modules/_stickers.scss

@@ -0,0 +1,7 @@
+.sticker {
+  display: flex;
+  margin: auto;
+  text-align: center;
+  justify-content: center;
+  align-items: center;
+}

package/scss/modules/_switch-search.scss

@@ -0,0 +1,43 @@
+@media screen and (max-width: $fat-mobile) {
+  body {
+    switch-search {
+      .search-pagination {
+        input {
+          transition: all 250ms ease !important;
+        }
+
+        i.search {
+          transition: all 250ms ease;
+          left: calc(100% - 35px);
+        }
+
+        ng-transclude > * {
+          transition: all 250ms ease !important;
+          max-width: 100vw;
+        }
+
+        &.hide-search {
+          input {
+            width: 0 !important;
+            margin: 0 !important;
+            padding: 0 !important;
+            border-color: transparent;
+          }
+
+          i.search {
+            transition: left 250ms;
+            left: 0;
+          }
+        }
+
+        &:not(.hide-search) {
+          ng-transclude > * {
+            max-width: 0px;
+            padding-left: 0 !important;
+            padding-right: 0 !important;
+          }
+        }
+      }
+    }
+  }
+}