ode-csslib 1.0.0-dev-produit.202209220950

package/scss/modules/_filters.scss

@@ -0,0 +1,112 @@
+.filters {
+  position: relative;
+  height: 30px;
+  padding: 6px;
+  h5 {
+    @include cell;
+    width: 170px;
+    margin: 0;
+  }
+  ul {
+    margin: 0;
+  }
+  li {
+    display: inline-block;
+    list-style-type: none;
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+}
+
+.checkbox-filters {
+  height: 50px;
+  display: flex;
+  align-items: center;
+  ul {
+    margin: 0;
+    li {
+      list-style-type: none;
+      display: inline-block;
+      margin-right: 15px;
+    }
+  }
+}
+
+.drop-down-filters,
+.filters {
+  z-index: 2;
+  .wrapper {
+    height: 170px;
+    @include run-transition(height);
+    overflow: hidden;
+    position: absolute;
+    background: #fff;
+    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
+  }
+  .wrapper.hide {
+    height: 0;
+    box-shadow: none;
+  }
+  p:first-child,
+  .filters-icons {
+    margin-top: 10px;
+    margin-bottom: 10px;
+    color: #000;
+  }
+  .filters-icons::after {
+    content: " ";
+    width: 100%;
+    float: left;
+  }
+  ul {
+    margin-top: 0;
+    box-sizing: border-box;
+    padding: 8px;
+    li {
+      display: inline;
+      color: #000;
+      label {
+        padding: 6px;
+        float: left;
+        width: 99px;
+        i {
+          margin-left: auto;
+          margin-right: auto;
+          float: none !important;
+          opacity: 0.2;
+          @include run-transition(opacity);
+          cursor: pointer;
+          display: inline-block;
+        }
+      }
+      p {
+        text-align: center;
+        margin: 0;
+        font-size: 14px;
+        line-height: 20px;
+        margin-top: 8px;
+      }
+    }
+    li.selected {
+      i {
+        opacity: 1;
+      }
+    }
+    input[type="checkbox"] {
+      visibility: hidden;
+      position: absolute;
+    }
+  }
+  i.draft {
+    @include icon(draft, 99px);
+    cursor: pointer;
+  }
+  i.submitted {
+    @include icon(submitted, 99px);
+    cursor: pointer;
+  }
+  i.published {
+    @include icon(published, 99px);
+    cursor: pointer;
+  }
+}

package/scss/modules/_flashmsg.scss

@@ -0,0 +1,17 @@
+.flashmsg {
+  &.red {
+    background: $flash-red;
+  }
+  &.orange {
+    background: $flash-orange;
+  }
+  &.green {
+    background: $flash-green;
+  }
+  &.blue {
+    background: $flash-blue;
+  }
+  &.grey-dark {
+    background: $flash-grey;
+  }
+}

package/scss/modules/_flexibles.scss

@@ -0,0 +1,24 @@
+.flexible {
+  @include run-transition(width);
+  .small-hidden {
+    display: none;
+  }
+}
+
+.flexible:empty {
+  width: 0 !important;
+}
+
+.empty-neighbour,
+.flexible.content:empty + .flexible.navigation {
+  width: 100% !important;
+  .patchwork {
+    padding-right: 0;
+  }
+  .small-hidden {
+    display: block;
+  }
+  .big-hidden {
+    display: none;
+  }
+}

package/scss/modules/_flips.scss

@@ -0,0 +1,49 @@
+.flip-right,
+.flip-left {
+  width: 80px;
+  height: 80px;
+  z-index: 15;
+  background: #fff;
+  border-radius: 40px;
+  position: absolute;
+  top: 40%;
+  opacity: 0.5;
+  @include run-transition(opacity);
+  @include box-shadow3(1px, 1px, 5px);
+}
+
+.flip-right:hover,
+.flip-left:hover {
+  opacity: 1;
+  @include run-transition(opacity);
+}
+
+.flip-right {
+  right: -30px;
+  .right-arrow {
+    width: 0;
+    height: 0;
+    border: 25px solid transparent;
+    border-left: 0;
+    color: black;
+    border-left: 30px solid;
+    top: 15px;
+    left: 32px;
+    position: absolute;
+  }
+}
+
+.flip-left {
+  left: -30px;
+  .left-arrow {
+    width: 0;
+    height: 0;
+    border: 25px solid transparent;
+    border-left: 0;
+    color: black;
+    border-right: 30px solid;
+    top: 15px;
+    left: 15px;
+    position: absolute;
+  }
+}

package/scss/modules/_forms.scss

@@ -0,0 +1,139 @@
+[contenteditable="true"]:focus {
+  outline: none;
+}
+
+em[contenteditable="true"] {
+  display: block;
+  border-bottom: 1px dashed;
+  line-height: 30px;
+  height: 30px;
+  font-size: 14px;
+}
+
+.editable {
+  height: 20px;
+}
+
+textarea {
+  max-width: 100%;
+  border: 1px solid $medium-grey;
+  width: 100%;
+  height: 130px;
+  overflow: auto;
+  box-sizing: border-box;
+}
+
+textarea.inline-editing {
+  box-sizing: content-box;
+}
+
+input[type="text"],
+input[type="password"],
+input[type="search"],
+input[type="tel"],
+input[type="email"] {
+  border: none;
+}
+
+.input-help {
+  label {
+    pointer-events: none;
+    position: absolute;
+    top: 5px;
+    font-size: 14px;
+    color: #aaa;
+    transition: all 250ms ease;
+    opacity: 1;
+
+    &.hide {
+      opacity: 0;
+    }
+
+    &.move {
+      top: 35px;
+      font-size: 12px;
+    }
+  }
+
+  input[type="text"] {
+    width: 100%;
+  }
+
+  textarea {
+    height: 30px;
+    margin-left: 60px;
+    width: 662px;
+    border: none;
+    border-bottom: 1px solid #888;
+    padding: 0;
+  }
+}
+
+input-password {
+  input {
+    width: calc(100% - 50px);
+    height: 32px;
+    margin: 0px;
+    box-sizing: border-box;
+    display: inline-block;
+    float: none;
+    border-right: none;
+  }
+  button {
+    width: 50px;
+    height: 32px;
+    margin: 0px;
+    box-sizing: border-box;
+    display: inline-block;
+    float: none;
+    vertical-align: middle;
+    border-left: none;
+  }
+}
+
+.lightbox-window form {
+  input,
+  label {
+    display: block;
+    float: left;
+  }
+}
+.panel form {
+  width: 415px;
+  max-width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  border-radius: 5px;
+  padding: 15px;
+
+  input[type="text"],
+  input[type="password"],
+  input[type="tel"],
+  input[type="email"] {
+    width: 200px;
+    float: right;
+    line-height: 20px;
+  }
+  a {
+    display: block;
+    clear: both;
+  }
+  h1 img {
+    display: none;
+  }
+
+  input[type="submit"] {
+    float: right;
+  }
+}
+
+// Avoid red borders in firefox
+@-moz-document url-prefix() {
+  input[type="text"],
+  input[type="password"],
+  input[type="search"],
+  input[type="tel"],
+  input[type="email"] {
+    box-shadow: none;
+  }
+}

package/scss/modules/_grids.scss

@@ -0,0 +1,39 @@
+.grid-exemple.row .article,
+.grid-exemple.row .absolute {
+  font-size: 14px;
+  padding: 10px;
+  color: #888;
+  border: #fff solid 5px;
+  border-radius: 12px;
+  background: #eee;
+  text-align: left;
+}
+
+.nested-grid {
+  height: 100%;
+  cursor: inherit;
+  min-height: 60px;
+  position: relative;
+  z-index: 100;
+}
+
+grid-cell.height-undefined {
+  overflow: visible;
+}
+
+.grid-wrapper {
+  height: 100%;
+  position: relative;
+}
+
+.grid-media {
+  transition: width 150ms ease, padding-bottom 150ms ease,
+    margin-left 100ms ease, border 250ms ease, box-shadow 250ms ease;
+}
+
+.drawing-grid {
+  height: auto;
+  .row {
+    min-height: 60px;
+  }
+}

package/scss/modules/_help.scss

@@ -0,0 +1,37 @@
+help {
+  section.lightbox > div.content {
+    width: 920px;
+    max-width: 100%;
+    box-sizing: border-box;
+    .app-single-post {
+      background: #fff;
+      .app-menu {
+        float: left;
+        width: 250px;
+      }
+      .app-content-section {
+        width: 640px;
+        float: right;
+        img {
+          max-width: 100%;
+          display: block;
+        }
+      }
+      .app-content-container {
+        margin-top: 15px;
+      }
+      h2 {
+        width: 100%;
+      }
+      .app-print {
+        display: none;
+      }
+    }
+    .app-single-post::after {
+      content: " ";
+      display: block;
+      width: 100%;
+      clear: both;
+    }
+  }
+}

package/scss/modules/_hightlight.scss

@@ -0,0 +1,99 @@
+/**
+* Highlight title in nav with count
+**/
+nav.vertical .highlight-title .count-badge {
+  display: block;
+  position: relative;
+  width: 20px;
+  height: 20px;
+  top: -10px;
+  left: calc(100% - 10px);
+  border-radius: 100%;
+  text-align: center;
+  font-size: 12px;
+  line-height: 20px;
+  background: $orange;
+  color: $white;
+  z-index: 1000;
+  text-shadow: 0px 0px 2px rgba($black, 0.5);
+}
+nav.vertical .highlight-title {
+  display: none;
+  position: absolute;
+  left: 20px;
+  top: 0px;
+  width: calc(100% - 40px);
+  border-radius: 6px;
+  padding-top: 2px;
+  padding-bottom: 5px;
+}
+nav.vertical ul li.highlight-title-wrapper {
+  position: relative;
+}
+nav.vertical .highlight-title-border {
+  border: 1px dashed $orange;
+}
+nav.vertical .highlight-no-droppable {
+  border: 1px solid $red;
+  background-color: rgba($red, 0.1);
+  .count-badge {
+    background-color: $red;
+    &::after {
+      @include fonticon;
+      content: "\e83a";
+    }
+  }
+}
+nav.vertical .droptarget + .highlight-title-border,
+nav.vertical .droptarget + .highlight-no-droppable {
+  display: block;
+}
+nav.vertical.nav-droppable ul li a.folder-list-item {
+  z-index: 2;
+}
+@keyframes hightlight-title {
+  0% {
+    border: 0px solid $orange;
+  }
+  10% {
+    border: 2px solid $orange;
+  }
+  90% {
+    border: 2px solid $orange;
+  }
+  100% {
+    border: 0px solid $orange;
+  }
+}
+nav.vertical .highlight-title-3s {
+  display: block;
+  animation: hightlight-title 3s ease-in-out 0ms 1;
+}
+
+@keyframes hightlight-border {
+  0% {
+    border: 0px solid $orange;
+    box-shadow: none;
+  }
+  10% {
+    border: 2px solid $orange;
+    /*box-shadow: 0px 0px 25px $orange;*/
+  }
+  90% {
+    border: 2px solid $orange;
+    /*box-shadow: 0px 0px 25px $orange;*/
+  }
+  100% {
+    border: 0px solid $orange;
+    box-shadow: none;
+  }
+}
+
+.highlight-border-3s {
+  animation: hightlight-border 3s ease-in-out 0ms 1;
+  border-radius: 20px;
+}
+
+.highlight-border-3s * {
+  border: none !important;
+}

package/scss/modules/_humane.scss

@@ -0,0 +1,73 @@
+.humane,
+.humane-original {
+  position: fixed;
+  -moz-transition: all 0.2s ease-out;
+  -webkit-transition: all 0.2s ease-out;
+  -ms-transition: all 0.2s ease-out;
+  -o-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+  z-index: 100000;
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
+}
+.humane,
+.humane-original {
+  line-height: 40px;
+  font-size: 25px;
+  top: 25%;
+  left: 25%;
+  opacity: 0;
+  width: 50%;
+  min-height: 40px;
+  padding: 10px;
+  text-align: center;
+  background-color: #000;
+  color: #fff;
+  border-radius: 15px;
+}
+.humane p,
+.humane-original p,
+.humane ul,
+.humane-original ul {
+  margin: 0;
+  padding: 0;
+}
+.humane ul,
+.humane-original ul {
+  list-style: none;
+}
+.humane.humane-original-info,
+.humane-original.humane-original-info {
+  background-color: #00d;
+}
+.humane.humane-original-success,
+.humane-original.humane-original-success {
+  background-color: #030;
+}
+.humane.humane-original-error,
+.humane-original.humane-original-error {
+  background-color: #d00;
+}
+.humane.humane-animate,
+.humane-original.humane-original-animate {
+  opacity: 0.8;
+}
+.humane.humane-animate:hover,
+.humane-original.humane-original-animate:hover {
+  opacity: 0.6;
+}
+.humane.humane-js-animate,
+.humane-original.humane-original-js-animate {
+  opacity: 0.8;
+}
+.humane.humane-js-animate:hover,
+.humane-original.humane-original-js-animate:hover {
+  opacity: 0.6;
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
+}
+
+@media screen and (max-width: $tablette) {
+  .humane,
+  .humane-original {
+    left: calc(25% - 10px);
+  }
+}

package/scss/modules/_icons-select.scss

@@ -0,0 +1,71 @@
+.icons-select {
+  position: relative;
+  z-index: 5;
+  background: #eee;
+
+  .options-list {
+    position: absolute;
+    width: 175%;
+    top: 70px;
+    box-sizing: border-box;
+    background: #eee;
+    height: 0;
+    overflow: hidden;
+    @include run-transition(height);
+    max-width: none;
+  }
+  .options-list.icons-view {
+    padding: 0;
+  }
+  .options-list.toggle-visible {
+    height: 360px;
+  }
+
+  .option i {
+    background-size: 100% auto;
+    margin-left: auto;
+    margin-right: auto;
+    float: none !important;
+  }
+
+  .option,
+  .current {
+    cursor: pointer;
+  }
+
+  .option {
+    text-align: center;
+  }
+
+  span {
+    display: block;
+    line-height: 26px;
+  }
+
+  .current {
+    padding-left: 20px;
+    i {
+      transition: margin-left 250ms ease;
+      vertical-align: middle;
+      max-height: 100%;
+      background-size: auto 100%;
+    }
+    span {
+      clear: none;
+      padding-top: 10px;
+      width: auto;
+    }
+    a {
+      transition: none;
+    }
+    &:hover,
+    &.editing {
+      a {
+        color: $accent;
+      }
+      div.flex-row {
+        margin-left: 5px !important;
+      }
+    }
+  }
+}