novo-elements.scss

// --------------------------------------------------
// Global
// --------------------------------------------------
@import "~novo-design-tokens/scss";
@import "novo-design-tokens/css/variables.min.css";

@import "./styles/variables";
@import "./styles/reset";
@import "./styles/base";
@import "./styles/global/functions";
@import "./styles/global/include-media";
@import "./styles/global/flex-grid";

// --------------------------------------------------
// Content
// --------------------------------------------------
@import "./styles/typography";
@import "./styles/iconography";
@import "./elements/common/typography/text.mixins";

// CDK
@import "./styles/cdk";
@include cdk-overlay();

// --------------------------------------------------
// Elements
// --------------------------------------------------
@import "./elements/data-table/data-table.component";
@import "./elements/tabs/Tabs";
@import "./elements/ace-editor/AceEditor";
@import "./elements/radio/Radio";
@import "./elements/toast/Toast";
@import "./elements/modal/modal.component";
@import "./elements/card/Card";
@import "./elements/agenda/month/AgendaMonthView";
@import "./elements/agenda/week/AgendaWeekView";
@import "./elements/agenda/day/AgendaDayView";
@import "./elements/agenda/common/AgendaDateChange";
@import "./elements/loading/Loading";
@import "./elements/loading/NovoSpinner";
@import "./elements/select/Select";
@import "./elements/picker/Picker";
@import "./elements/picker/extras/grouped-multi-picker-results/GroupedMultiPickerResults";
@import "./elements/picker/extras/mixed-multi-picker-results/MixedMultiPickerResults";
@import "./elements/picker/extras/skills-picker-results/SkillsSpecialtyPickerResults";
@import "./elements/chips/Chips";
@import "./elements/dropdown/Dropdown";
@import "./elements/switch/Switch";
@import "./elements/date-picker/DatePicker";
@import "./elements/time-picker/TimePicker";
@import "./elements/date-time-picker/DateTimePicker";
@import "./elements/header/Header";
@import "./elements/list/List";
@import "./elements/table/Table";
@import "./elements/table/extras/pagination/Pagination";
@import "./elements/dragula/Dragula";
@import "./elements/form/Form";
@import "./elements/quick-note/QuickNote";
@import "./elements/tiles/Tiles";
@import "./elements/tooltip/Tooltip";
@import "./elements/slider/Slider";
@import "./elements/tip-well/TipWell";
@import "./elements/ckeditor/CKEditor";
@import "./elements/category-dropdown/CategoryDropdown";
@import "./elements/multi-picker/MultiPicker";
@import "./elements/popover/PopOver";
@import "./elements/table/extras/dropdown-cell/DropdownCell";
@import "./elements/search/SearchBox";
@import "./elements/places/places.component";
@import "./elements/value/Values";
@import "./elements/icon/Icon";
// @import "./elements/expansion/expansion-panel";
// @import "./elements/expansion/expansion-panel-header";
@import "./elements/stepper/stepper.component";
@import "./elements/stepper/step-header.component";
@import "./elements/simple-table/table";
@import "./elements/tabbed-group-picker/TabbedGroupPicker";

.bgc-main,
.novo-background-main {
  background-color: var(--background-main, $color-bright);
}
.bgc-alt,
.bgc-bright,
.novo-background-bright {
  background-color: var(--background-bright, $color-white);
}
.bgc-dark,
.novo-background-dark {
  background-color: var(--background-dark, $color-white);
}
.bgc-muted,
.novo-background-muted {
  background-color: var(--background-muted, $color-white);
}
.bgc-body,
.novo-background-body {
  background-color: var(--background-body, $color-silver);
}
.txc-main {
  color: var(--text-main, $color-dark);
}
.txc-bright {
  color: var(--text-bright, $color-black);
}
.txc-muted {
  color: var(--text-muted, $color-slate);
}

@include theme-colors() using ($name, $color, $contrast, $tint, $shade, $pale) {
  $excluded: (bright, muted);

  @if index($excluded, $name) == null {
    .novo-background-#{$name} {
      background: $color;
      color: $contrast;
    }
    .novo-text-#{$name} {
      color: $color;
    }

    .bgc-#{$name} {
      background: $color;
      color: $contrast;
    }

    .bgc-#{$name}-striped {
      & > *:nth-child(odd) {
        background: $color;
      }
    }
    .txc-#{$name} {
      color: $color;
    }
  }
}

@each $key, $value in $spacing-rules {
  .padding-#{$key} {
    padding: $value;
  }
  .px-#{$key} {
    padding-left: $value;
    padding-right: $value;
  }
  .py-#{$key} {
    padding-top: $value;
    padding-bottom: $value;
  }
  .margin-#{$key} {
    margin: $value;
  }
  .ml-#{$key},
  .mx-#{$key} {
    margin-left: $value;
  }
  .mr-#{$key},
  .mx-#{$key} {
    margin-right: $value;
  }
  .mt-#{$key},
  .my-#{$key} {
    margin-top: $value;
  }
  .mb-#{$key},
  .my-#{$key} {
    margin-bottom: $value;
  }
}

.modal-overlay-backdrop,
.aside-overlay-backdrop {
  background-color: rgba(0, 0, 0, 0.8);
}

.aside-overlay-panel {
  position: relative;
  // z-index: 1001;
}

@keyframes iconEnter {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  90% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

// Animations
// -------------------------
@keyframes rotate {
  0% {
    transform: rotateZ(0deg);
  }

  75% {
    transform: rotateZ(200deg);
  }

  100% {
    transform: rotateZ(180deg);
  }
}

@keyframes half-rotate {
  0% {
    transform: rotateZ(45deg);
  }

  75% {
    transform: rotateZ(100deg);
  }

  100% {
    transform: rotateZ(90deg);
  }
}

@keyframes rotateBack {
  0% {
    transform: rotateZ(90deg);
  }

  100% {
    transform: rotateZ(0deg);
  }
}

@keyframes show {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }

  75% {
    transform: translateX(0px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}