oxd/variables.scss

$oxd-primary-one-color: #ff7b1d !default;
$oxd-primary-two-color: #17a954 !default;


$oxd-secondary-one-color: #ffaa00 !default;
$oxd-secondary-two-color: #f4eec7 !default;
$oxd-secondary-three-color: #ccda46 !default;
$oxd-secondary-four-color: #76bc21 !default;


$oxd-interface-gray-darken-2-color: #38455d !default;
$oxd-interface-gray-darken-1-color: #64728c !default;
$oxd-interface-gray-color: #929baa !default;
$oxd-interface-gray-lighten-1-color: #cfd3de !default;
$oxd-interface-gray-lighten-2-color: #e8eaef !default;


$oxd-background-light-gray-color: #f1f2f5 !default;
$oxd-background-pastel-white-color: #f6f5fb !default;
$oxd-background-white-shadow-color: #fafafc !default;
$oxd-background-white-color: #fafafa !default;


$oxd-feedback-info-color: #1e6ceb !default;
$oxd-feedback-danger-color: #eb0910 !default;
$oxd-feedback-warn-color: #ffa62f !default;
$oxd-feedback-success-color: #34bc40 !default;

$oxd-white-color: #ffffff !default;
$oxd-black-color: #000000 !default;


$oxd-primary-gradient-start-color: #ff8226 !default;
$oxd-primary-gradient-end-color: #f35c17 !default;
$oxd-primary-gradient: linear-gradient(
  90deg,
  $oxd-primary-gradient-start-color 0%,
  $oxd-primary-gradient-end-color 90%
) !default;
$oxd-secondary-gradient-start-color: #ff5e00 !default;
$oxd-secondary-gradient-end-color: #ffa46b !default;
$oxd-secondary-gradient: linear-gradient(
  90deg,
  $oxd-secondary-gradient-start-color 0%,
  $oxd-secondary-gradient-end-color 90%
) !default;


$oxd-primary-font-color: $oxd-white-color !default;
$oxd-secondary-font-color: $oxd-white-color !default;@mixin oxd-input-control {
  box-sizing: border-box;
  font-family: $oxd-input-control-font-family;
  color: $oxd-input-control-font-color;
  font-size: $oxd-input-control-font-size;
  font-weight: $oxd-input-control-font-weight;
  line-height: $oxd-input-control-line-height;
  border-radius: $oxd-input-control-border-radius;
  padding: $oxd-input-control-vertical-padding
    $oxd-input-control-horizontal-padding;
}

@mixin oxd-input-control-size {
  width: $oxd-input-control-width;
}

@mixin oxd-scrollbar(
  $thumb-color: $oxd-scrollbar-thumb-color,
  $track-color: $oxd-scrollbar-track-color,
  $size: $oxd-scrollbar-size,
  $arrow-color: $oxd-scrollbar-arrow-color
) {
  
  scrollbar-color: $thumb-color $track-color;
  scrollbar-width: thin;

  
  &::-webkit-scrollbar {
    width: $size;
    height: $size;
  }

  &::-webkit-scrollbar-thumb {
    background: $thumb-color;
    border-radius: $oxd-scrollbar-thumb-border-radius;
  }

  &::-webkit-scrollbar-track {
    background: $track-color;
  }

  
  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    & {
      scrollbar-face-color: $thumb-color;
      scrollbar-track-color: $track-color;
      scrollbar-arrow-color: $arrow-color;
    }
  }
}

@mixin oxd-flex-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

@mixin oxd-respond-to($breakpoint) {
  $raw-query: map-get($oxd_breakpoints, $breakpoint);

  @if $raw-query {
    $query: if(
      type-of($raw-query) == 'string',
      unquote($raw-query),
      inspect($raw-query)
    );

    @media #{$query} {
      @content;
    }
  } @else {
    @error 'No value found for `#{$breakpoint}`. '
         + 'Please make sure it is defined in `$oxd_breakpoints` map.';
  }
}



@mixin aspect-ratio($arglist...) {
  $map: keywords($arglist);
  $height: map-get($map, height) or nth-value($arglist, 2);
  $width: map-get($map, width) or nth-value($arglist, 1);
  $ratio: map-get($map, ratio) or
    if($width and $height, $width/$height, nth-value($arglist, 1)) or 1;
  $padding: calc((1 / #{$ratio}) * 100%);
  &::before,
  &::after {
    content: '';
    display: table;
    clear: both;
    width: 1px;
    margin-left: -1px;
  }
  &::before {
    float: left;
    padding-bottom: $padding;
  }
}



@function nth-value($list, $index) {
  @return if(length($list) >= $index, nth($list, $index), null);
}$oxd-border: 1px solid !default;
$oxd-border-radius: 1.2rem !default;
$oxd-scrollbar-thumb-border-radius: 20px !default;
$oxd-scrollbar-thumb-color: $oxd-interface-gray-lighten-1-color !default;
$oxd-scrollbar-track-color: $oxd-background-pastel-white-color !default;
$oxd-scrollbar-arrow-color: $oxd-interface-gray-color !default;
$oxd-scrollbar-size: 0.5rem !default;
$oxd-font-family: 'Nunito Sans', sans-serif !default;

$oxd_breakpoints: (
  'xs': (
    min-width: 0px,
  ),
  'sm': (
    min-width: 600px,
  ),
  'md': (
    min-width: 800px,
  ),
  'lg': (
    min-width: 1000px,
  ),
  'xl': (
    min-width: 1200px,
  ),
);


$oxd-input-control-font-size: 14px !default;
$oxd-input-control-font-color: $oxd-interface-gray-darken-1-color !default;
$oxd-input-control-font-weight: 400 !default;
$oxd-input-control-border-radius: 0.65rem !default;
$oxd-input-control-line-height: 1.5 !default;
$oxd-input-control-font-family: $oxd-font-family !default;
$oxd-input-control-horizontal-padding: 0.5rem !default;
$oxd-input-control-vertical-padding: 0.675rem !default;
$oxd-input-control-border--active: $oxd-border
  $oxd-interface-gray-lighten-2-color !default;
$oxd-input-control-border--focus: $oxd-border $oxd-interface-gray-color !default;
$oxd-input-control-border--error: $oxd-border $oxd-feedback-danger-color !default;
$oxd-input-control-box-shadow--focus: 1px 1px 6px rgba(35, 35, 36, 0.12) !default;
$oxd-input-control-box-shadow--error: 0 0 5px 0.2rem rgba(223, 9, 16, 0.1) !default;
$oxd-input-control-width: 100% !default;


$oxd-dropdown-shadow: 0px 5px 15px -8px rgba(0, 0, 0, 0.15) !default;
$oxd-dropdown-border: 1px solid $oxd-interface-gray-lighten-2-color !default;
$oxd-dropdown-border-radius: 0.65rem !default;
$oxd-dropdown-background-color: $oxd-white-color !default;
$oxd-dropdown-padding: 4px !default;
$oxd-dropdown-item-hover-color: #f6f7f9 !default;


$oxd-toggle-button-z-index: 100 !default;
$oxd-loader-z-index: 200 !default;
$oxd-topbar-z-index: 210 !default;
$oxd-sidepanel-overlay-z-index: 220 !default;
$oxd-sidepanel-z-index: 230 !default;
$oxd-dropdown-z-index: 240 !default;
$oxd-overlay-z-index: 300 !default;
$oxd-dialog-z-index: 400 !default;

$oxd-sidepanel-expand-width: 16rem !default;
$oxd-sidepanel-collapse-width: 5.2rem !default;