ode-csslib 1.0.0-dev-produit.202209220950

package/scss/modules/_navigations.scss

@@ -0,0 +1,715 @@
+.navbar {
+  height: 40px;
+  .cell {
+    height: 100%;
+  }
+  img {
+    float: left;
+    display: block;
+    vertical-align: top;
+    margin: 0;
+    padding: 6px;
+    box-sizing: border-box;
+    max-height: 100%;
+    width: auto;
+  }
+  .welcome-message {
+    display: block;
+    float: left;
+    line-height: 30px;
+    margin-top: 8px;
+  }
+  .account {
+    @include cell;
+    @include right-magnet;
+    i {
+      margin-top: 3px;
+    }
+  }
+}
+
+nav.horizontal {
+  text-align: right;
+  position: absolute;
+  right: 0;
+  bottom: 0px;
+
+  > a {
+    display: inline-block;
+    vertical-align: bottom;
+  }
+}
+
+.search {
+  position: relative;
+  margin-top: 5px;
+  margin-right: 10px;
+
+  input {
+    display: block;
+    margin: 0;
+    float: left;
+  }
+  input[type="submit"],
+  input[type="button"] {
+    height: 25px;
+    line-height: 18px;
+    border-radius: 0;
+    @include border-radius-right(5px);
+    border-left: 0;
+  }
+}
+
+nav.stamps {
+  article {
+    margin-bottom: 15px;
+    margin-top: 0;
+    line-height: 20px;
+    padding: 0;
+    height: 98px;
+    width: 290px;
+    position: relative;
+    > div:nth-child(2) {
+      padding: 8px;
+      margin-left: 98px;
+    }
+    > div:nth-child(1) {
+      height: 98px;
+      width: 98px;
+      margin-right: 5px;
+      @include cell;
+    }
+  }
+}
+
+nav.half-stamps {
+  > div > input[type="checkbox"] {
+    margin-top: 30px;
+  }
+  article {
+    display: table;
+    margin-bottom: 5px;
+    line-height: 20px;
+    padding: 0;
+    height: 70px;
+    width: 290px;
+    position: relative;
+    > div {
+      display: table-cell;
+      vertical-align: middle;
+    }
+    > div:nth-child(2) {
+      padding: 8px;
+      margin-left: 70px;
+      width: 100%;
+    }
+    > div:nth-child(1) {
+      height: 70px;
+      width: 70px;
+      margin-right: 5px;
+      @include cell;
+    }
+  }
+}
+
+nav.vertical,
+.app-menu {
+  padding-right: 15px;
+  box-sizing: border-box;
+  h2 {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  h2:first-child {
+    margin-bottom: 0;
+  }
+  h1 {
+    margin-top: 0;
+  }
+  > ul,
+  > div > ul {
+    padding-left: 0;
+  }
+  ul {
+    margin-top: 0;
+    width: 99%;
+    padding-left: 10px;
+    li {
+      float: none;
+      display: block;
+      font-size: 14px;
+      font-weight: normal;
+      width: 100% !important;
+      top: 0;
+      a {
+        display: block;
+        position: relative;
+        line-height: 20px;
+        box-sizing: border-box;
+        width: 100%;
+        margin: 0;
+        margin-top: 5px;
+        margin-bottom: 5px;
+        padding: 5px;
+        padding-left: 10px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        &.folder-list-item {
+          display: flex;
+          padding-right: 45px;
+          white-space: nowrap;
+        }
+
+        .link-name {
+          max-width: 100%;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          padding: 0;
+          background: none;
+          border: none;
+          margin: 0;
+        }
+
+        i {
+          display: block;
+          float: right;
+          opacity: 0;
+          @include run-transition(opacity);
+          &.ic-share {
+            opacity: 1 !important;
+          }
+        }
+
+        i.arrow {
+          float: left;
+          opacity: 1;
+        }
+        i.arrow::before {
+          content: ">";
+          font-weight: 900;
+          font-size: 12px;
+          display: block;
+          margin-right: 6px;
+          font-family: Arial;
+        }
+        i.trash,
+        i.edit {
+          position: absolute;
+        }
+        i.edit {
+          top: 1px;
+          right: 30px;
+        }
+        i.trash {
+          top: 3px;
+          right: 5px;
+          font-size: 12px;
+        }
+
+        img {
+          vertical-align: middle;
+          margin-right: 5px;
+        }
+      }
+      a.selected {
+        background: #ccc;
+        i {
+          opacity: 1;
+        }
+      }
+      a.opened {
+        i.arrow::before {
+          content: "v";
+        }
+      }
+      a:hover {
+        i {
+          opacity: 1;
+        }
+      }
+      input {
+        position: relative !important;
+        top: 0px !important;
+        left: 0px !important;
+      }
+      input[type="text"],
+      input[type="search"] {
+        border-radius: 0;
+        margin-left: 0;
+        box-sizing: border-box;
+        width: 100%;
+      }
+    }
+  }
+}
+
+nav.double-content-stamps {
+  text-align: center;
+  article::first-child {
+    margin-right: 0;
+  }
+  article {
+    width: 330px;
+    display: inline-block;
+    text-align: left;
+    padding: 0;
+    margin-right: 25px;
+    margin-bottom: 20px;
+    position: relative;
+    .illustration {
+      float: left;
+      width: 180px;
+      height: 120px;
+      img {
+        width: 180px;
+        height: 120px;
+      }
+    }
+    .vertical-content {
+      float: right;
+      width: 150px;
+      height: 240px;
+      padding: 10px;
+      box-sizing: border-box;
+      ul {
+        padding: 0;
+        li {
+          list-style-type: none;
+          a {
+            display: block;
+            margin-bottom: 3px;
+          }
+        }
+      }
+    }
+    .horizontal-content {
+      float: left;
+      width: 180px;
+      height: 120px;
+      padding: 10px;
+      box-sizing: border-box;
+      label {
+        position: absolute;
+        bottom: 10px;
+        left: 10px;
+      }
+    }
+  }
+}
+
+nav.vertical.floating.hash-magnet {
+  margin-bottom: 40px;
+  margin-right: 15px;
+  padding-top: 40px;
+  padding-right: 0;
+}
+nav.floating {
+  .arrow.next {
+    position: absolute;
+    bottom: -30px;
+    width: 100%;
+    height: 25px;
+    display: none;
+    &::after {
+      cursor: pointer;
+      content: "\25B2";
+      display: block;
+      margin-left: auto;
+      margin-right: auto;
+      width: 25px;
+      height: 25px;
+      background-color: $medium-grey;
+      text-align: center;
+      border-radius: 50%;
+      font-size: 12px;
+      line-height: 25px;
+      transform: rotate(180deg);
+      -webkit-transform: rotate(180deg);
+      text-indent: 1px;
+    }
+    &.visible {
+      display: block;
+    }
+  }
+  .arrow.previous {
+    position: absolute;
+    height: 25px;
+    width: 100%;
+    top: 10px;
+    z-index: 10;
+    display: none;
+    &::after {
+      cursor: pointer;
+      content: "\25B2";
+      display: block;
+      margin-left: auto;
+      margin-right: auto;
+      width: 25px;
+      height: 25px;
+      background-color: $medium-grey;
+      text-align: center;
+      border-radius: 50%;
+      font-size: 12px;
+      line-height: 25px;
+    }
+    &.visible {
+      display: block;
+    }
+  }
+  .content {
+    height: auto;
+    max-height: 100%;
+    width: auto;
+    overflow: hidden;
+    box-sizing: border-box;
+    border: 1px solid $medium-grey;
+  }
+}
+.floating {
+  padding-left: 0;
+  padding-right: 20px;
+  li {
+    list-style-type: none;
+    padding: 3px;
+    padding: 5px;
+  }
+  li:first-child {
+    margin-top: 20px;
+  }
+}
+
+plus {
+  padding-left: 5px;
+  padding-right: 5px;
+  .opener {
+    cursor: pointer;
+    width: 40px;
+    height: 40px;
+    text-align: center;
+    line-height: 40px;
+    display: inline-block;
+    vertical-align: middle;
+    border-radius: 25px;
+    font-size: 24px;
+    position: relative;
+    > div {
+      display: block;
+      position: absolute;
+      @include run-transition(transform);
+      @include run-transition(-webkit-transform);
+      height: 100%;
+      width: 100%;
+      top: 0;
+      left: 0;
+      overflow: hidden;
+      transform: scaleY(1);
+    }
+    .plus::after {
+      content: "+";
+    }
+    .minus::after {
+      content: "-";
+      display: block;
+      margin-top: -1px;
+      font-size: 33px;
+      transform: scaleX(1.4);
+    }
+    &.plus {
+      .minus {
+        transform: scaleY(0);
+      }
+    }
+    &.minus {
+      .plus {
+        transform: scaleY(0);
+      }
+    }
+  }
+}
+
+nav.illustrated-links {
+  ul {
+    li {
+      list-style-type: none;
+      display: table;
+      margin-bottom: 12px;
+
+      .illustration {
+        position: relative;
+        width: auto;
+        display: table-cell;
+        min-width: 120px;
+        height: 120px;
+        img {
+          position: absolute;
+          width: 120px;
+          height: 120px;
+        }
+      }
+      .content {
+        padding: 8px;
+        padding-left: 15px;
+        display: table-cell;
+        vertical-align: top;
+        width: 100%;
+        position: relative;
+        min-height: 0;
+        h1,
+        h2 {
+          margin: 0px;
+          font-size: 22px;
+        }
+        em,
+        strong {
+          font-size: 12px;
+          font-weight: normal;
+        }
+        p {
+          color: #666;
+          font-size: 12px;
+          margin: 0;
+        }
+        em {
+          color: #aaa;
+        }
+      }
+    }
+  }
+}
+
+.menu-items {
+  padding: 0;
+  padding-right: 30px;
+  margin: 0;
+  font-size: 12px;
+  li {
+    min-height: 30px;
+    line-height: 30px;
+    list-style-type: none;
+    cursor: pointer !important;
+  }
+  li:hover {
+    color: #000;
+  }
+  i.text {
+    @include icon(text-icon, 30px);
+    background-size: 60% auto;
+    background-color: transparent;
+    border: none;
+  }
+  i.image,
+  input[type="button"].image {
+    @include icon(picture-icon, 30px);
+  }
+  i.sound,
+  input[type="button"].sound {
+    @include icon(music-icon, 30px);
+  }
+  i.video {
+    @include icon(video-icon, 30px);
+    background-color: transparent;
+    border: none;
+  }
+  i.grid {
+    @include icon(glyphicons_099_vector_path_all, 30px);
+    background-size: 60% auto;
+    background-color: transparent;
+    border: none;
+  }
+  i.sniplet {
+    @include icon(glyphicons_155_show_big_thumbnails, 30px);
+    background-size: 60% auto;
+    background-color: transparent;
+  }
+  > li > div > input[type="button"] {
+    background-position: 4px !important;
+    padding-left: 29px;
+    background-size: 19px;
+    background-color: transparent;
+    border: none;
+    width: 100% !important;
+    text-align: left;
+    font-size: 12px;
+  }
+  > li > div > input[type="button"]:hover {
+    color: #000;
+  }
+}
+
+.hash-magnet,
+nav.hash-magnet.vertical {
+  margin-top: -80px;
+  padding-top: 80px;
+  display: block;
+  pointer-events: none;
+  clear: none;
+  > * {
+    pointer-events: all;
+  }
+}
+nav.hash-magnet.vertical {
+  margin-top: 0;
+  padding-top: 0;
+}
+
+.pagination {
+  input[type="text"] {
+    width: 20px;
+  }
+}
+
+//mobile !!
+
+nav.dots {
+  ul {
+    display: flex;
+    justify-content: center;
+    margin: 20px 0 10px;
+    padding: 0;
+  }
+  li.dot {
+    list-style-type: none;
+    margin: 0 10px;
+  }
+  li.dot::before {
+    content: " ";
+    display: block;
+    width: 17px;
+    height: 17px;
+    background: transparent;
+    border: 2px solid silver;
+    border-radius: 50%;
+    box-sizing: border-box;
+    @include run-transition(all);
+  }
+  li.dot.active::before {
+    border-color: $accent;
+    background: $accent;
+  }
+  li.dot:hover {
+    &::before {
+      border-color: $accent;
+      //border-color: $primary;
+      background: transparent;
+    }
+  }
+}
+
+nav.subnavbar {
+  margin: 10px 0;
+  ul {
+    margin: 0;
+    padding: 0;
+
+    li {
+      list-style-type: none;
+      display: inline-block;
+      padding: 0;
+      margin: 0 15px;
+      text-transform: uppercase;
+      font-size: 14px;
+      font-weight: bold;
+      position: relative;
+      padding: 10px 0;
+
+      &:first-child {
+        margin: 0 15px 0 0;
+      }
+    }
+  }
+}
+
+nav.prev-next {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  color: $primary;
+  button {
+    width: 38px;
+    height: 38px;
+    border-radius: 38px;
+    padding: 0;
+    margin: 0;
+    &:enabled {
+      background-color: $primary;
+    }
+    i {
+      color: $white;
+    }
+    &[disabled] {
+      pointer-events: none;
+      background-color: $neutral-grey;
+      box-shadow: none;
+    }
+  }
+  .pagination {
+    margin: 0 10px;
+  }
+}
+
+nav.removable-list {
+  border-top: 1px solid $neutral-grey;
+  border-left: 1px solid $neutral-grey;
+  border-right: 1px solid $neutral-grey;
+  cursor: pointer;
+  &.wrapper {
+    max-height: 216px;
+    overflow: auto;
+  }
+  .row {
+    border-bottom: 1px solid $neutral-grey;
+    color: $primary;
+    i {
+      opacity: 0;
+      color: $white;
+      transition: opacity 250ms ease;
+    }
+    &:hover {
+      color: $white;
+      background-color: $primary;
+      i {
+        opacity: 1;
+      }
+    }
+    &.active {
+      color: $white;
+      background-color: $primary;
+    }
+  }
+}
+
+removable-list[disabled] {
+  cursor: default;
+  nav.removable-list .row:hover {
+    color: $primary;
+    background-color: transparent;
+    i {
+      opacity: 0;
+      color: $white;
+    }
+  }
+}
+
+@media screen and (max-width: $tablette) {
+  body {
+    nav.prev-next {
+      button {
+        background: transparent !important;
+        box-shadow: none;
+        i {
+          color: $primary;
+        }
+        &[disabled] {
+          i {
+            color: transparent;
+          }
+        }
+      }
+      .pagination {
+        margin: 0 0;
+      }
+    }
+  }
+}