pallote-css 0.4.0 → 0.6.0

package/dist/styles/components/_grid.scss

@@ -1,127 +0,0 @@
-@use "../common/mixins";
-@use "../common/variables";
-
-// —————————————————————————————————————————————————————————————————
-// elements
-// wrap
-// direction
-// justify
-// items
-// self
-// gap and col
-// —————————————————————————————————————————————————————————————————
-
-// —————————————————————————————————————————————————————————————————
-// elements
-// —————————————————————————————————————————————————————————————————
-
-.flex,
-.flex_item {
-  display: flex;
-  box-sizing: border-box;
-  flex-direction: row;
-  flex-wrap: wrap;
-}
-
-// —————————————————————————————————————————————————————————————————
-// wrap
-// —————————————————————————————————————————————————————————————————
-
-// have children wrap automatically
-.flex-wrap {
-  justify-content: center;
-
-  > .flex_item {
-    flex: 1 0 0;
-
-    > * {
-      width: 100%;
-    }
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// direction
-// —————————————————————————————————————————————————————————————————
-
-.flex-column { flex-direction: column; }
-.flex-columnReverse { flex-direction: column-reverse; }
-.flex-row { flex-direction: row; flex-wrap: wrap; }
-.flex-rowReverse { flex-direction: row-reverse; flex-wrap: wrap; }
-
-// —————————————————————————————————————————————————————————————————
-// justify
-// —————————————————————————————————————————————————————————————————
-
-.flex-jc-center { justify-content: center;}
-.flex-jc-end { justify-content: flex-end;}
-.flex-jc-start { justify-content: flex-start;}
-.flex-jc-spaceAround { justify-content: space-around;}
-.flex-jc-spaceBetween { justify-content: space-between;}
-.flex-jc-spaceEvenly { justify-content: space-evenly;}
-
-// —————————————————————————————————————————————————————————————————
-// items
-// —————————————————————————————————————————————————————————————————
-
-.flex-ai-stretch { align-items: stretch; }
-.flex-ai-center { align-items: center; }
-.flex-ai-end { align-items: flex-end; }
-.flex-ai-start { align-items: flex-start; }
-.flex-ai-baseline { align-items: baseline; }
-
-// —————————————————————————————————————————————————————————————————
-// self
-// —————————————————————————————————————————————————————————————————
-
-.flex-as-stretch { align-self: stretch; }
-.flex-as-center { align-self: center; }
-.flex-as-end { align-self: flex-end; }
-.flex-as-start { align-self: flex-start; }
-.flex-as-baseline { align-self: baseline; }
-
-// —————————————————————————————————————————————————————————————————
-// gap and col
-// —————————————————————————————————————————————————————————————————
-
-$columns: 12;
-$breakpoints: (
-  xs: mobile-sm,
-  sm: mobile,
-  md: tablet,
-  lg: laptop,
-  xl: desktop
-);
-
-@for $i from 1 through $columns {
-  .col-#{$i} {
-    width: variables.$col * $i;
-  }
-}
-
-[class*="gap-"],
-[class*="col-"] {
-  width: 100%;
-}
-
-@for $i from 1 through $columns {
-  .gap-#{$i} {
-    gap: #{$i * .25}rem;
-    
-    @for $j from 1 through $columns {
-      > .col-#{$j} {
-        width: calc((variables.$col * $j) - (#{$i * .25}rem * (($columns / $j - 1) / ($columns / $j))));
-      }
-    }
-
-    @each $suffix, $breakpoint in $breakpoints {
-      @include mixins.responsive(up, $breakpoint) {
-        @for $j from 1 through $columns {
-          > .col-#{$suffix}-#{$j} {
-            width: calc((variables.$col * $j) - (#{$i * .25}rem * (($columns / $j - 1) / ($columns / $j))));
-          }
-        }
-      }
-    }
-  }
-}

package/dist/styles/components/_input.scss

@@ -1,328 +0,0 @@
-@use '../common/mixins';
-@use '../common/variables';
-@use '../utilities/text';
-
-// —————————————————————————————————————————————————————————————————
-// elements / default
-// elements / select
-// elements / textarea
-// elements / checkbox & radio
-// error
-// disabled
-// optional
-// dense
-// icon
-// —————————————————————————————————————————————————————————————————
-
-// —————————————————————————————————————————————————————————————————
-// elements / default
-// —————————————————————————————————————————————————————————————————
-
-.input {
-  display: flex;
-  flex-direction: column;
-  text-align: left;
-  position: relative;
-  width: 100%;
-  max-width: variables.$max-width-form;
-
-  & + & {
-    margin-top: 1rem;
-  }
-
-  &_label {
-		@include mixins.transition(variables.$transition-md, color);
-		font-weight: variables.$font-bold;
-		text-overflow: ellipsis;
-		display: block;
-		overflow: hidden;
-		white-space: nowrap;
-		position: relative;
-		margin-bottom: .25rem;
-  }
-
-  &_hint {
-		@extend %caption;
-    margin-top: -.125rem;
-		margin-bottom: .5rem;
-  }
-
-  &_control {
-		@include mixins.transition(variables.$transition-md, border-color);
-    font-size: 1rem;
-		font-family: variables.$font, variables.$font-fallback;
-		width: 100%;
-    border-radius: variables.$border-radius-md !important;
-    padding: .325rem .5rem;
-		background-color: variables.$input-background;
-    border: variables.$border;
-
-		@include mixins.responsive(down, mobile) {
-      background-color: variables.$input-background;
-		}
-    
-    &:focus {
-      outline: 2px solid variables.$primary;
-    }
-    
-    &:not(textarea):not(.checkboxes):not(.radios) {
-      display: inline-block;
-      align-items: center;
-      white-space: nowrap;
-		  text-overflow: ellipsis;
-      line-height: 1.2;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-
-    &:not(textarea) {
-      height: variables.$input-height;
-    }
-  }
-}
-
-@include mixins.placeholder {
-  color: variables.$text-alt;
-  opacity: 1;
-}
-
-// —————————————————————————————————————————————————————————————————
-// elements / select
-// —————————————————————————————————————————————————————————————————
-
-.select {
-
-  &:after {
-    content: '';
-    border: solid variables.$text;
-    border-width: 0 .125rem .125rem 0;
-    padding: .2rem;
-    transform: rotate(45deg);
-    margin-left: variables.$nav-item*0.5;
-    position: absolute;
-    bottom: variables.$input-height*.45;
-    right: 1rem;
-  }
-    
-  .input_control {
-    display: flex;
-    align-items: center;
-    padding-right: 2rem;
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// elements / textarea
-// —————————————————————————————————————————————————————————————————
-
-textarea {
-  resize: vertical;
-}
-
-// —————————————————————————————————————————————————————————————————
-// elements / checkbox & radio
-// —————————————————————————————————————————————————————————————————
-
-.checkboxes,
-.radios {
-  display: flex;
-  background-color: transparent;
-  border: 0;
-  padding-right: 0;
-  padding-left: 0;
-  
-  &:not(&-landscape) {
-    flex-direction: column;
-    align-items: flex-start !important;
-    height: auto !important;
-    
-    .checkbox + .checkbox,
-    .radio + .radio {  
-      margin-top: 0.75rem;
-      margin-left: 0;
-    }  
-  }
-  
-  &-landscape {
-    
-    .checkbox + .checkbox,
-    .radio + .radio {
-      margin-left: 1rem;
-    }
-  }
-}
-
-.checkbox,
-.radio {
-  display: flex;
-  align-items: center;
-}
-
-input[type="checkbox"],
-input[type='radio'] {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: variables.$checkbox-width;
-  width: variables.$checkbox-width;
-  background-color: variables.$input-background;
-  border: variables.$border;
-  margin-right: .5rem;
-  color: variables.$primary;
-}
-
-input[type='checkbox'] { border-radius: variables.$border-radius-sm; }
-input[type='radio'] { border-radius: 50%; }
-
-input[type='checkbox']:checked {
-  background-color: variables.$primary;
-
-  &:after {
-    content: "✔";
-    font-size: 1rem;
-    color: variables.$text-contrast;
-  }
-}
-
-input[type='radio']:checked {
-
-  &:after {
-    content: "";
-    height: variables.$checkbox-width*.5;
-    width: variables.$checkbox-width*.5;
-    background-color: variables.$primary;
-    border-radius: 50%;
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// error
-// —————————————————————————————————————————————————————————————————
-
-.input.js-error {
-  
-  .input {
-    
-    &_label { color: variables.$error; }
-
-    &_control {
-      border: 1px solid variables.$error;
-      
-      &.checkboxes,
-      &.radios {
-        border: 0;
-      }
-    }
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// disabled
-// —————————————————————————————————————————————————————————————————
-
-.input-disabled,
-.input:disabled {
-  opacity: 0.5;
-
-  .input {
-
-    &_label,
-    &_control {
-      cursor: not-allowed;
-    }
-  }
-
-  &.select:after {
-    opacity: 0.5;
-  }
-
-  .checkbox,
-  .radio {
-
-    &_control,
-    &_label {
-      pointer-events: none;
-    }
-  }
-}
-
-.checkbox-disabled,
-.radio-disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-
-  > * {
-    pointer-events: none;
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// optional
-// —————————————————————————————————————————————————————————————————
-
-.input-optional {
-
-  .input_label:after {
-    content: " (optional)";
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// dense
-// —————————————————————————————————————————————————————————————————
-
-.input-dense {
-
-  .input_control:not(textarea) {
-    height: 2rem;
-  }
-
-  &.select {
-
-    &:after {
-      bottom: 0.9rem;
-      right: 0.75rem;
-    }
- 
-    .input_control {
-      padding-right: 1.5rem;
-    }
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// icon
-// —————————————————————————————————————————————————————————————————
-
-.input-withIcon {
-
-  .input_control {
-    padding-right: variables.$input-height*1.25;
-  } 
-}
-
-// remove right padding to allow native input trigger
-input[type="date"],
-input[type="time"],
-input[type="number"] {
-  appearance: initial;
-  padding-right: 0;
-}
-
-.input_icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  width: variables.$input-height;
-  height: variables.$input-height;
-  pointer-events: none;
-  border-left: variables.$border;
-
-  svg {
-    width: 50%;
-    height: 50%;
-  }
-}

package/dist/styles/components/_link.scss

@@ -1,51 +0,0 @@
-@use '../common/mixins';
-@use '../common/variables';
-
-// —————————————————————————————————————————————————————————————————
-// elements
-// color
-// —————————————————————————————————————————————————————————————————
-
-// —————————————————————————————————————————————————————————————————
-// elements
-// —————————————————————————————————————————————————————————————————
-
-.link {
-  display: inline-flex;
-  align-items: center;
-  font-weight: variables.$font-regular;
-  border-radius: variables.$border-radius-sm;
-  text-decoration: underline;
-  text-underline-offset: .15em;
-  white-space: nowrap;
-
-  &_icon {
-    display: flex;
-    margin-top: 0.1em;
-    margin-left: 0.25em;
-    
-    svg {
-      height: 1em;
-      width: 1em;
-    }
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// color
-// —————————————————————————————————————————————————————————————————
-
-// change the link colour using text utililty classes
-
-.link {
-  color: variables.$primary;
-  text-decoration: underline currentColor;
-
-  &:hover {
-    text-decoration: underline 3px;
-  }
-
-  &.text-inherit {
-    color: inherit;
-  }
-}

package/dist/styles/components/_list.scss

@@ -1,59 +0,0 @@
-@use '../utilities/text';
-
-// —————————————————————————————————————————————————————————————————
-// elements
-// dense
-// list item - bold
-// —————————————————————————————————————————————————————————————————
-
-// —————————————————————————————————————————————————————————————————
-// elements
-// —————————————————————————————————————————————————————————————————
-
-.list {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start; // so that children don't take 100% width (for focus style)
-
-  &_item {
-    display: flex;
-    align-items: center;
-
-    & + & {
-      margin-top: .5rem;
-    }
-
-    &Icon {
-      display: flex;
-      height: 1em;
-      width: 1em;
-      margin-right: .5em;
-    }
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// dense
-// —————————————————————————————————————————————————————————————————
-
-.list-dense .list_item,
-.list_item-dense {
-  @extend %caption;
-
-  + .list_item {
-    margin-top: .25rem;
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// list item - bold
-// —————————————————————————————————————————————————————————————————
-
-.list_item-bold {
-  @extend %text-bold;
-
-  .list_itemIcon * {
-    stroke: currentColor;
-    stroke-width: 0.5rem;
-  }
-}