pallote-css 0.6.0 → 0.7.0

package/styles/components/_switch.scss

@@ -0,0 +1,84 @@
+@use '../common/mixins';
+@use '../common/variables';
+
+// —————————————————————————————————————————————————————————————————
+// elements
+// disabled
+// —————————————————————————————————————————————————————————————————
+
+$spacing-switch: 1rem;
+
+// —————————————————————————————————————————————————————————————————
+// elements
+// —————————————————————————————————————————————————————————————————
+
+.switch {
+  display: flex;
+  align-items: center;
+  
+  &_input {
+    position: absolute;
+    height: 0;
+    width: 0;
+    opacity: 0;
+
+    &:focus + .switch_switch {
+      outline: 2px solid variables.$primary;
+    }
+
+    &:checked + .switch_switch {
+      background-color: variables.$primary-light;
+      
+      .switch_toggle {
+        @include mixins.calc(left, '100% -'($spacing-switch));
+        background-color: variables.$primary;
+      }
+    }
+  }
+
+  &_label {
+    
+    &:first-child { margin-right: .75em; }
+    &:last-child { margin-left: .75em; }
+  }
+
+  &_switch {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+    width: $spacing-switch*2;
+    height: $spacing-switch;
+    background: variables.$input-background;
+    border: variables.$border;
+    border-radius: $spacing-switch;
+    position: relative;
+
+    &:nth-child(2) { margin-left: .25rem; }
+  }
+
+  &_toggle {
+    position: absolute;
+    left: -.25rem;
+    width: $spacing-switch*1.25;
+    height: $spacing-switch*1.25;
+    border-radius: $spacing-switch*1.25;
+    background: variables.$grey-50;
+  }
+}
+  
+// —————————————————————————————————————————————————————————————————
+// disabled
+// —————————————————————————————————————————————————————————————————
+
+.switch-disabled {
+  opacity: 0.4;
+
+  * { 
+    cursor: not-allowed;
+  }
+
+  .switch_switch {
+    outline: none !important;
+  }
+}

package/styles/components/_table.scss

@@ -0,0 +1,157 @@
+@use '../common/variables';
+@use '../common/mixins';
+@use '../utilities/text';
+
+// —————————————————————————————————————————————————————————————————
+// variables
+// elements
+// striped
+// hasHover
+// dense
+// border
+// kind (for table cell component)
+// —————————————————————————————————————————————————————————————————
+
+// —————————————————————————————————————————————————————————————————
+// variables
+// —————————————————————————————————————————————————————————————————
+
+$padding-vertical: .5rem;
+$padding-horizontal: .75rem;
+$padding-dense-vertical: .25rem;
+$padding-dense-horizontal: .5rem;
+
+// —————————————————————————————————————————————————————————————————
+// elements
+// —————————————————————————————————————————————————————————————————
+
+.table {
+  width: 100%;
+  border-spacing: 0;
+  border-collapse: separate;
+  overflow: hidden;
+  background-color: variables.$background-paper;
+
+  &_content {
+    width: 100%;
+  }
+
+  &_head {
+    @extend %caption;
+    font-weight: bold;
+    color: variables.$text-alt;
+  }
+  
+  &_cell {
+    padding: $padding-vertical $padding-horizontal;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    .buttons {
+      justify-content: flex-end;
+      flex-wrap: nowrap;
+    }
+  }
+ 
+  &_footer {
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    background-color: variables.$overlay;
+    padding: $padding-vertical;
+    border-top: variables.$border;
+  }
+
+  &_pagination {
+    width: fit-content;
+  }
+
+  &_rowSelect {
+    width: 5rem;
+    margin-bottom: 0;
+
+    .input_label {
+      display: none;
+    }
+  }
+}
+
+td.table_cell { border-top: variables.$border; }
+th.table_cell { background-color: rgba(variables.$contrast, 0.05); }
+
+// —————————————————————————————————————————————————————————————————
+// striped
+// —————————————————————————————————————————————————————————————————
+
+.table-striped {
+
+  .table_row:nth-child(even) {
+    background-color: rgba(variables.$contrast, 0.03);
+  }
+}
+// —————————————————————————————————————————————————————————————————
+// hasHover
+// —————————————————————————————————————————————————————————————————
+
+.table-hasHover {
+
+  .table {
+    
+    &_head .table_row:hover { background-color: transparent; }
+    &_row:hover { background-color: variables.$hover; }
+  }
+}
+// —————————————————————————————————————————————————————————————————
+// dense
+// —————————————————————————————————————————————————————————————————
+
+.table-dense {
+
+  .table {
+
+    &_cell {
+      @extend %caption;
+      padding: $padding-dense-vertical $padding-dense-horizontal;
+    }
+
+    &_footer {
+      padding: $padding-dense-vertical;
+    }
+  }
+
+  th.table_cell {
+    @extend %overline;
+    font-weight: variables.$font-bold;
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// border
+// —————————————————————————————————————————————————————————————————
+
+.table-border {
+  border: variables.$border;
+  border-radius: variables.$border-radius-md;
+}
+
+// —————————————————————————————————————————————————————————————————
+// kind (for table cell component)
+// —————————————————————————————————————————————————————————————————
+
+.table_cell {
+
+  &-number {
+    text-align: right;
+  }
+  
+  &-action {
+    text-align: right;
+    width: 1%;
+    white-space: nowrap;
+
+    .buttons {
+      justify-content: flex-end;
+    }
+  }
+}

package/styles/components/_tabs.scss

@@ -0,0 +1,147 @@
+@use '../common/variables';
+@use '../utilities/text';
+
+// —————————————————————————————————————————————————————————————————
+// elements
+// active
+// direction
+// dense
+// hasBorder
+// —————————————————————————————————————————————————————————————————
+
+$spacing: 1rem;
+$spacing-dense: .5rem;
+
+// —————————————————————————————————————————————————————————————————
+// elements
+// —————————————————————————————————————————————————————————————————
+
+.tabs {
+  width: 100%;
+
+  &_controls {
+    display: flex;
+    width: 100%;
+    border-bottom: variables.$border;
+  }
+
+  &_panel {
+    margin-top: $spacing;
+  }
+}
+
+.tab {
+  position: relative;
+  cursor: pointer;
+  padding: $spacing*.5 $spacing;
+  border-top-left-radius: variables.$border-radius-md;
+  border-top-right-radius: variables.$border-radius-md;
+  text-transform: variables.$button-transform;
+  font-weight: variables.$button-weight;
+  font-size: variables.$button-sm-size;
+
+  &:not(.tab-active):hover {
+    text-decoration: underline;
+    text-underline-offset: .15em;
+  }
+  
+  &:after {
+    content: '';
+    position: absolute;
+    right: 0;
+    bottom: -1px;
+    left: 0;
+    height: 3px;
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// active
+// —————————————————————————————————————————————————————————————————
+
+.tab-active {
+  color: variables.$primary;
+
+  &:after {
+    background-color: variables.$primary;
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// direction
+// —————————————————————————————————————————————————————————————————
+
+.tabs-landscape {
+  display: flex;
+
+  .tabs {
+
+    &_controls {
+      flex-direction: column;
+      width: 10rem;
+      border-bottom: 0;
+      border-right: variables.$border;
+    }
+
+    &_panel {
+      margin-top: 0;
+      margin-left: $spacing;
+    }
+  }
+
+  .tab {
+    text-align: left;
+    border-top-left-radius: variables.$border-radius-sm;
+    border-top-right-radius: 0 !important;
+    border-bottom-left-radius: variables.$border-radius-sm;
+      
+    &:after {
+      top: 0;
+      right: -1px;
+      left: auto;
+      height: 100%;
+      width: 3px;
+    }
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// dense
+// —————————————————————————————————————————————————————————————————
+
+.tabs-dense {
+  
+  .tabs_panel {
+    margin-top: $spacing-dense;
+  }  
+
+  .tab {
+    padding: $spacing-dense*.5 $spacing-dense;
+    border-top-left-radius: variables.$border-radius-sm;
+    border-top-right-radius: variables.$border-radius-sm;
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// hasBorder
+// —————————————————————————————————————————————————————————————————
+
+.tabs-hasBorder {
+  border: variables.$border;
+  background: variables.$background-paper;
+  border-radius: variables.$border-radius-md;
+  
+  .tabs_panel {
+    margin-top: 0;
+    margin-left: 0;
+    padding: $spacing;
+  }
+  
+  &.tabs-dense {
+    border-radius: variables.$border-radius-sm;
+    
+    .tabs_panel {
+      padding: $spacing-dense;
+    }
+  }
+}

package/styles/components/_tag.scss

@@ -0,0 +1,79 @@
+@use 'sass:list';
+@use '../common/variables';
+@use '../utilities/text';
+
+// —————————————————————————————————————————————————————————————————
+// elements
+// color
+// dense
+// —————————————————————————————————————————————————————————————————
+
+// —————————————————————————————————————————————————————————————————
+// elements
+// —————————————————————————————————————————————————————————————————
+
+.tags {
+  display: flex;
+  
+  .tag:not(:last-child) {
+    margin-right: .25rem;
+  }
+
+  &-portrait {
+    flex-direction: column;
+    align-items: flex-start;
+  
+    .tag:not(:last-child) {
+      margin-bottom: .25rem;
+      margin-right: 0;
+    }
+  }
+}
+
+.tag {
+  @extend %caption;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: variables.$font-bold;
+  border-radius: variables.$border-radius-sm;
+  white-space: nowrap; // prevent text to go on multiple lines
+  height: 1.5rem;
+  width: fit-content;
+  min-width: fit-content;
+  padding-right: 0.4em;
+  padding-left: 0.4em;
+}
+
+// —————————————————————————————————————————————————————————————————
+// color
+// —————————————————————————————————————————————————————————————————
+
+@mixin tag-color($prefix, $colors...) {
+
+  @each $i in $colors {
+    .#{$prefix}#{list.nth($i, 1)} {
+      background-color: list.nth($i, 2);
+      color: list.nth($i, 3);
+    }
+  }
+}
+
+@include tag-color('tag',
+  '' variables.$primary variables.$primary-contrast,
+  '-secondary' variables.$secondary variables.$secondary-contrast,
+  '-grey' variables.$text-disabled variables.$text,
+  '-success' variables.$success variables.$success-contrast,
+  '-info' variables.$info variables.$info-contrast,
+  '-warning' variables.$warning variables.$warning-contrast,
+  '-error' variables.$error variables.$error-contrast
+);
+
+// —————————————————————————————————————————————————————————————————
+// dense
+// —————————————————————————————————————————————————————————————————
+
+.tag-dense {
+  @extend %overline;
+  height: 1rem;
+}

package/styles/modules/_cookie.scss

@@ -0,0 +1,38 @@
+.cookie {
+  z-index: 10;
+
+  &.section {
+    @include transition($transition-md, transform);
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: none;
+    background-color: $background-default;
+    text-align: left;
+    
+    .section_container {
+      padding-top: 10px;
+      padding-bottom: 9px;
+      display: flex;
+      flex-direction: row;
+      align-items: baseline;
+      justify-content: flex-start;
+    }
+  }
+
+  &.js-cookie-accepted {
+    @include transition($transition-md, transform);
+    transform: translateY(100%);
+  }
+
+  &_text {
+    width: 100%;
+    display: inline;
+    margin-right: .25rem;
+  }
+
+  .link {
+    flex-basis: 0;
+  }
+}

package/styles/utilities/_color.scss

@@ -0,0 +1,119 @@
+@use 'sass:list';
+@use '../common/variables';
+
+// —————————————————————————————————————————————————————————————————
+// fill
+// stroke
+// —————————————————————————————————————————————————————————————————
+
+// —————————————————————————————————————————————————————————————————
+// fill
+// —————————————————————————————————————————————————————————————————
+
+@mixin fill($colors...) {
+
+  @each $i in $colors {
+    .fill-#{list.nth($i, 1)} {
+      color: list.nth($i, 3) !important;
+      background-color: list.nth($i, 2) !important;
+
+      .card_title {
+        color: list.nth($i, 3) !important;
+      }
+    }
+  }
+}
+
+@include fill (
+  "main" variables.$main variables.$text,
+  "contrast" variables.$contrast variables.$text-contrast,
+
+  "grey90" variables.$grey-90 variables.$text-contrast,
+  "grey80" variables.$grey-80 variables.$text-contrast,
+  "grey70" variables.$grey-70 variables.$text-contrast,
+  "grey60" variables.$grey-60 variables.$text-contrast,
+  "grey50" variables.$grey-50 variables.$text-contrast,
+  "grey40" variables.$grey-40 variables.$text,
+  "grey30" variables.$grey-30 variables.$text,
+  "grey20" variables.$grey-20 variables.$text,
+  "grey10" variables.$grey-10 variables.$text,
+  "grey5" variables.$grey-5 variables.$text,
+
+  "default" variables.$background-default variables.$text,
+  "paper" variables.$background-paper variables.$text,
+
+  "primaryLight" variables.$primary-light variables.$text,
+  "primary" variables.$primary variables.$text-contrast,
+  "primaryDark" variables.$primary-dark variables.$text-contrast,
+  "secondaryLight" variables.$secondary-light variables.$text,
+  "secondary" variables.$secondary variables.$text-contrast,
+  "secondaryDark" variables.$secondary-dark variables.$text-contrast,
+
+  "successLight" variables.$success-light variables.$text,
+  "success" variables.$success variables.$text-contrast,
+  "successDark" variables.$success-dark variables.$text-contrast,
+  "infoLight" variables.$info-light variables.$text,
+  "info" variables.$info variables.$text-contrast,
+  "infoDark" variables.$info-dark variables.$text-contrast,
+  "warningLight" variables.$warning-light variables.$text,
+  "warning" variables.$warning variables.$text,
+  "warningDark" variables.$warning-dark variables.$text-contrast,
+  "errorLight" variables.$error-light variables.$text,
+  "error" variables.$error variables.$text-contrast,
+  "errorDark" variables.$error-dark variables.$text-contrast,
+
+  "border" variables.$border-color variables.$text
+);
+
+// —————————————————————————————————————————————————————————————————
+// stroke
+// —————————————————————————————————————————————————————————————————
+
+@mixin stroke($colors...) {
+  @each $i in $colors {
+    .stroke-#{list.nth($i, 1)} {
+      border: 1px solid list.nth($i, 2) !important;
+    }
+  }
+}
+
+@include stroke (
+  "main" variables.$main,
+  "contrast" variables.$contrast,
+
+  "grey90" variables.$grey-90,
+  "grey80" variables.$grey-80,
+  "grey70" variables.$grey-70,
+  "grey60" variables.$grey-60,
+  "grey50" variables.$grey-50,
+  "grey40" variables.$grey-40,
+  "grey30" variables.$grey-30,
+  "grey20" variables.$grey-20,
+  "grey10" variables.$grey-10,
+  "grey5" variables.$grey-5 ,
+
+  "default" variables.$background-default,
+  "paper" variables.$background-paper,
+
+  "primaryLight" variables.$primary-light,
+  "primary" variables.$primary,
+  "primaryDark" variables.$primary-dark,
+  "secondaryLight" variables.$secondary-light,
+  "secondary" variables.$secondary,
+  "secondaryDark" variables.$secondary-dark,
+
+  "successLight" variables.$success-light,
+  "success" variables.$success,
+  "successDark" variables.$success-dark,
+  "infoLight" variables.$info-light,
+  "info" variables.$info,
+  "infoDark" variables.$info-dark,
+  "warningLight" variables.$warning-light,
+  "warning" variables.$warning,
+  "warningDark" variables.$warning-dark,
+  "errorLight" variables.$error-light,
+  "error" variables.$error,
+  "errorDark" variables.$error-dark,
+  
+  "border" variables.$border-color
+);