ode-csslib 1.0.0-dev-produit.202209220950

package/scss/modules/_accordions.scss

@@ -0,0 +1,70 @@
+.accordions {
+  .accordion {
+    margin: 0;
+    padding: 0;
+    h2 {
+      margin-bottom: 0;
+      padding: 4px;
+      padding-left: 10px;
+      padding-right: 10px;
+      @include vertical-gradient(#383838, #333);
+      border: 1px solid #555;
+      border-bottom: 0;
+      font-size: 20px;
+      color: #666;
+      overflow: hidden;
+    }
+    .toggle {
+      max-height: 0px;
+      overflow: hidden;
+      padding: 0px;
+      border: 0;
+      background: #333;
+      transition: max-height 250ms ease;
+      @include grid-cell-width(12);
+      @include cell;
+      .content {
+        padding: 10px;
+        @include row;
+
+        h3 {
+          font-weight: normal;
+          font-size: 16px;
+          color: #666;
+        }
+      }
+    }
+  }
+
+  .accordion.opened {
+    h2 {
+      border: 1px solid #555;
+      border-bottom: 0;
+      color: #ccc;
+    }
+    .toggle {
+      max-height: 350px;
+      padding: 10px;
+      overflow: hidden;
+      border: 1px solid #555;
+      border-top: 0;
+      border-radius: 0;
+      .content {
+        padding: 10px;
+      }
+    }
+  }
+  .accordion:last-child {
+    h2 {
+      border-bottom: 1px solid #555;
+    }
+  }
+  .accordion:last-child.opened {
+    .toggle {
+      @include border-radius-bottom();
+    }
+    h2 {
+      border-radius: 0;
+    }
+  }
+}

package/scss/modules/_alert.scss

@@ -0,0 +1,62 @@
+// Component ALERT BS5
+$alert-info: 197, 65%, 47%;
+$alert-warning: 27, 100%, 59%;
+$alert-error: 352, 100%, 61%;
+$alert-success: 93, 61%, 46%;
+
+.alert-message {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  line-height: 1.3rem;
+  border: 1px solid lightgrey;
+  background-color: $white;
+  border-left-width: 0.5rem;
+  border-radius: 0.5rem;
+
+  > p {
+    margin: 0;
+  }
+
+  > svg {
+    flex-shrink: 0;
+  }
+
+  &-info {
+    border-color: hsla(197, 65%, 47%, 30%);
+    border-left-color: hsl(197, 65%, 47%);
+
+    .icon-info {
+      fill: hsl(197, 65%, 47%);
+    }
+  }
+
+  &-warning {
+    border-color: hsla(27, 100%, 59%, 30%);
+    border-left-color: hsl(27, 100%, 59%);
+
+    .icon-warning {
+      fill: hsl(27, 100%, 59%);
+    }
+  }
+
+  &-error {
+    border-color: hsla(352, 100%, 61%, 30%);
+    border-left-color: hsl(352, 100%, 61%);
+
+    .icon-error {
+      fill: hsl(352, 100%, 61%);
+    }
+  }
+
+  &-success {
+    border-color: hsla(93, 61%, 46%, 30%);
+    border-left-color: hsl(93, 61%, 46%);
+
+    .icon-success {
+      fill: hsl(93, 61%, 46%);
+    }
+  }
+}

package/scss/modules/_animations.scss

@@ -0,0 +1,28 @@
+@-webkit-keyframes pulsate-fwd {
+  0% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+  50% {
+    -webkit-transform: scale(1.2);
+    transform: scale(1.2);
+  }
+  100% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}
+@keyframes pulsate-fwd {
+  0% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+  50% {
+    -webkit-transform: scale(1.2);
+    transform: scale(1.2);
+  }
+  100% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}

package/scss/modules/_articles.scss

@@ -0,0 +1,12 @@
+article {
+  header.infos-block {
+    background: none;
+    position: absolute;
+    width: 100%;
+    h2 {
+      font-size: 20px;
+      display: block;
+      width: 100%;
+    }
+  }
+}

package/scss/modules/_assistant.scss

@@ -0,0 +1,43 @@
+assistant {
+  z-index: 100001 !important;
+  position: relative;
+
+  .close-lightbox {
+    display: none;
+  }
+  .ignore {
+    position: absolute;
+    top: -30px;
+    right: -20px;
+    font-size: 13px;
+  }
+  lightbox {
+    .content {
+      border: 20px solid $primary;
+    }
+  }
+}
+
+@media screen and (max-width: $tablette) {
+  body {
+    assistant {
+      section.lightbox > div.content {
+        top: 30px;
+        width: calc(100% - 40px);
+        height: auto;
+        min-height: auto;
+        overflow: hidden;
+        padding: 50px 0 10px !important;
+        /* margin: 0 20px; */
+
+        .ignore {
+          right: 15px;
+          top: -35px;
+        }
+        button.cancel.zero {
+          display: block;
+        }
+      }
+    }
+  }
+}

package/scss/modules/_autocomplete.scss

@@ -0,0 +1,68 @@
+/* --------------------------------------------------------- */
+/* / !!!!!! \ Temporaire ! utilisé pour ne pas avoir de régression dans les applis JS non portées */
+.autocomplete:not(.temp) {
+  em {
+    font-style: normal;
+    display: block;
+    padding: 3px;
+    padding-left: 15px;
+    border: 1px solid transparent;
+  }
+  em.low-importance {
+    border: none;
+    font-style: italic;
+  }
+  em:hover {
+    border-top: 1px solid #ccc;
+    border-bottom: 1px solid #ccc;
+  }
+  em.low-importance:hover {
+    background: transparent;
+    border: none;
+  }
+
+  ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 5px;
+    padding-left: 20px;
+
+    li {
+    }
+  }
+}
+/* / !!!!!! \ A garder au final ! */
+.autocomplete.temp {
+  div {
+    font-style: normal;
+    display: block;
+    padding: 10px;
+    border: 1px solid transparent;
+
+    &:hover {
+      border-top: 1px solid #ccc;
+      border-bottom: 1px solid #ccc;
+    }
+
+    em.low-importance {
+      border: none;
+      font-style: italic;
+
+      &:hover {
+        background: transparent;
+        border: none;
+      }
+    }
+  }
+
+  ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 5px;
+    padding-left: 20px;
+
+    li {
+    }
+  }
+}
+/* --------------------------------------------------------- */

package/scss/modules/_badges.scss

@@ -0,0 +1,32 @@
+.badge {
+  border-radius: 10px;
+  background: #ccc;
+  font-weight: bold;
+  font-size: 0.8em;
+  padding: 2px 6px;
+  display: inline-block;
+  text-align: center;
+  text-shadow: 0px 0px 2px rgba($black, 0.5);
+}
+nav.vertical {
+  .badge {
+    margin: 0 4px;
+  }
+}
+
+.label-badge {
+  display: inline-block;
+}
+
+.badge-info {
+  border-radius: 10px;
+  background: $primary;
+  color: $white;
+  font-weight: bold;
+  padding: 3px 5px;
+  display: inline-block;
+  text-align: center;
+  text-shadow: 0px 0px 2px rgba($black, 0.5);
+  line-height: 12px;
+  margin-left: 6px;
+}

package/scss/modules/_banner.scss

@@ -0,0 +1,7 @@
+.banner {
+  position: absolute;
+  bottom: 0px;
+  width: 100%;
+  height: 5px;
+  background: #fff;
+}

package/scss/modules/_boxes.scss

@@ -0,0 +1,89 @@
+.box,
+.text-container article.box {
+  height: 100px;
+  margin-bottom: 0;
+
+  .avatar {
+    padding-right: 5px;
+    height: 100%;
+    .avatar-image {
+      background-size: 100% auto;
+      background-repeat: no-repeat;
+      background-position: center;
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
+.mini-box {
+  .cell {
+    height: 50px;
+    line-height: 50px;
+    .avatar {
+      padding: 5px;
+    }
+    img {
+      vertical-align: middle;
+    }
+  }
+}
+
+.large-box {
+  min-width: 300px;
+  min-height: 150px;
+}
+/***/
+.message-box {
+  box-shadow: 1px 1px 5px $shadow-dark;
+  border-radius: 5px;
+  overflow: hidden;
+  transition: 500ms ease;
+  box-sizing: border-box;
+  border: none;
+  background: $white;
+  z-index: 999;
+}
+/*HELPBOX*/
+.helpbox-highlight-message {
+  background: rgba(0, 0, 0, 0.6);
+  z-index: 100002;
+  position: fixed;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+}
+.helpbox-highlight-message .left-text {
+  text-align: left;
+}
+.helpbox-highlight {
+  z-index: 100003 !important;
+  position: fixed !important;
+  background: $white !important;
+  margin: 0 !important;
+}
+
+/*DROP ZONE**/
+.dropzone-overlay-wrapper {
+  position: relative !important;
+  box-shadow: none;
+  border: none;
+}
+
+.dropzone-overlay {
+  position: absolute !important;
+  top: 2px;
+  left: 2px;
+  width: calc(100% - 4px);
+  height: calc(100% - 4px);
+  outline: 2px dashed $orange;
+  background: rgba(250, 250, 250, 0.4);
+  z-index: 99;
+}
+
+@media screen and (max-width: $fat-mobile) {
+  .helpbox-highlight {
+    display: none !important;
+  }
+}

package/scss/modules/_breadcrumbs.scss

@@ -0,0 +1,9 @@
+.breadcrumbs {
+  a::after {
+    content: " > ";
+    color: #ccc;
+  }
+  a:last-child::after {
+    content: "";
+  }
+}

package/scss/modules/_browser.scss

@@ -0,0 +1,19 @@
+.browser {
+  a {
+    display: inline-block;
+  }
+  .update {
+    text-align: center;
+    img {
+      height: 150px;
+      width: 150px;
+    }
+  }
+  .download {
+    text-align: center;
+    img {
+      height: 60px;
+      width: 60px;
+    }
+  }
+}

package/scss/modules/_bubbles.scss

@@ -0,0 +1,25 @@
+.bubble,
+.bubble-right,
+.bubble-left {
+  position: relative;
+  padding: 30px 50px;
+
+  &:before,
+  &:after {
+    content: "";
+    display: block;
+    position: absolute;
+    top: 25px;
+  }
+}
+.bubble-right {
+  margin-left: 35px;
+  &:before {
+    left: -25px;
+    @include triangle-left(25px, $accent);
+  }
+  &:after {
+    left: -23px;
+    @include triangle-left(25px, $white);
+  }
+}

package/scss/modules/_buttons.scss

@@ -0,0 +1,244 @@
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  padding: 0;
+  border: 0;
+}
+
+a.button,
+button,
+input[type="button"],
+input[type="submit"] {
+  cursor: pointer;
+  margin: 0;
+  margin-left: 1px;
+  margin-right: 1px;
+  @include cell;
+}
+
+input[type="search"] {
+  padding: 3px;
+}
+
+.toggle-buttons-spacer {
+  margin-bottom: 50px;
+}
+
+.toggle-buttons {
+  width: 100%;
+  background: $medium-grey;
+  height: auto;
+  max-height: 150px;
+  left: 0;
+  bottom: 0;
+  position: fixed;
+  max-width: 100%;
+  @include run-transition(max-height);
+
+  -webkit-transition-delay: 250ms;
+  -moz-transition-delay: 250ms;
+  -ms-transition-delay: 250ms;
+  transition-delay: 250ms;
+
+  z-index: 8000;
+  .toggle {
+    padding: 10px;
+  }
+  button {
+    opacity: 1;
+    @include run-transition(opacity);
+  }
+  button.hide {
+    opacity: 0;
+    @include run-transition(opacity);
+  }
+
+  .contextual-link {
+    float: right;
+    margin: 10px;
+  }
+
+  behaviour,
+  resource-right {
+    float: left;
+  }
+}
+
+.toggle-buttons.hide {
+  max-height: 0px;
+  @include run-transition(max-height);
+  overflow: hidden;
+}
+
+section {
+  .contextual-buttons {
+    .action-buttons {
+      @include cell;
+      @include grid-cell-width(9);
+      margin-bottom: 10px;
+      button,
+      a.button {
+        vertical-align: top;
+      }
+    }
+
+    article {
+      li {
+        list-style-type: none;
+      }
+    }
+  }
+}
+
+.display-buttons {
+  @include cell;
+  float: right;
+  text-align: right;
+  padding-bottom: 10px;
+  i {
+    float: right;
+    cursor: pointer;
+    @include run-transition(opacity);
+    opacity: 1;
+  }
+  i:hover {
+    opacity: 0.4;
+    @include run-transition(opacity);
+  }
+}
+
+button {
+  position: relative;
+}
+
+drop-down-button {
+  min-width: 150px;
+  height: 40px;
+}
+
+.drop-down-button {
+  z-index: 650;
+  white-space: nowrap;
+  min-width: 100%;
+  position: relative;
+  label {
+    display: block;
+    cursor: pointer;
+    box-sizing: border-box;
+    min-width: 100%;
+    padding: 4px 10px;
+    border-radius: 3px 3px 0 0;
+    float: left;
+    font-size: 15px;
+    background: #fff;
+    border: 1px solid #444;
+    color: #000;
+    @include run-transition(background);
+    font-weight: 300;
+  }
+
+  .options {
+    ul {
+      padding: 0;
+      margin: 0;
+      background: #fff;
+      border: 1px solid #444;
+      border-top: 0;
+      position: absolute;
+      width: 100%;
+      top: 23px;
+      box-sizing: border-box;
+      li {
+        list-style-type: none;
+        box-sizing: border-box;
+        padding: 5px;
+        @include run-transition(background);
+        font-size: 13px;
+        text-align: center;
+        color: #444;
+      }
+      li:hover {
+        background: #444;
+        color: #fff;
+      }
+    }
+  }
+}
+
+.drop-down-button.hidden {
+  z-index: 1;
+  label {
+    border-radius: 3px;
+    background: #ccc;
+    color: #fff;
+    border: 1px solid transparent;
+  }
+  .options {
+    display: none;
+  }
+  label:hover {
+    background: #fff;
+    border: 1px solid #ccc;
+    color: #000;
+  }
+}
+
+// Button imitating select behavior
+button.select-button {
+  color: $text-color;
+  border: 1px solid $medium-grey;
+  box-shadow: none;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  padding-left: 10px;
+  padding-right: 10px;
+
+  &.selected {
+    color: $primary;
+    border-color: $primary;
+  }
+
+  span {
+    font-size: 11px;
+
+    &.active {
+      color: $primary;
+    }
+  }
+
+  &:not(.selected):hover {
+    color: $primary;
+  }
+
+  &[disabled] {
+    background-color: $light-grey !important;
+    color: $grey !important;
+    cursor: default;
+  }
+}
+.disabled-color,
+i.disabled-color::before {
+  color: $grey !important;
+}
+.is-light {
+  padding: 10px;
+}
+
+//Big button with icon inside
+.button-big {
+  border-radius: 5px;
+  display: inline-flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  padding: 35px 15px;
+  text-align: center;
+  &::before {
+    font-size: 30px;
+    padding: 10px 5px;
+  }
+  i {
+    display: block;
+    font-size: 40px;
+    font-weight: normal;
+    padding: 15px 5px 0;
+  }
+}