ode-csslib 4.0.1 → 4.0.2

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;
+    }
+  }
+}
+

package/scss/specifics/minibadge/components/_type.scss

@@ -0,0 +1,80 @@
+.minibadge-type {
+  margin-top: 20px;
+  background: $minibadge-white;
+  height: 100%;
+  @include paddingY(15px);
+  @include paddingX(15px);
+
+  @include desktop {
+    flex-direction: column;
+    border: solid $minibadge-grey-lighter 2px;
+    border-radius: 5px;
+  }
+
+  @include mobile {
+    font-size: 16px;
+  }
+
+  > h2, h3 {
+    margin-top: 0;
+    font-weight: normal;
+    font-size: 25px;
+    color: $minibadge-grey-dark;
+  }
+
+  &-container {
+    @include mobile {
+      flex-direction: column;
+    }
+    @include tablet {
+      flex-direction: column;
+    }
+  }
+
+  &-id {
+    @include desktop {
+      height: auto;
+      width: auto;
+    }
+  }
+
+  &-detail {
+    @include desktop {
+      margin-left: 30px;
+      flex: 1;
+    }
+    @include tablet {
+      margin-left: 0;
+    }
+  }
+
+  &-description {
+    @include desktop {
+      flex: 1;
+    }
+
+    &-detail {
+      margin-top: 10px;
+    }
+  }
+
+  &-user-lists {
+    @include desktop {
+      gap: 30px;
+    }
+  }
+
+  &-data {
+    @include paddingX(15px);
+    line-height: 30px;
+    @include desktop {
+      margin-top: 20px;
+    }
+
+    i {
+      font-size: 1.5em;
+    }
+  }
+
+}
+

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

@@ -0,0 +1,42 @@
+.minibadge-user-list {
+  flex: 1;
+  height: auto;
+
+  &-items {
+    padding-inline-start: 20px;
+    column-count: 2;
+    @include mobile {
+      column-count: 1;
+    }
+    @include tablet {
+      column-count: 1;
+    }
+  }
+
+  &-item {
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+
+    &-avatar {
+      margin-top: 0;
+      padding: 5px 0;
+      border-radius: 50%;
+      border: 1px solid transparent;
+      width: 30px;
+      height: 30px;
+      vertical-align: middle;
+    }
+
+    &-precision {
+      font-style: italic;
+    }
+
+  }
+
+  .minibadge-paging {
+    justify-content: flex-end;
+    margin-top: auto;
+  }
+}
+

package/scss/specifics/minibadge/containers/_badge-assign.scss

@@ -0,0 +1,103 @@
+.minibadge-assign {
+
+  section.lightbox {
+    @include mobile {
+      position: absolute;
+    }
+  }
+
+  .background::after {
+    @include mobile {
+      background: none;
+    }
+  }
+
+  .background::before {
+    @include mobile {
+      box-shadow: 0 2px 5px $shadow;
+      height: 50px;
+    }
+  }
+
+  .content {
+    width: 900px;
+    margin-top: 10em;
+
+    @include mobile {
+      position: fixed;
+      width: 100%;
+      padding: 0;
+      margin: 0;
+    }
+  }
+
+  &-title {
+    &:hover {
+      color: $minibadge-blue;
+    }
+
+    &:active {
+      color: $minibadge-blue-dark;
+    }
+  }
+
+  &-footer {
+    margin-top: 10px;
+    @include mobile {
+      justify-content: center;
+    }
+
+    &-warning {
+      color: $minibadge-red;
+    }
+
+    &-buttons {
+      margin-left: auto;
+
+      button:not(:last-child) {
+        margin-right: 20px;
+        min-width: 148px;
+      }
+    }
+  }
+
+  &-content {
+    flex-direction: row-reverse;
+    @include mobile {
+      flex-direction: column;
+    }
+
+    &-card {
+      display: flex;
+      justify-content: end;
+      @include marginX(2em);
+      margin-bottom: 2em;
+      @include mobile {
+        flex: 1;
+        justify-content: center;
+      }
+    }
+
+    &-search {
+      @include mobile {
+        justify-content: center;
+        align-items: center;
+      }
+      margin-left: 1em;
+
+      .search-user {
+        margin-bottom: 1em;
+        width: 100%;
+      }
+    }
+  }
+
+  .minibadge-card {
+    border: solid $minibadge-shadow-lighter 1px;
+    @include mobile {
+      width: 100%;
+      align-self: center;
+    }
+  }
+}
+

package/scss/specifics/minibadge/containers/_badge-given.scss

@@ -0,0 +1,14 @@
+.badge-given{
+  &-filter{
+    display: flex;
+    column-gap: 1%;
+    align-items: center;
+    margin: 1em 0;
+    @include mobile{
+      margin-left: 8px;
+    }
+  }
+  &-search{
+    margin: 0;
+  }
+}

package/scss/specifics/minibadge/containers/_container.scss

@@ -0,0 +1,27 @@
+.minibadge-container {
+  h2 {
+    margin: 10px 0 0;
+    font-weight: bold;
+    color: $minibadge-grey-dark;
+
+    @include mobile {
+      @include marginX(10px);
+    }
+  }
+
+  h3 {
+    margin: 0;
+    color: $minibadge-grey-dark;
+    font-size: 16px;
+    font-weight: normal;
+
+    @include mobile {
+      @include marginX(10px);
+    }
+  }
+
+  i.settings:hover {
+    color: $minibadge-orange;
+  }
+}
+

package/scss/specifics/minibadge/containers/_index.scss

@@ -0,0 +1,4 @@
+@import "container";
+@import "badge-assign";
+@import "badge-given";
+@import "statistics";