pallote-css 0.3.12 → 0.6.0

package/dist/styles/components/_grid.scss

@@ -1,190 +0,0 @@
-@use "../common/mixins";
-@use "../common/variables";
-
-// —————————————————————————————————————————————————————————————————
-// variables
-// elements
-// wrap
-// direction
-// justifyContent
-// alignItems
-// alignSelf
-// flexGrow
-// spacing
-// width
-// —————————————————————————————————————————————————————————————————
-
-// —————————————————————————————————————————————————————————————————
-// variables
-// —————————————————————————————————————————————————————————————————
-
-variables.$col:	calc(100% / 12);
-
-// —————————————————————————————————————————————————————————————————
-// elements
-// —————————————————————————————————————————————————————————————————
-
-.grid {
-  display: flex;
-  box-sizing: border-box;
-  flex-direction: row;
-  flex-wrap: wrap;
-  
-  &__item:not(.grid) {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    float: left;
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// wrap
-// —————————————————————————————————————————————————————————————————
-
-.grid {
-
-  // have children wrap automatically
-  &--wrap {
-    justify-content: center;
-
-    > .grid__item {
-      flex: 1 0 0;
-    }
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// direction
-// —————————————————————————————————————————————————————————————————
-
-.grid--column { flex-direction: column; }
-.grid--columnReverse { flex-direction: column-reverse; }
-.grid--row { flex-direction: row; flex-wrap: wrap; }
-.grid--rowReverse { flex-direction: row-reverse; flex-wrap: wrap; }
-
-// —————————————————————————————————————————————————————————————————
-// justifyContent
-// —————————————————————————————————————————————————————————————————
-
-.grid--jc-center { justify-content: center;}
-.grid--jc-end { justify-content: flex-end;}
-.grid--jc-start { justify-content: flex-start;}
-.grid--jc-spaceAround { justify-content: space-around;}
-.grid--jc-spaceBetween { justify-content: space-between;}
-.grid--jc-spaceEvenly { justify-content: space-evenly;}
-
-// —————————————————————————————————————————————————————————————————
-// alignItems
-// —————————————————————————————————————————————————————————————————
-
-.grid--ai-stretch { align-items: stretch; }
-.grid--ai-center { align-items: center; }
-.grid--ai-end { align-items: flex-end; }
-.grid--ai-start { align-items: flex-start; }
-.grid--ai-baseline { align-items: baseline; }
-
-// —————————————————————————————————————————————————————————————————
-// alignSelf
-// —————————————————————————————————————————————————————————————————
-
-.grid--as-stretch { align-self: stretch; }
-.grid--as-center { align-self: center; }
-.grid--as-end { align-self: flex-end; }
-.grid--as-start { align-self: flex-start; }
-.grid--as-baseline { align-self: baseline; }
-
-
-// —————————————————————————————————————————————————————————————————
-// flexGrow
-// —————————————————————————————————————————————————————————————————
-
-.grid--fg {
-
-  &-0 { flex-grow: 0; }
-  &-1 { flex-grow: 1; }
-  &-auto { flex-grow: auto; }
-}
-
-// —————————————————————————————————————————————————————————————————
-// spacing
-// —————————————————————————————————————————————————————————————————
-
-@for $spacingWidth from 1 through 12 {
-
-  .grid--spacing#{$spacingWidth} {
-    margin: -($spacingWidth * 0.5rem)*0.5;
-    width: calc(100% + #{$spacingWidth * 0.5rem});
-
-    > .grid__item {
-      padding: ($spacingWidth * 0.5rem)*0.5;
-    }
-
-    &.grid__item {
-      width: calc(100% + #{$spacingWidth * 0.5rem});
-    }
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// width
-// —————————————————————————————————————————————————————————————————
-
-@for $colWidth from 1 through 12 {
-
-  .grid--#{$colWidth} {
-    width: $colWidth*variables.$col;
-
-    &.grid {
-      width: $colWidth*variables.$col;
-    }
-
-    @for $spacingWidth from 1 through 12 {
-
-      &.grid--spacing#{$spacingWidth} {
-        width: calc(#{$colWidth*variables.$col} + #{$spacingWidth * 0.5rem});
-      }
-    }
-  }
-}
-
-@mixin break-width($breakpoint) {
-
-  @include mixins.responsive(up, $breakpoint) {
-
-    @for $colWidth from 1 through 12 {
-
-      &#{$colWidth} {
-        width: $colWidth*variables.$col;
-
-        &.grid {
-          width: $colWidth*variables.$col;
-        }
-
-        @for $spacingWidth from 1 through 12 {
-
-          &.grid--spacing#{$spacingWidth} {
-            width: calc(#{$colWidth*variables.$col} + #{$spacingWidth * 0.5rem});
-          }
-        }
-      }
-    }
-  }
-}
-
-[class*="grid--xs"],
-[class*="grid--sm"],
-[class*="grid--md"],
-[class*="grid--lg"],
-[class*="grid--xl"] {
-  width: 100%;
-}
-
-.grid {
-
-  &--xs { @include break-width(mobile-sm); }
-  &--sm { @include break-width(mobile); }
-  &--md { @include break-width(tablet); }
-  &--lg { @include break-width(laptop); }
-  &--xl { @include break-width(desktop); }
-}

package/dist/styles/components/_input.scss

@@ -1,298 +0,0 @@
-@use "../common/mixins";
-@use "../common/variables";
-@use "../utilities/text";
-
-// —————————————————————————————————————————————————————————————————
-// elements / default
-// elements / select
-// elements / textarea
-// elements / checkbox & radio
-// error
-// disabled
-// optional
-// icon
-// —————————————————————————————————————————————————————————————————
-
-// —————————————————————————————————————————————————————————————————
-// elements / default
-// —————————————————————————————————————————————————————————————————
-
-.input {
-  display: flex;
-  flex-direction: column;
-  text-align: left;
-  position: relative;
-  width: 100%;
-  max-width: variables.$max-width-form;
-
-  &:not(:last-child) {
-    margin-bottom: 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-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;
-		}
-    
-    &: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;
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// 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;
-}
-
-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)";
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// 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,46 +0,0 @@
-@use "../common/mixins";
-@use "../common/variables";
-
-// —————————————————————————————————————————————————————————————————
-// elements
-// color
-// —————————————————————————————————————————————————————————————————
-
-// —————————————————————————————————————————————————————————————————
-// elements
-// —————————————————————————————————————————————————————————————————
-
-.link {
-  display: inline-flex;
-  align-items: center;
-  font-weight: variables.$font-regular;
-  text-decoration: underline;
-  text-underline-offset: 0.1em;
-  white-space: nowrap;
-
-  &__icon {
-    display: flex;
-    margin-top: 0.1em;
-    margin-left: 0.25em;
-    
-    svg {
-      height: 1em;
-      width: 1em;
-    }
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// color
-// —————————————————————————————————————————————————————————————————
-
-// links color is handled by the color mixins in utilities/_text.scss
-
-.link {
-  color: variables.$primary;
-  text-decoration: underline rgba(variables.$primary, 0.5);
-  
-  @include mixins.hover {
-    text-decoration: underline 0.125em;
-  }
-}

package/dist/styles/components/_list.scss

@@ -1,60 +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;
-    
-    &:not(:last-child) {
-      margin-bottom: .5rem;
-    }
-    
-    &Icon {
-      display: flex;
-      height: 1em;
-      width: 1em;
-      margin-right: .5em;
-    }
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// dense
-// —————————————————————————————————————————————————————————————————
-
-.list-dense .list_item,
-.list_item-dense {
-  @extend %caption;
-  margin-top: 0 !important;
-
-  &:not(:last-child) {
-    margin-bottom: .25rem;
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// list item - bold
-// —————————————————————————————————————————————————————————————————
-
-.list_item-bold {
-  @extend %text-bold;
-
-  .list_itemIcon * {
-    stroke: currentColor;
-    stroke-width: 0.5rem;
-  }
-}