ode-csslib 4.0.0-dev.202212011541 → 4.0.0-dev.202301031736

package/scss/specifics/minibadge/components/_badge.scss

@@ -0,0 +1,156 @@
+.minibadge-badge-cards {
+  gap: 15px;
+}
+
+minibadge-card-type {
+  &.minibadge-mobile-full {
+    @include mobile {
+      width: 100%;
+    }
+  }
+
+  .minibadge-card {
+    &-title {
+      flex: none;
+    }
+
+    &-body {
+      align-items: revert;
+
+      &-icon {
+        padding: 10px;
+        font-size: 24px;
+        line-height: 24px;
+        left: 0;
+
+        @include mobile {
+          padding: 5px;
+        }
+
+        &.minibadge-icon-right {
+          right: 0;
+          left: revert;
+          color: $minibadge-blue-dark;
+        }
+      }
+    }
+
+    &-badge-detail {
+      @include mobile {
+        width: 100%;
+        flex-direction: row;
+        height: 112px;
+      }
+
+      .minibadge-card-body {
+        @include mobile {
+          flex: revert;
+          width: 180px;
+        }
+      }
+
+      .minibadge-card-footer {
+        @include paddingX(10px);
+        background: $minibadge-white;
+        height: 80px;
+
+        @include mobile {
+          height: 100%;
+          line-height: 30px;
+          flex: 1;
+          border-radius: 0 10px 10px 0;
+        }
+
+        .minibadge-more-info {
+          width: 100%;
+        }
+
+        .minibadge-actions {
+          align-self: flex-end;
+          margin-left: auto;
+          position: relative;
+
+          .dots-vertical {
+            font-size: 1.3rem;
+
+            &:hover {
+              color: $minibadge-orange;
+            }
+          }
+
+          .minibadge-action {
+            &-options {
+              display: flex;
+              flex-direction: column;
+              position: absolute;
+              top: 0;
+              left: 100%;
+              background: $minibadge-white;
+              border-radius: 2px;
+              box-shadow: 4px 8px 10px $minibadge-grey-light;
+              z-index: 1;
+
+              &.minibadge-reposition {
+                left: 0;
+                transform: translateX(-100%);
+              }
+            }
+
+            &-option {
+              @include paddingX(28px);
+              @include paddingY(6px);
+              white-space: nowrap;
+              justify-content: flex-start;
+
+              & .lock {
+                @include icon-small();
+              }
+
+              &:first-child {
+                border-radius: 2px 2px 0 0;
+              }
+
+              &:last-child {
+                border-radius: 0 0 2px 2px;
+              }
+
+              &:hover {
+                background-color: $minibadge-orange;
+                color: $minibadge-white;
+              }
+            }
+          }
+        }
+
+        .star {
+          color: $minibadge-orange;
+        }
+
+        .minibadge-type-footer {
+          height: 100%;
+        }
+      }
+    }
+
+    &-award-badge {
+      .minibadge-card-footer {
+        height: 48px;
+
+        @include mobile {
+          height: 38px;
+        }
+
+        background: $minibadge-blue;
+        color: $minibadge-white;
+
+        &:hover {
+          background: $minibadge-orange;
+        }
+
+        .minibadge-type-footer {
+          height: 100%;
+        }
+      }
+    }
+  }
+}

package/scss/specifics/minibadge/components/_card.scss

@@ -0,0 +1,88 @@
+.minibadge-card {
+  &.disabled {
+    opacity: 0.5;
+
+    & * {
+      cursor: default;
+    }
+  }
+
+  &-list {
+    margin-top: 30px;
+    background: $minibadge-white;
+    gap: 15px;
+    @include paddingY(15px);
+  }
+
+  height: 232px;
+  width: 215px;
+  border-radius: 10px;
+  background: $minibadge-blue-light;
+  border: solid $minibadge-shadow-light 1px;
+
+  @include mobile {
+    width: 170px;
+    height: 183px;
+  }
+
+  &-body, &-body > container-body {
+    flex: 1;
+    width: 100%;
+    align-items: center;
+
+    &-icon {
+      flex: 1;
+      font-size: 80px;
+      line-height: 80px;
+      align-items: flex-end;
+    }
+  }
+
+  &-footer, .minibadge-footer {
+    border-radius: 0 0 10px 10px;
+  }
+
+  container-footer {
+    flex: 1;
+  }
+
+  &-picture {
+    flex: 1;
+
+    img {
+      max-height: 100%;
+    }
+  }
+
+  &-title, h3 {
+    flex: 1;
+    height: 31px;
+  }
+
+}
+
+.minibadge-card-simple, minibadge-card-type-statistic {
+  display: flex;
+  align-self: center;
+
+  .minibadge-card {
+    @include desktop {
+      align-self: center;
+      background-color: $minibadge-white;
+      border: none
+    }
+  }
+}
+
+minibadge-card-type-statistic {
+  width: 100%;
+
+  .minibadge-card {
+    flex: 1;
+
+    &-title {
+      flex: none;
+      height: auto;
+    }
+  }
+}

package/scss/specifics/minibadge/components/_chart.scss

@@ -0,0 +1,15 @@
+.minibadge-chart {
+  h1 {
+    color: $minibadge-grey-dark;
+  }
+
+  h2 {
+    font-weight: bold!important;
+  }
+
+  &-footer {
+    margin-top: 10px;
+  }
+
+}
+

package/scss/specifics/minibadge/components/_container.scss

@@ -0,0 +1,37 @@
+.minibadge-container {
+  &-component, &-card {
+    flex: 1;
+    row-gap: 8px;
+    background: $minibadge-white;
+    @include paddingXY(8px, 16px);
+
+    &.disabled {
+      opacity: 0.5;
+    }
+  }
+
+  &-component {
+    margin-top: 30px;
+
+    h3 {
+      display: flex;
+
+      i.play {
+        display: flex;
+        transform: rotate(0deg);
+        transition: transform 0.2s linear;
+
+        &.opened {
+          transform: rotate(90deg);
+          transition: transform 0.2s linear;
+        }
+      }
+    }
+  }
+
+  &-card {
+    border-radius: 5px;
+    box-shadow: 0 5px 5px $minibadge-shadow;
+  }
+}
+

package/scss/specifics/minibadge/components/_empty-statement.scss

@@ -0,0 +1,7 @@
+.minibadge-empty-statement {
+  margin-top: 16px;
+  margin-left: 8px;
+  @include mobile{
+    margin-left: 16px;
+  }
+}

package/scss/specifics/minibadge/components/_given-array.scss

@@ -0,0 +1,78 @@
+.given-array {
+  background-color: $minibadge-white;
+  padding: 1em;
+  border-radius: 10px;
+
+  & i {
+    margin: 0 1%;
+    font-size: 1.3em;
+  }
+
+  &-head {
+    background-color: $minibadge-blue;
+    color: $minibadge-white;
+    justify-content: space-between;
+  }
+
+  &-row {
+    border-top: 1px solid $minibadge-grey-light;
+    justify-content: space-between;
+    @include mobile {
+      padding: 1em 0;
+    }
+  }
+
+  &-img {
+    padding-right: 1em;
+    max-width: 85%;
+    @include mobile {
+      padding-right: 0;
+    }
+  }
+
+  &-label {
+    width: 30%;
+    @include mobile {
+      width: 75%;
+    }
+  }
+
+  &-img img {
+    max-width: 85%;
+  }
+
+  &-cell {
+    padding: 1em;
+    @include mobile {
+      padding: 0;
+    }
+  }
+
+  &-trash {
+    font-size: 1.5em;
+    &:hover {
+      color: $minibadge-orange;
+    }
+  }
+
+  &-revoked {
+    font-weight: bold;
+    color: $minibadge-red;
+  }
+
+  &-lightbox {
+    .content {
+      margin-top: 10em;
+      @include mobile {
+        position: fixed;
+        width: 100%;
+        padding: 0;
+        margin: 0;
+      }
+    }
+
+    &-label {
+      padding: 0.5em;
+    }
+  }
+}

package/scss/specifics/minibadge/components/_icon.scss

@@ -0,0 +1,114 @@
+i {
+  &.calendar-month::before{
+    font-family: 'material-icons';
+    content: "\FDFA";
+  }
+  &.calendar-range::before {
+    font-family: 'material-icons';
+    content: "\F678";
+  }
+  &.trash::before{
+    font-family: "material-icons";
+    content: "\FA79";
+  }
+  &.sort-arrow-up::before{
+    font-family: 'material-icons';
+    content: "\F4BC";
+
+  }
+  &.sort-arrow-down::before{
+    font-family: 'material-icons';
+    content: "\F4BD";
+  }
+  &.sort-arrow-up::before{
+    font-family: 'material-icons';
+    content: "\F4BC";
+
+  }
+  &.sort-arrow-down::before{
+    font-family: 'material-icons';
+    content: "\F4BD";
+  }
+
+  &.user-circle::before {
+    font-family: 'material-icons';
+    content: "\F009";
+  }
+
+  &.close::before {
+    font-family: 'material-icons';
+    content: "\F156";
+  }
+
+  &.chevron-left::before {
+    font-family: 'material-icons';
+    content: "\F141";
+  }
+  &.target::before{
+    font-family: "material-icons";
+    content: "\F8C8";
+  }
+  &.human-arrow::before{
+    font-family: "material-icons";
+    content: "\FB2F";
+  }
+  &.star::before {
+    font-family: 'material-icons';
+    content: "\F4CE";
+  }
+
+  &.icon-info::before {
+    font-family: 'material-icons';
+    content: "\F2FC";
+  }
+
+  &.icon-info-circle::before {
+    font-family: 'material-icons';
+    content: "\F2FD";
+  }
+
+  &.earth::before {
+    font-family: 'material-icons';
+    content: "\F1E7";
+  }
+
+  &.dots-vertical::before {
+    font-family: 'material-icons';
+    content: "\F1D9";
+  }
+
+  &.refused::before {
+    font-family: 'material-icons';
+    content: "\F697";
+  }
+
+  &.settings::before {
+    font-family: 'material-icons';
+    content: "\F493";
+  }
+
+  &.close-circle::before {
+    font-family: 'material-icons';
+    content: "\F159";
+  }
+
+  &.check-circle::before {
+    font-family: 'material-icons';
+    content: "\F5E0";
+  }
+
+  &.check-decagram::before {
+    font-family: 'material-icons';
+    content: "\F790";
+  }
+
+  &.chevron::before {
+    font-family: 'material-icons';
+    content: "\F142";
+  }
+
+  &.trophy::before {
+    font-family: 'material-icons';
+    content: "\F538";
+  }
+}

package/scss/specifics/minibadge/components/_index.scss

@@ -0,0 +1,16 @@
+@import "icon";
+@import "navbar";
+@import "card";
+@import "badge";
+@import "search-input";
+@import "search-results";
+@import "type";
+@import "selected-list";
+@import "given-array";
+@import "periode-picker";
+@import "chart";
+@import "empty-statement";
+@import "list";
+@import "user-list";
+@import "paging";
+@import "container";

package/scss/specifics/minibadge/components/_list.scss

@@ -0,0 +1,19 @@
+.minibadge-list {
+  flex: 1;
+  height: auto;
+  padding-inline-start: 20px;
+  margin-block-start: 0;
+  list-style-type: none;
+
+  &-item {
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+
+    &-distinction {
+      color: $minibadge-grey;
+    }
+
+  }
+}
+

package/scss/specifics/minibadge/components/_navbar.scss

@@ -0,0 +1,41 @@
+.minibadge-navbar {
+  height: 56px;
+  background: $minibadge-white;
+
+  @include desktop {
+    text-transform: uppercase;
+  }
+
+  @include mobile {
+    background: $minibadge-blue-dark;
+    color: $minibadge-white;
+  }
+
+  &-item {
+    height: 100%;
+    align-items: center;
+
+
+    &.minibadge-selected {
+      @include desktop {
+        color: $minibadge-blue-dark;
+        @include navbarBorderBottom(3px);
+      }
+
+      @include mobile {
+        background: $minibadge-blue;
+        color: $minibadge-blue-light;
+        border-radius: 28px;
+      }
+    }
+
+    &:hover {
+      @include desktop {
+        color: $minibadge-blue;
+        @include navbarBorderBottom(3px);
+      }
+    }
+
+  }
+}
+

package/scss/specifics/minibadge/components/_paging.scss

@@ -0,0 +1,15 @@
+.minibadge-paging {
+  button {
+    padding: 4px 0;
+    margin: 0;
+    font-size: 30px;
+    border-radius: 5px;
+    background: $minibadge-blue-dark;
+
+    &:disabled {
+      background: $minibadge-grey-dark;
+    }
+  }
+}
+
+

package/scss/specifics/minibadge/components/_periode-picker.scss

@@ -0,0 +1,43 @@
+.periode-picker {
+  &-container {
+    position: relative;
+    float: left;
+    display: flex;
+    align-items: center;
+    column-gap: 10px;
+  }
+
+  &-input {
+    padding: 5px 10px;
+    height: 30px;
+    width: 150px;
+    cursor: pointer;
+    font-size: 16px;
+    font-family: Roboto;
+    color: $minibadge-grey-dark;
+    border: none;
+    border-radius: 3px;
+    @include mobile {
+      width: 128px;
+    }
+  }
+
+  &-open-button {
+    position: absolute;
+    top: 10px;
+    right: 11px;
+    width: 25px;
+    height: 25px;
+    background: $minibadge-white;
+    pointer-events: none;
+    cursor: pointer;
+  }
+
+  &-open-button span {
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    color: $minibadge-blue;
+    font-size: 1.5em;
+  }
+}

package/scss/specifics/minibadge/components/_search-input.scss

@@ -0,0 +1,41 @@
+.minibadge-search {
+  margin-top: 10px;
+  flex: 1;
+  line-height: 35px;
+  background: $minibadge-white;
+  border: solid $minibadge-grey-lighter 2px;
+  border-radius: 5px;
+  text-align: right;
+  font-size: 18px;
+
+  &:focus-within {
+    color: $minibadge-blue;
+    border-color: $minibadge-blue;
+  }
+
+  @include desktop {
+    max-width: 510px;
+  }
+
+  @include mobile {
+    @include marginX(10px);
+  }
+
+  .search {
+    margin: 0;
+    width: 25px;
+  }
+
+  &-input {
+    width: 100%;
+    height: auto;
+    margin: 0;
+    box-shadow: none;
+    border-bottom: none;
+    &:focus {
+      box-shadow: none;
+      border-bottom: none;
+    }
+  }
+}
+

package/scss/specifics/minibadge/components/_search-results.scss

@@ -0,0 +1,6 @@
+.minibadge-search-results {
+  width: 100%;
+  max-width: 510px;
+  top: 100%;
+}
+

package/scss/specifics/minibadge/components/_selected-list.scss

@@ -0,0 +1,17 @@
+.minibadge-selected-list {
+  @include paddingX(15px);
+
+  &-items {
+    margin-top: 5px;
+  }
+
+  &-item {
+    font-weight: bold;
+    margin-top: 10px;
+
+    .close::before {
+      font-size: 16px;
+    }
+  }
+}
+