@openeuropa/bcl-theme-default 0.1.2 → 0.1.202408021145

package/src/scss/_language-list.scss

@@ -0,0 +1,51 @@
+.bcl-language-list {
+  .btn {
+    background: $white;
+    color: $primary;
+    border-color: $gray-400;
+    &:hover {
+      text-decoration: underline;
+      border-color: $eu-cta-color;
+    }
+    &.selected {
+      background: $secondary;
+      color: $white;
+      border-color: $secondary;
+      svg {
+        color: $white;
+      }
+    }
+  }
+  &.bcl-language-list--ec,
+  &.bcl-language-list--eu {
+    .btn {
+      color: $eu-cta-color;
+      font-weight: $font-weight-bold;
+      &.selected {
+        background: $eu-selected-background;
+        color: $black;
+        border-color: $eu-selected-background;
+        svg {
+          color: $black;
+        }
+      }
+    }
+  }
+  &.bcl-language-list--eu {
+    .btn {
+      border: 2px solid $eu-cta-color;
+    }
+  }
+  &.bcl-language-list--ec {
+    .main {
+      background: $eu-background-color;
+      h5 {
+        color: $white;
+      }
+    }
+    .btn {
+      border-radius: 0;
+      border-color: transparent;
+    }
+  }
+}

package/src/scss/_multiselect.scss

@@ -0,0 +1,165 @@
+/* stylelint-disable selector-no-qualifying-type,
+   selector-max-class, selector-max-compound-selectors,
+   no-descending-specificity,
+   function-calc-no-unspaced-operator,
+*/
+@use "slim-select/src/slim-select/slimselect.scss" with (
+  $primary-color: $primary
+);
+
+// Multiselect Spacers
+$multiselect-spacers: (
+  "disabled-spacer": calc(map-get($spacers, 2) - 1px),
+  "disabled-spacer-md": calc(map-get($spacers, 2) - 2px),
+  "select-spacer": calc(map-get($spacers, 2) - 2px),
+  "select-spacer-md": 0.075rem,
+  "select-spacer-start": 0.3rem,
+  "badge-padding-x": map-get($spacers, 1),
+  "badge-padding-y": map-get($spacers, 1),
+  "add-margin-top": map-get($spacers, "2-5"),
+  "add-margin-top-md": map-get($spacers, 2),
+  "icon-position-x": map-get($spacers, 4),
+);
+
+select.multi-select {
+  position: absolute;
+  // stylelint-disable declaration-no-important
+  display: inline-block !important;
+  max-width: 0;
+  max-height: 35px;
+  pointer-events: none;
+  opacity: 0;
+}
+
+.ss-main.multi-select {
+  padding: 0;
+  &.form-select.is-invalid,
+  &.form-select.is-valid {
+    background: none;
+    padding: 0;
+  }
+  .ss-values {
+    @include font-size($h4-font-size);
+    .ss-value {
+      display: inline-block;
+      padding: $badge-padding-y $badge-padding-x;
+      @include font-size($badge-font-size);
+      font-weight: $badge-font-weight;
+      line-height: 1;
+      color: $badge-color;
+      text-align: left;
+      white-space: normal;
+      vertical-align: baseline;
+      padding-right: map-get($spacers, "3-5");
+      @include border-radius($badge-border-radius);
+      @include gradient-bg();
+      .ss-value-delete {
+        font-size: 0;
+        &:after {
+          background-image: url("data:image/svg+xml,%3Csvg width='16' height='17' viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 8.5C16 12.9183 12.4183 16.5 8 16.5C3.58172 16.5 0 12.9183 0 8.5C0 4.08172 3.58172 0.5 8 0.5C12.4183 0.5 16 4.08172 16 8.5ZM5.35355 5.14645C5.15829 4.95118 4.84171 4.95118 4.64645 5.14645C4.45118 5.34171 4.45118 5.65829 4.64645 5.85355L7.29289 8.5L4.64645 11.1464C4.45118 11.3417 4.45118 11.6583 4.64645 11.8536C4.84171 12.0488 5.15829 12.0488 5.35355 11.8536L8 9.20711L10.6464 11.8536C10.8417 12.0488 11.1583 12.0488 11.3536 11.8536C11.5488 11.6583 11.5488 11.3417 11.3536 11.1464L8.70711 8.5L11.3536 5.85355C11.5488 5.65829 11.5488 5.34171 11.3536 5.14645C11.1583 4.95118 10.8417 4.95118 10.6464 5.14645L8 7.79289L5.35355 5.14645Z' fill='%23F8F9FA'/%3E%3C/svg%3E%0A");
+          background-repeat: no-repeat;
+          content: "";
+          display: inline-block;
+          height: 1rem;
+          transform: scale(0.8) translateY(50%);
+          width: 1rem;
+          padding: 15px;
+          background-position: 50%;
+          border-radius: 50%;
+          position: absolute;
+          right: 0;
+          bottom: calc(50% - 3px);
+        }
+      }
+    }
+    .ss-disabled {
+      padding-top: map-get($multiselect-spacers, "disabled-spacer");
+      padding-bottom: map-get($multiselect-spacers, "disabled-spacer");
+      @include font-size(1rem);
+    }
+  }
+  .ss-multi-selected {
+    border-color: $input-border-color;
+    padding: map-get($multiselect-spacers, "select-spacer") 0
+      map-get($multiselect-spacers, "select-spacer")
+      map-get($multiselect-spacers, "select-spacer-start");
+    &.ss-disabled {
+      .ss-values {
+        .ss-value {
+          background: $gray-500;
+        }
+      }
+    }
+    .ss-add {
+      margin-top: 0;
+      align-self: center;
+    }
+  }
+}
+
+.ss-main.multi-select.is-invalid,
+.ss-main.multi-select.is-valid,
+.was-validated .multi-select:invalid + .ss-main.multi-select,
+.was-validated .multi-select:valid + .ss-main.multi-select {
+  .ss-multi-selected {
+    background-repeat: no-repeat;
+    background-position: right map-get($multiselect-spacers, "icon-position-x")
+      center;
+    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
+  }
+}
+.ss-main.multi-select.is-invalid,
+.was-validated .multi-select:invalid + .ss-main.multi-select {
+  .ss-multi-selected {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM8 4C7.46459 4 7.04623 4.46229 7.0995 4.99504L7.45025 8.50248C7.47849 8.78492 7.71616 9 8 9C8.28384 9 8.52151 8.78492 8.54975 8.50248L8.9005 4.99504C8.95377 4.46228 8.53541 4 8 4ZM8.00154 10C7.44926 10 7.00154 10.4477 7.00154 11C7.00154 11.5523 7.44926 12 8.00154 12C8.55383 12 9.00154 11.5523 9.00154 11C9.00154 10.4477 8.55383 10 8.00154 10Z' fill='%23D72E3D'/%3E%3C/svg%3E%0A");
+    border-color: $danger;
+  }
+  .ss-values {
+    .ss-value {
+      background: $danger;
+    }
+  }
+}
+.ss-main.multi-select.is-valid,
+.was-validated .multi-select:valid + .ss-main.multi-select {
+  .ss-multi-selected {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM12.0303 4.96967C11.7374 4.67678 11.2626 4.67678 10.9697 4.96967C10.9626 4.97674 10.9559 4.98424 10.9498 4.9921L7.4774 9.41674L5.38388 7.32322C5.09098 7.03033 4.61611 7.03033 4.32322 7.32322C4.03032 7.61612 4.03032 8.09099 4.32322 8.38388L6.96966 11.0303C7.26256 11.3232 7.73743 11.3232 8.03032 11.0303C8.03685 11.0238 8.043 11.0169 8.04876 11.0097L12.041 6.01947C12.3232 5.72582 12.3196 5.25897 12.0303 4.96967Z' fill='%2328A745'/%3E%3C/svg%3E%0A");
+    border-color: $success;
+  }
+  .ss-values {
+    .ss-value {
+      background: $success;
+    }
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .ss-main.multi-select {
+    .ss-multi-selected {
+      padding: map-get($multiselect-spacers, "select-spacer-md") 0
+        map-get($multiselect-spacers, "select-spacer-md")
+        map-get($multiselect-spacers, "select-spacer-start");
+    }
+    .ss-values {
+      @include font-size(1rem);
+      .ss-value {
+        @include font-size($badge-font-size-desktop);
+      }
+      .ss-disabled {
+        padding-top: calc(
+          map-get($multiselect-spacers, "disabled-spacer-md") + 1px
+        );
+        padding-bottom: map-get($multiselect-spacers, "disabled-spacer-md");
+      }
+    }
+  }
+
+  .ss-main.multi-select.is-invalid,
+  .ss-main.multi-select.is-valid,
+  .was-validated .multi-select:invalid + .ss-main.multi-select,
+  .was-validated .multi-select:valid + .ss-main.multi-select {
+    .ss-multi-selected {
+      background-position: right 1.6rem center;
+    }
+  }
+}

package/src/scss/_pagination.scss

@@ -0,0 +1,41 @@
+.pagination {
+  .page-link {
+    // fix icons vertical alignment
+    display: flex;
+    height: 100%;
+    align-items: center;
+  }
+}
+
+.pagination--glossary {
+  flex-wrap: wrap;
+  margin-bottom: 0;
+
+  .page-link {
+    border: none;
+    border-bottom: 2px solid transparent;
+    color: $dark;
+    font-weight: $font-weight-bold;
+    padding: map-get($spacers, 3);
+    text-transform: uppercase;
+    white-space: nowrap;
+  }
+
+  .active .page-link {
+    background: transparent;
+    border-color: $primary;
+    border-width: 2px;
+    color: $dark;
+    padding-bottom: calc(map-get($spacers, 3) - 1px);
+  }
+
+  .page-item:first-child .page-link {
+    border-radius: 0;
+  }
+}
+
+@include media-breakpoint-down(lg) {
+  .pagination--glossary {
+    @include horizontal-slider;
+  }
+}

package/src/scss/_reset.scss

@@ -0,0 +1,14 @@
+// General reset
+body {
+  // needed for full-width banner
+  overflow-x: hidden;
+}
+
+em.placeholder {
+  background-color: transparent;
+  cursor: auto;
+  min-height: 0;
+  vertical-align: baseline;
+  opacity: 1;
+  display: inline;
+}

package/src/scss/_search-form.scss

@@ -0,0 +1,70 @@
+@use "sass:math";
+
+// Search form Spacers
+$search-spacers: (
+  "icon-spacer-left": map-get($spacers, 3),
+  "icon-spacer-top": math.div(($form-select-height - map-get($icon, "xs")), 2),
+  "icon-spacer-top-md":
+    math.div(($form-select-height-md - map-get($icon, "xs")), 2),
+  "submit-spacer-right": map-get($spacers, 3),
+);
+
+.bcl-search-form {
+  .bcl-search-form__input {
+    &[type="search"]::-webkit-search-cancel-button {
+      width: 1rem;
+      height: 1rem;
+      cursor: pointer;
+      background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM5.35355 4.64645C5.15829 4.45118 4.84171 4.45118 4.64645 4.64645C4.45118 4.84171 4.45118 5.15829 4.64645 5.35355L7.29289 8L4.64645 10.6464C4.45118 10.8417 4.45118 11.1583 4.64645 11.3536C4.84171 11.5488 5.15829 11.5488 5.35355 11.3536L8 8.70711L10.6464 11.3536C10.8417 11.5488 11.1583 11.5488 11.3536 11.3536C11.5488 11.1583 11.5488 10.8417 11.3536 10.6464L8.70711 8L11.3536 5.35355C11.5488 5.15829 11.5488 4.84171 11.3536 4.64645C11.1583 4.45118 10.8417 4.45118 10.6464 4.64645L8 7.29289L5.35355 4.64645Z' fill='%236C757D'/%3E%3C/svg%3E");
+      appearance: none;
+    }
+  }
+  .bcl-search-form__group {
+    position: relative;
+  }
+  &.rounded {
+    .bcl-search-form__submit,
+    .bcl-search-form__input {
+      border-radius: 2rem;
+    }
+  }
+  &.submittable {
+    .bcl-search-form__input {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+    .bcl-search-form__submit {
+      padding-right: map-get($search-spacers, "submit-spacer-right");
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+    .bcl-search-form__group {
+      display: flex;
+    }
+  }
+  .form-label {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    visibility: visible;
+    border: 0;
+  }
+  .bcl-search-form__icon {
+    position: absolute;
+    top: map-get($search-spacers, "icon-spacer-top");
+    left: map-get($search-spacers, "icon-spacer-left");
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .bcl-search-form {
+    .bcl-search-form__icon {
+      top: map-get($search-spacers, "icon-spacer-top-md");
+    }
+  }
+}

package/src/scss/_spinners.scss

@@ -0,0 +1,9 @@
+.spinner-border-lg {
+  width: 3rem;
+  height: 3rem;
+  border-width: 0.4rem;
+}
+.spinner-grow-lg {
+  width: 3rem;
+  height: 3rem;
+}

package/src/scss/_tabs.scss

@@ -0,0 +1,50 @@
+.nav {
+  &.bcl__nav {
+    border: none;
+    .nav-link {
+      padding: map-get($spacers, 3);
+      color: $black;
+      border: none;
+      border-radius: 0;
+      &:hover {
+        background: rgba($primary, 0.3);
+      }
+      &.disabled {
+        color: $gray-600;
+      }
+      &.active {
+        position: relative;
+        background: transparent;
+        border-top: none;
+        border-right: none;
+        border-bottom: map-get($border-widths, 2) solid $primary;
+        border-left: none;
+      }
+    }
+  }
+  &.bg-gray {
+    background: $gray-200;
+  }
+}
+
+@include media-breakpoint-down(md) {
+  .nav-tabs {
+    @include horizontal-slider;
+    border: none;
+
+    .nav-item {
+      z-index: 1;
+    }
+    .nav-link {
+      margin-bottom: 0;
+      border-bottom: map-get($border-widths, 1) solid $gray-300;
+      &.active {
+        border-bottom: none;
+      }
+    }
+    .dropdown-menu {
+      /* stylelint-disable-next-line declaration-no-important */
+      position: fixed !important;
+    }
+  }
+}

package/src/scss/_timeline.scss

@@ -0,0 +1,78 @@
+/* stylelint-disable declaration-no-important */
+// timeline
+.bcl-timeline {
+  list-style-type: none;
+  position: relative;
+  padding: 0;
+  margin: 0;
+  max-width: 648px;
+
+  > li {
+    position: relative;
+    padding-bottom: map-get($spacers, "4-5");
+    padding-left: calc(22px + map-get($spacers, 3));
+
+    &::before {
+      content: "";
+      background: $white;
+      display: inline-block;
+      position: absolute;
+      border-radius: 50%;
+      border: 2px solid var(--bs-primary);
+      left: 0;
+      width: 22px;
+      height: 22px;
+    }
+
+    &::after {
+      content: "";
+      background: $gray-300;
+      display: inline-block;
+      position: absolute;
+      left: 10px;
+      top: 22px;
+      width: 2px;
+      height: 100%;
+    }
+
+    &.collapsing {
+      transition: none !important;
+    }
+
+    &.bcl-timeline__item--toggle {
+      &::before {
+        border-color: $gray-600;
+        top: 7px;
+      }
+      &::after {
+        top: 30px;
+        background: repeating-linear-gradient(
+          to bottom,
+          $gray-300,
+          $gray-300 3px,
+          $white 3px,
+          $white 6px
+        );
+      }
+    }
+    &:last-child {
+      &::after {
+        content: none;
+      }
+    }
+  }
+
+  button[aria-expanded="false"] {
+    .label-expanded {
+      display: none;
+    }
+  }
+  button[aria-expanded="true"] {
+    .label-collapsed {
+      display: none;
+    }
+    svg {
+      transform: rotate(180deg);
+    }
+  }
+}

package/src/scss/base/_colors.scss

@@ -0,0 +1,21 @@
+// Custom theme colors
+
+$primary: #253ebe;
+$secondary: #70254a;
+$info: #0d768b;
+$danger: #a51f2c;
+$warning: #ffba07;
+$success: #09854c;
+$light: #f8f9fa;
+$dark: #212529;
+
+$text-muted: #495057;
+
+// Color variants scales
+
+// Tables
+$table-hover-bg-factor: 0.1;
+
+// Alerts
+$alert-bg-scale: -90%;
+$alert-border-scale: -80%;

package/src/scss/base/_layout.scss

@@ -0,0 +1,35 @@
+@include media-breakpoint-up(lg) {
+  .bcl-sidebar h2 {
+    font-size: $h4-font-size;
+  }
+}
+
+.bcl-card-start-col {
+  flex-basis: $card-start-col-size;
+  padding: 0;
+  &.bcl-size-small {
+    flex-basis: $card-start-col-small-size;
+  }
+  &.bcl-size-large {
+    flex-basis: $card-start-col-large-size;
+  }
+  &.bcl-size-extra-large {
+    flex-basis: $card-start-col-extra-large-size;
+  }
+}
+
+.row {
+  .bcl-card-start-col {
+    margin-left: calc(var(--#{$variable-prefix}gutter-x) * 0.5);
+    margin-right: calc(var(--#{$variable-prefix}gutter-x) * 0.5);
+  }
+}
+
+@include media-breakpoint-down(lg) {
+  .bcl-content-banner {
+    .bcl-card-start-col {
+      margin: 0 auto;
+      padding: 0 calc(var(--#{$variable-prefix}gutter-x) * 0.5);
+    }
+  }
+}

package/src/scss/base/_mixins.scss

@@ -0,0 +1,13 @@
+@mixin horizontal-slider {
+  position: relative;
+  flex-wrap: nowrap;
+  overflow-x: scroll;
+  overflow-y: hidden;
+  white-space: nowrap;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  &::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+}