@trilogy-ds/styles 0.0.3-beta-v4 → 0.0.4-esm-cjs

package/framework/src/utilities/_mixins.scss

@@ -1,635 +0,0 @@
-@use "sass:string";
-@import "./initial-variables";
-
-%delete {
-  @extend %unselectable;
-
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  background-color: rgba(black, 0.2);
-  border: none;
-  border-radius: 9999px;
-  cursor: pointer;
-  display: inline-block;
-  flex-grow: 0;
-  flex-shrink: 0;
-  font-size: 0;
-  height: 20px;
-  max-height: 20px;
-  max-width: 20px;
-  min-height: 20px;
-  min-width: 20px;
-  outline: none;
-  position: relative;
-  vertical-align: top;
-  width: 20px;
-
-  &::before,
-  &::after {
-    background-color: #fff;
-    content: '';
-    display: block;
-    left: 50%;
-    position: absolute;
-    top: 50%;
-    transform: translateX(-50%) translateY(-50%) rotate(45deg);
-    transform-origin: center center;
-  }
-
-  &::before {
-    height: 2px;
-    width: 50%;
-  }
-
-  &::after {
-    height: 50%;
-    width: 2px;
-  }
-
-  &:hover,
-  &:focus {
-    background-color: rgba(black, 0.3);
-  }
-
-  &:active {
-    background-color: rgba(black, 0.4);
-  }
-
-  // Sizes
-  &.is-small {
-    height: 16px;
-    max-height: 16px;
-    max-width: 16px;
-    min-height: 16px;
-    min-width: 16px;
-    width: 16px;
-  }
-
-  &.is-medium {
-    height: 24px;
-    max-height: 24px;
-    max-width: 24px;
-    min-height: 24px;
-    min-width: 24px;
-    width: 24px;
-  }
-
-  &.is-large {
-    height: 32px;
-    max-height: 32px;
-    max-width: 32px;
-    min-height: 32px;
-    min-width: 32px;
-    width: 32px;
-  }
-}
-
-%unselectable {
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-@mixin delete {
-  @extend %delete;
-}
-
-@mixin arrow( $direction: 'down') {
-  background-color: currentColor;
-  @if $direction == 'up' {
-    content: "";
-    mask-image: url('./assets/icons/all/arrow-up.svg');
-  } @else if $direction == 'left' {
-    content: "";
-    mask-image: url('./assets/icons/all/arrow-left.svg');
-  } @else if $direction == 'right' {
-    content: "";
-    mask-image: url('./assets/icons/all/arrow-right.svg');
-  } @else {
-    content: "";
-    mask-image: url('./assets/icons/all/arrow-down.svg');
-  }
-
-  min-width: 15px;
-  min-height: 15px;
-  mask-size: 15px;
-  position: absolute;
-  display: inline-block;
-}
-
-@mixin block {
-  &:not(:last-child) {
-    margin-bottom: 15px;
-  }
-}
-
-@mixin clearfix {
-  &::after {
-    clear: both;
-    content: ' ';
-    display: table;
-  }
-}
-
-@mixin center($width, $height: 0) {
-  position: absolute;
-
-  @if $height != 0 {
-    left: calc(50% - (#{$width} / 2));
-    top: calc(50% - (#{$height} / 2));
-  } @else {
-    left: calc(50% - (#{$width} / 2));
-    top: calc(50% - (#{$width} / 2));
-  }
-}
-
-@mixin spinner {
-  animation: spinAround 500ms infinite linear;
-  border: 2px solid getColor('neutral-fade');
-  border-radius: 290486px;
-  border-right-color: transparent;
-  border-top-color: transparent;
-  content: '';
-  display: block;
-  height: 1em;
-  position: relative;
-  width: 1em;
-}
-
-@mixin overflow-touch {
-  -webkit-overflow-scrolling: touch;
-}
-
-@mixin label-states {
-  &:focus,
-  &:active,
-  &:hover {
-    @include hover();
-  }
-}
-
-@mixin overlay($offset: 0) {
-  position: absolute;
-  top: $offset;
-  bottom: $offset;
-  left: $offset;
-  right: $offset;
-}
-
-@mixin placeholder {
-  $placeholders: ':-moz' ':-webkit-input' '-moz' '-ms-input';
-
-  @each $placeholder in $placeholders {
-    &:#{$placeholder}-placeholder {
-      @content;
-    }
-  }
-}
-
-@mixin unselectable {
-  @extend %unselectable;
-}
-
-@mixin ui-icon {
-  font-family: trilogy-all;
-  font-style: normal;
-  font-weight: normal;
-  display: inline-block;
-  text-decoration: inherit;
-  margin-right: 0.2em;
-  text-align: center;
-
-  /* For safety - reset parent styles, that can break glyph codes*/
-  font-variant: normal;
-  text-transform: none;
-
-  /* fix buttons height, for twitter bootstrap */
-  line-height: 1em;
-
-  /* remove if not needed */
-  margin-left: 0.2em;
-
-  /* Font smoothing. That was taken from TWBS */
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-// Responsiveness
-@mixin from($device) {
-  @media screen and (min-width: $device) {
-    @content;
-  }
-}
-
-@mixin until($device) {
-  @media screen and (max-width: $device - 1px) {
-    @content;
-  }
-}
-
-@mixin mobile {
-  @media screen and (max-width: $tablet - 1px) {
-    @content;
-  }
-}
-
-@mixin tablet {
-  @media screen and (min-width: $tablet), print {
-    @content;
-  }
-}
-
-@mixin tablet-only {
-  @media screen and (min-width: $tablet) and (max-width: $desktop - 1px) {
-    @content;
-  }
-}
-
-@mixin touch {
-  @media screen and (max-width: $desktop - 1px) {
-    @content;
-  }
-}
-
-@mixin desktop {
-  @media screen and (min-width: $desktop) {
-    @content;
-  }
-}
-
-@mixin desktop-only {
-  @media screen and (min-width: $desktop) and (max-width: $widescreen - 1px) {
-    @content;
-  }
-}
-
-@mixin until-widescreen {
-  @media screen and (max-width: $widescreen - 1px) {
-    @content;
-  }
-}
-
-@mixin widescreen {
-  @media screen and (min-width: $widescreen) {
-    @content;
-  }
-}
-
-@mixin widescreen-only {
-  @media screen and (min-width: $widescreen) and (max-width: $fullhd - 1px) {
-    @content;
-  }
-}
-
-@mixin until-fullhd {
-  @media screen and (max-width: $fullhd - 1px) {
-    @content;
-  }
-}
-
-@mixin fullhd {
-  @media screen and (min-width: $fullhd) {
-    @content;
-  }
-}
-
-@mixin all-desktop-only {
-  @media screen and (min-width: $desktop) and (max-width: $fullhd - 1px) {
-    @content;
-  }
-}
-
-@mixin ellipsis() {
-  white-space: nowrap;
-  overflow-x: hidden;
-  text-overflow: ellipsis;
-}
-
-@mixin text-tags() {
-  a,
-  span,
-  p,
-  i,
-  strong,
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  label,
-  h6 {
-    @content;
-  }
-}
-
-@mixin heading-tags() {
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    @content;
-  }
-}
-
-@mixin apply-shadow-box {
-  box-shadow: $shadow;
-}
-
-@mixin apply-colors($property: 'color') {
-  @each $name, $pair in $colors-brand-functionnal {
-    $color: getColor($name);
-    $brandName: getColorBrandName($name);
-    &.is-#{$brandName} {
-      #{$property}: $color;
-    }
-  }
-}
-
-@mixin pattern-light($size, $x-pos: top, $y-pos: center) {
-  background-size: $size;
-  background-position: $x-pos $y-pos;
-}
-
-@mixin pattern-dark($size, $x-pos: top, $y-pos: center) {
-  background: linear-gradient(#1b3650, getColor('accent'));
-  background-size: auto, $size, auto;
-  background-position: top left, $x-pos $y-pos, top left;
-}
-
-// import sass bulma
-@mixin input {
-  @include control;
-  height: 56px;
-  background-color: getColor('background');
-  border-color: getColor('neutral');
-  color: getColor('font');
-
-  @include placeholder {
-    color: getColor('font') !important;
-    filter: grayscale(100%);
-    opacity: 1 !important;
-    transition: all 0.2s ease-out;
-  }
-
-  @include hover();
-}
-
-@mixin checkbox-and-radio($type) {
-  //TILES WRAPPER
-  .#{$type}-tiles {
-    display: flex;
-    gap: 16px;
-    flex-wrap: wrap;
-  }
-
-  //BOTH
-  .#{$type},
-  .#{$type}-tile {
-    position: relative;
-
-    label.#{$type}-label {
-      cursor: pointer;
-      font-size: 14px;
-
-      &:before,
-      &:after {
-        content: '';
-        position: absolute;
-        width: 18px;
-        height: 18px;
-      }
-
-      &:before {
-        border: var(--border);
-      }
-    }
-
-    input {
-      display: none;
-
-      &:checked ~ label.#{$type}-label {
-        border-color: getColor('main');
-
-        &:before {
-          border-color: getColor('main');
-        }
-
-        &:after {
-          background-color: getColor('main');
-        }
-      }
-
-      &:disabled,
-      &:disabled:checked {
-        & ~ label.#{$type}-label {
-          &:after {
-            background-color: getColor('disabled-fade');
-          }
-        }
-      }
-
-      &:disabled {
-        & ~ label.#{$type}-label {
-          &:after {
-            background-color: transparent;
-          }
-        }
-      }
-    }
-  }
-
-  // SIMPLE WITH LABEL ONLY
-  .#{$type} {
-    display: flex;
-    align-items: center;
-    margin: 6px 8px;
-    width: fit-content;
-
-    input:disabled,
-    input:disabled:checked {
-      & ~ label.#{$type}-label {
-        @include disabledRulesWithoutBG;
-      }
-    }
-
-    label.#{$type}-label {
-      padding: 4px;
-      padding-left: 34px;
-
-      &:before,
-      &:after {
-        top: 50%;
-        transform: translateY(-50%);
-        left: 0;
-      }
-    }
-
-    &:hover &:not(disabled) {
-      label.#{$type}-label {
-        &:before {
-          @include hoverRules();
-        }
-      }
-    }
-
-    &:focus {
-      border: 2px;
-      border-color: getColor('main');
-    }
-  }
-
-  //TILE ONLY
-  .#{$type}-tile {
-    position: relative;
-    max-width: 160px;
-    display: inline-block;
-    text-align: center;
-
-    input:disabled,
-    input:disabled:checked {
-      & ~ label.#{$type}-label {
-        @include disabledRules;
-      }
-    }
-
-    &:first-child {
-      margin-left: 0;
-    }
-
-    &:last-child {
-      margin-right: 0;
-    }
-
-    label.#{$type}-label {
-      display: block;
-      position: relative;
-      padding: 40px 16px 16px;
-      border: var(--border);
-      border-radius: var(--radius);
-      box-sizing: border-box;
-      background-color: getColor('background');
-
-      &:before {
-        top: 16px;
-        right: 16px;
-      }
-
-      span.#{$type}-title {
-        font-weight: bold;
-        width: 100%;
-        display: block;
-        font-size: 16px;
-      }
-    }
-
-    input {
-      &:not(:disabled):not(:checked) ~ label.radio-label {
-        @include label-states;
-      }
-
-      &:not(:disabled) ~ label.checkbox-label {
-        @include label-states;
-      }
-
-      &:checked:not(:disabled) ~ label.#{$type}-label {
-        border-color: getColor('main');
-        border-width: 2px;
-        padding: 15px;
-        padding-top: 39px;
-
-        &:before {
-          top: 15px;
-          right: 15px;
-        }
-
-        span.#{$type}-title {
-          color: getColor('main');
-        }
-      }
-
-      &:disabled {
-        & ~ label.#{$type}-label {
-          &:before {
-            border-color: getColor('disabled') !important;
-          }
-        }
-      }
-
-      &:disabled:checked ~ label.#{$type}-label {
-        .checkbox-title {
-          color: getColor('disabled');
-        }
-      }
-    }
-
-    &.is-horizontal {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      max-width: unset;
-      width: 100%;
-      position: relative;
-
-      &.is-narrow {
-        width: fit-content;
-      }
-
-      input {
-        &:checked:not(:disabled) ~ label.#{$type}-label {
-          padding: 15px;
-          padding-right: 47px;
-        }
-
-      }
-
-      label.#{$type}-label {
-        width: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-        text-align: left;
-        padding: 16px 48px 16px 16px;
-
-        &:before,
-        &:after {
-          top: 50% !important;
-          transform: translateY(-50%);
-        }
-      }
-
-      .icon {
-        margin-right: 16px;
-      }
-    }
-  }
-}
-
-@mixin hoverRules {
-  background-color: getColor('main-fade');
-}
-
-@mixin hover {
-  &:hover:not(.is-disabled):not(:focus) {
-    @include hoverRules();
-  }
-  &:focus:not(.is-disabled), &:focus-visible:not(.is-disabled) {
-    border: 2px solid currentColor;
-  }
-}
-
-@mixin disabledRulesWithoutBG {
-  border-color: getColor('disabled') !important;
-  box-shadow: none !important;
-  color: getColor('disabled') !important;
-  cursor: not-allowed !important;
-  filter: grayscale(1);
-}
-
-@mixin disabledRules {
-  background-color: getColor('disabled-fade') !important;
-  @include disabledRulesWithoutBG;
-}