pallote-css 0.4.0 → 0.6.0

package/dist/styles/components/_sidebar.scss

@@ -1,61 +0,0 @@
-@use '../common/mixins';
-@use '../common/variables';
-@use '../utilities/text';
-
-$sidebar-width: 200px;
-
-.sidebar {
-  transition: left variables.$transition-md;
-  @include mixins.calc(height, '100vh - 'variables.$navbar-height);
-  position: sticky;
-  flex-shrink: 0;
-  border-right: variables.$border;
-  width: $sidebar-width;
-  top: variables.$navbar-height;
-  padding: variables.$spacing-md;
-  overflow-y: scroll;
-  scrollbar-color: light;  
-  z-index: 11;
-  background-color: variables.$background-default;
-  
-  &.js-opened {
-    left: 0;
-  }
-  
-  @include mixins.responsive(down, tablet) {
-    position: fixed;
-    height: 100vh;
-    top: 0;
-    left: -$sidebar-width;
-    padding-top: variables.$navbar-height-sm;
-    z-index: 13;
-  }
-
-  &__button {
-    content: '';
-    border: solid variables.$text;
-    border-width: 0 2px 2px 0;
-    padding: 4px;
-    transform: rotate(-45deg);
-    margin-right: variables.$spacing-md;
-    display: none;
-
-    .page--withSidebar & { display: initial; }
-    @include mixins.responsive(up, tablet) { display: none !important; }
-
-    &--close {
-      position: absolute;
-      top: variables.$navbar-height-sm*0.5;
-      left: variables.$navbar-height-sm*0.5;
-      transform: translateY(-50%) rotate(135deg);
-    }
-  }
-
-  &__title {
-    @extend %overline;
-    color: variables.$text-alt;
-    font-weight: variables.$font-bold;
-    margin-bottom: variables.$spacing-xs;
-    margin-left: 0;
-  }
-}

package/dist/styles/components/_snippet.scss

@@ -1,85 +0,0 @@
-@use '../common/variables';
-@use '../utilities/text';
-
-// —————————————————————————————————————————————————————————————————
-// elements
-// default
-// dense
-// —————————————————————————————————————————————————————————————————
-
-// —————————————————————————————————————————————————————————————————
-// elements
-// —————————————————————————————————————————————————————————————————
-
-.snippet {
-  @extend %caption;
-  font-family: "Roboto Mono", Courier, monospace;
-  word-wrap: break-word;
-  width: 100%;
-  position: relative;
-  border-radius: variables.$border-radius-sm;
-  margin: 0;
-  padding: variables.$spacing-sm variables.$spacing-sm*1.5;
-  background-color: variables.$hover;
-  border: variables.$border;
-  
-  & + & {
-    margin-top: variables.$spacing-sm;
-  }
-
-  p > & {
-    margin-right: variables.$spacing-xs;
-    margin-left: variables.$spacing-xs;
-  }
-
-  .tag {
-    font-family: variables.$font, variables.$font-fallback;
-    float: right;
-    margin-top: 1px;
-    margin-right: -(variables.$spacing-xs);
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// default
-// —————————————————————————————————————————————————————————————————
-
-.snippet--default {
-
-  &:after {
-    @extend %overline;
-    content: "Default";
-    font-family: variables.$font, variables.$font-fallback;
-    float: right;
-    margin-top: 1px;
-    margin-right: -(variables.$spacing-xs);
-    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
-    position: absolute;
-    top: variables.$spacing-sm;
-    right: variables.$spacing-md*0.75;
-    height: variables.$spacing-md;
-    padding-right: variables.$spacing-xs;
-    padding-left: variables.$spacing-xs;
-    padding-bottom: 0.1em;
-    background-color: variables.$text-disabled;
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// dense
-// —————————————————————————————————————————————————————————————————
-
-.snippet--dense {
-  @extend %overline;
-  padding: variables.$spacing-xs variables.$spacing-sm !important;
-
-  &.snippet--default:after {
-    top: variables.$spacing-xs;
-    right: variables.$spacing-sm;
-  }
-}

package/dist/styles/components/_status.scss

@@ -1,60 +0,0 @@
-@use '../common/variables';
-@use '../utilities/text';
-
-// —————————————————————————————————————————————————————————————————
-// elements
-// color
-// dense
-// —————————————————————————————————————————————————————————————————
-
-$spacing-status: .5rem;
-
-// —————————————————————————————————————————————————————————————————
-// elements
-// —————————————————————————————————————————————————————————————————
-
-.status {
-
-  &:before {
-    content: "";
-    display: inline-block;
-    height: $spacing-status;
-    width: $spacing-status;
-    background-color: variables.$text-alt;
-    border-radius: 50%;
-    margin-right: 0.35em;
-    transform: translateY(-0.05em);
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// color
-// —————————————————————————————————————————————————————————————————
-
-@mixin status-color($color) {
-
-  &:before {
-    background-color: $color;
-  }
-}
-
-.status {
-
-  &-success { @include status-color(variables.$success); }
-  &-info { @include status-color(variables.$info); }
-  &-warning { @include status-color(variables.$warning); }
-  &-error { @include status-color(variables.$error); }
-}
-
-// —————————————————————————————————————————————————————————————————
-// dense
-// —————————————————————————————————————————————————————————————————
-
-.status-dense {
-  @extend %caption;
-
-  &:before {
-    height: $spacing-status*0.75;
-    width: $spacing-status*0.75;
-  }
-}

package/dist/styles/components/_switch.scss

@@ -1,84 +0,0 @@
-@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: -(variables.$spacing-xs);
-    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/dist/styles/components/_table.scss

@@ -1,153 +0,0 @@
-@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;
-  }
-}
-
-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/dist/styles/components/_tabs.scss

@@ -1,118 +0,0 @@
-@use '../common/variables';
-@use '../utilities/text';
-
-// —————————————————————————————————————————————————————————————————
-// elements
-// active
-// direction
-// dense
-// —————————————————————————————————————————————————————————————————
-
-// —————————————————————————————————————————————————————————————————
-// elements
-// —————————————————————————————————————————————————————————————————
-
-.tabs {
-  width: 100%;
-
-  &__controls {
-    display: flex;
-    width: 100%;
-    border-bottom: variables.$border;
-  }
-  
-  &__item {
-    position: relative;
-    cursor: pointer;
-    padding: variables.$spacing-sm variables.$spacing-md;
-    border-top-left-radius: variables.$border-radius-sm;
-    border-top-right-radius: variables.$border-radius-sm;
-    
-    &:after {
-      content: '';
-      position: absolute;
-      bottom: -1px;
-      left: 0;
-      height: 1px;
-      width: 100%;
-    }
-  }
-
-  &__panel {
-    padding: variables.$spacing-md;
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// active
-// —————————————————————————————————————————————————————————————————
-
-.tabs__item:hover,
-.tabs__item--active {
-  background-color: variables.$hover;
-}
-
-.tabs__item--active {
-  color: variables.$primary;
-
-  &:after {
-    background-color: variables.$primary;
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// direction
-// —————————————————————————————————————————————————————————————————
-
-.tabs--portrait {
-  display: flex;
-
-  .tabs {
-
-    &__controls {
-      flex-direction: column;
-      width: 160px;
-      border-bottom: 0;
-      border-right: variables.$border;
-    }
-    
-    &__item {
-      text-align: left;
-      border-top-left-radius: variables.$border-radius-sm;
-      border-top-right-radius: 0;
-      border-bottom-left-radius: variables.$border-radius-sm;
-        
-      &:after {
-        top: 0;
-        right: -1px;
-        left: auto;
-        height: 100%;
-        width: 1px;
-      }
-    }
-
-    &__panel {
-      padding-top: variables.$spacing-sm;
-      padding-bottom: variables.$spacing-sm;
-    }
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// dense
-// —————————————————————————————————————————————————————————————————
-
-.tabs--dense {
-
-  .tabs {
-
-    &__item {
-      @extend %caption;
-      padding: variables.$spacing-xs variables.$spacing-sm;
-    }
-
-    &__panel {
-      padding: variables.$spacing-sm;
-    }  
-  }
-}

package/dist/styles/components/_tag.scss

@@ -1,79 +0,0 @@
-@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/dist/styles/modules/_cookie.scss

@@ -1,38 +0,0 @@
-.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: $spacing-xs;
-  }
-
-  .link {
-    flex-basis: 0;
-  }
-}