ode-csslib 1.0.0-dev-produit.202209220950

package/scss/layouts/_positions.scss

@@ -0,0 +1,149 @@
+.flex-row {
+  display: flex;
+  position: relative;
+
+  &.align-start {
+    align-items: flex-start;
+  }
+
+  &.align-center {
+    align-items: center;
+  }
+
+  &.align-end {
+    align-items: flex-end;
+  }
+
+  &.justify-start {
+    justify-content: flex-start;
+  }
+
+  &.justify-center {
+    justify-content: center;
+  }
+
+  &.justify-end {
+    justify-content: flex-end;
+  }
+
+  &.justify-between {
+    justify-content: space-between;
+  }
+
+  &.justify-around {
+    justify-content: space-around;
+  }
+
+  &.f-column {
+    flex-direction: column;
+  }
+
+  &.f-row {
+    flex-direction: row;
+  }
+
+  &.f-wrap {
+    flex-wrap: wrap;
+  }
+
+  .flex-all-remains {
+    flex: 1;
+  }
+}
+
+.flex-one {
+  flex: 1;
+}
+
+.fixed {
+  @include absolute;
+}
+
+.relative {
+  position: relative;
+}
+
+.no-shrink {
+  flex-shrink: 0;
+}
+
+.v-center-container {
+  display: table;
+
+  .v-center {
+    display: table-cell;
+    vertical-align: middle;
+    margin: 0;
+
+    img {
+      width: 100%;
+    }
+  }
+}
+
+.v-middle {
+  vertical-align: middle;
+}
+
+.clear {
+  clear: both;
+}
+
+.clearfix::after {
+  clear: both;
+  content: ".";
+  display: block;
+  height: 0;
+  line-height: 0;
+  visibility: hidden;
+}
+
+.bottom-locked {
+  @include bottom-locked;
+}
+
+@media screen and (max-width: $tablette) {
+  body {
+    .flex-row {
+      &.mobile-align-start {
+        align-items: flex-start;
+      }
+
+      &.mobile-align-center {
+        align-items: center;
+      }
+
+      &.mobile-align-end {
+        align-items: flex-end;
+      }
+
+      &.mobile-justify-start {
+        justify-content: flex-start;
+      }
+
+      &.mobile-justify-center {
+        justify-content: center;
+      }
+
+      &.mobile-justify-end {
+        justify-content: flex-end;
+      }
+
+      &.mobile-f-row {
+        flex-direction: row;
+      }
+
+      &.mobile-f-row-reverse {
+        flex-direction: row-reverse;
+      }
+
+      &.mobile-f-column {
+        flex-direction: column;
+      }
+
+      &.mobile-f-column-reverse {
+        flex-direction: column-reverse;
+      }
+    }
+  }
+}

package/scss/mobile/_fat-mobile.scss

@@ -0,0 +1,163 @@
+@media screen and (max-width: $fat-mobile) {
+  body {
+    .auth .panel {
+      border-radius: 0;
+      box-sizing: border-box;
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+      margin: 0;
+      label,
+      input[type="text"],
+      input[type="password"],
+      input[type="tel"],
+      input[type="email"] {
+        clear: both;
+        float: left !important;
+      }
+      input[type="submit"],
+      a {
+        clear: both;
+      }
+      p {
+        clear: both;
+      }
+      input-password {
+        input[type="password"] {
+          width: 88%;
+        }
+        button {
+          float: left;
+        }
+      }
+    }
+
+    .responsive-table {
+      thead.slided + tbody {
+        //cause display block slide
+        display: block !important;
+      }
+    }
+    //specific share table
+    .share .responsive-table {
+      table {
+        thead {
+          display: none;
+        }
+        tr {
+          position: relative;
+          margin: 20px;
+          box-shadow: 0 1px 1px $medium-grey;
+          border-top: 1px solid $light-grey;
+        }
+        td {
+          width: inherit;
+          padding: 10px 20px;
+          .drop-line {
+            display: none;
+          }
+        }
+        td:first-child {
+          max-width: none;
+          box-sizing: border-box;
+          font-size: 18px;
+          padding: 20px;
+          font-weight: bold;
+          text-transform: none;
+          border-top: none;
+          &:before {
+            display: none;
+          }
+
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        td:last-child {
+          display: none;
+        }
+        //datalabel
+        td:before {
+          text-transform: none;
+          padding-bottom: 15px;
+        }
+        tr td.drop-line {
+          position: absolute;
+          width: 30px;
+          height: 30px;
+          padding: 0;
+          border-radius: 50%;
+          line-height: 30px;
+          top: -10px;
+          right: -10px;
+          cursor: pointer;
+          display: block;
+          @include run-transition(all);
+        }
+        tr td.drop-line:hover {
+          &:before {
+            color: $white;
+          }
+        }
+      }
+    }
+
+    //// ACCOUNT
+
+    &.account {
+      .user-infos .sheet {
+        .four.cell {
+          width: 100%;
+          font-weight: bold;
+          padding-top: 15px;
+        }
+        .seven.cell {
+          width: calc(100% - 30px);
+          font-weight: normal;
+          font-style: normal;
+          font-size: 12px;
+          color: #555;
+        }
+        //mode view
+        em.eight {
+          width: calc(100% - 30px);
+          font-weight: normal;
+          font-style: normal;
+          font-size: 12px;
+          color: #555;
+        }
+        form .row {
+          i::before {
+            font-size: 18px;
+          }
+        }
+      }
+      .user-book {
+        article .row {
+          .two.cell {
+            width: 100%;
+            font-weight: bold;
+            padding: 15px 0 0;
+          }
+          .nine.cell {
+            width: calc(100% - 40px);
+            font-weight: normal;
+            font-style: normal;
+            font-size: 12px;
+            color: #555;
+          }
+          .one.cell {
+            float: right;
+            i::before {
+              font-size: 18px;
+            }
+          }
+        }
+      }
+    }
+
+    ////
+  }
+}

package/scss/mobile/_mobile.scss

@@ -0,0 +1,3 @@
+@import "tablette";
+@import "fat-mobile";
+@import "small-mobile";

package/scss/mobile/_small-mobile.scss

@@ -0,0 +1,18 @@
+@media screen and (max-width: $small-mobile) {
+  .drop-down-filters {
+    display: none !important;
+  }
+
+  body {
+    .list-view {
+      .content {
+        max-width: 90px;
+      }
+    }
+    ////
+  }
+
+  article.preview {
+    max-height: 800px;
+  }
+}

package/scss/mobile/_tablette.scss

@@ -0,0 +1,364 @@
+@media screen and (max-width: $tablette) {
+  body {
+    .lightbox-window .tabs,
+    .lightbox .content .tabs {
+      margin: 0;
+      header {
+        max-width: 100%;
+        margin-right: 0;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        box-sizing: border-box;
+        font-size: 12px;
+      }
+      section {
+        padding: 10px 5px;
+      }
+    }
+  }
+
+  ////
+
+  * {
+    -ms-scroll-chaining: none;
+  }
+
+  ////
+
+  body {
+    .widgets,
+    .widgets-picker {
+      display: none;
+    }
+    .widgets-friend {
+      margin-left: 0 !important;
+    }
+
+    .drop-down-filters {
+      .wrapper {
+        i {
+          height: 55px !important;
+          width: 55px !important;
+          background-size: 60px 60px;
+        }
+        p {
+          display: none;
+        }
+        label {
+          width: 59px;
+        }
+      }
+    }
+
+    .navbar .welcome-message {
+      display: none;
+    }
+
+    .cards-list .card {
+      max-width: 250px;
+    }
+
+    grid-cell.media {
+      .media-wrapper,
+      .text-wrapper h1,
+      .text-wrapper h2 {
+        padding: 0;
+        .media-container {
+          min-height: 0;
+        }
+      }
+      table {
+        width: 100% !important;
+      }
+    }
+
+    .media.height-undefined,
+    .media.height-zero {
+      min-height: 0;
+    }
+    .drawing-grid .row {
+      min-height: 0;
+      margin-bottom: 10px;
+    }
+
+    width: 100%;
+    min-height: 100%;
+    @include run-transition(left);
+    left: 0;
+    position: relative !important;
+    &.slide {
+      left: 300px;
+    }
+    header .logo {
+      display: none;
+    }
+    .application-title {
+      position: fixed;
+      color: #fff;
+      top: 0;
+      left: 10px;
+      z-index: 10001;
+      line-height: 50px;
+      margin-top: 0;
+      width: calc(100% - 280px);
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+      &.move-right {
+        margin-left: 30px;
+      }
+      i {
+        display: none !important;
+      }
+      a,
+      a:hover {
+        color: #fff;
+      }
+    }
+
+    side-panel + app-title {
+      float: left;
+      margin-top: 0;
+      margin-left: auto;
+    }
+
+    table,
+    ul.list-view {
+      th,
+      td {
+        padding: 7px;
+      }
+    }
+    .list-view {
+      .content {
+        max-width: 180px;
+      }
+    }
+
+    .share {
+      table thead th,
+      table thead td {
+        padding: 5px;
+        font-size: 10px;
+      }
+      td:first-child,
+      th:first-child {
+        padding: 5px;
+        font-size: 10px;
+      }
+    }
+
+    section.lightbox {
+      > div.content {
+        padding: 20px;
+        min-height: calc(100% - 50px);
+        width: calc(100% - 50px);
+        margin: 25px;
+        border-radius: 0;
+        box-sizing: border-box;
+      }
+    }
+
+    .icons-view .element {
+      legend {
+        line-height: 18px;
+        a {
+          font-size: 12px;
+        }
+        strong {
+          font-size: 12px;
+        }
+      }
+    }
+
+    .toggle-buttons {
+      height: auto;
+      .button,
+      button {
+        padding: 5px;
+        font-size: 0.9em;
+      }
+    }
+
+    .mobile-nav-opener {
+      @include icon(glyphicons_113_justify, 30px);
+      float: left;
+      display: none;
+      &.visible {
+        display: inline-block;
+      }
+    }
+
+    nav.vertical {
+      ul {
+        li {
+          a {
+            padding-top: 3px;
+            padding-bottom: 3px;
+          }
+        }
+      }
+    }
+
+    nav.vertical[side-nav] {
+      position: fixed;
+      left: 0;
+      top: 50px;
+      z-index: 10001;
+      @include run-transition(all);
+      box-sizing: border-box;
+      width: 0;
+      overflow: hidden;
+      padding: 0;
+      > ul,
+      > div > ul,
+      a.classic-link,
+      a.button {
+        width: 270px;
+      }
+      a.classic-link {
+        white-space: nowrap;
+      }
+      a.button {
+        margin-left: 0;
+        margin-right: 0;
+      }
+      &.slide {
+        width: 305px;
+        padding: 10px;
+        overflow: auto;
+      }
+    }
+    .toggle-buttons {
+      left: 0;
+      margin-left: 0;
+    }
+  }
+
+  section.main-col {
+    nav.contextual-buttons {
+      .action-buttons {
+      }
+    }
+  }
+
+  .account {
+    .avatar {
+      position: absolute;
+      top: 15px;
+      left: 15px;
+      width: 120px;
+      height: 120px;
+      padding: 0;
+      overflow: hidden;
+    }
+  }
+
+  /// MICROBOX
+
+  button.microbox {
+    float: right;
+  }
+  .micro-left + button.microbox {
+    float: left;
+  }
+  .microbox-wrapper {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 100000;
+    box-sizing: border-box;
+    background: rgba($white, 0.6);
+  }
+  .microbox-content {
+    width: 80%;
+    margin: 30px auto;
+    padding: 30px;
+    box-sizing: border-box;
+    overflow: hidden;
+    background: $white;
+    box-shadow: 0 0 3px 2px rgba($black, 0.2);
+    i.close-2x {
+      float: right;
+      cursor: pointer;
+    }
+    .microbox-material {
+      overflow: hidden;
+      padding-bottom: 20px;
+    }
+  }
+  // specific DOM content
+  .microbox-content {
+    container {
+      float: none;
+      text-align: left;
+      .checkbox-filters {
+        height: auto;
+        display: block;
+        ul li {
+          display: block;
+          padding: 20px;
+        }
+      }
+    }
+  }
+  button.microbox-close {
+    float: right;
+  }
+
+  [subtitle] {
+    display: block;
+    background: silver;
+    width: 100%;
+    margin: auto;
+    padding: 0 20px;
+    position: fixed;
+    left: 0;
+    text-align: center;
+    font-size: 17px;
+    height: 35px;
+    line-height: 35px;
+    cursor: default;
+    overflow: hidden;
+    color: $white;
+  }
+  h2[subtitle] {
+    text-align: left;
+  }
+  .subtitle-item {
+    color: $white;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 40%;
+    display: inline-block;
+    vertical-align: middle;
+    text-align: left;
+  }
+  .subtitle-item:first-child {
+    text-align: right;
+  }
+  section.subtitle-push {
+    margin-top: 40px;
+  }
+
+  //structure main-col / rows
+
+  .rigid-grid .option-row {
+    float: right;
+  }
+  .rigid-grid .main-col,
+  .rigid-grid .option-row {
+    padding-left: 0;
+  }
+
+  nav.subnavbar {
+    ul {
+      li {
+        margin: 0 0;
+      }
+    }
+  }
+}