pallote-css 0.3.9 → 0.3.11

package/dist/styles/components/_input.scss

@@ -1,294 +0,0 @@
-// —————————————————————————————————————————————————————————————————
-// 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: $max-width-form;
-
-  &:not(:last-child) {
-    margin-bottom: 1rem;
-  }
-
-  &_label {
-		@include transition($transition-md, color);
-		font-weight: $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 transition($transition-md, border-color);
-    font-size: 1rem;
-		font-family: $font, $font-fallback;
-		width: 100%;
-    border-radius: $border-radius-md !important;
-    padding: .325rem .5rem;
-		background-color: $input-background;
-    border: $border;
-
-		@include responsive(down, mobile) {
-      background-color: $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: $input-height;
-    }
-  }
-}
-
-@include placeholder {
-  color: $text-alt;
-  opacity: 1;
-}
-
-// —————————————————————————————————————————————————————————————————
-// elements / select
-// —————————————————————————————————————————————————————————————————
-
-.select {
-  
-  &:after {
-    content: '';
-    border: solid $text;
-    border-width: 0 .125rem .125rem 0;
-    padding: .2rem;
-    transform: rotate(45deg);
-    margin-left: $nav-item*0.5;
-    position: absolute;
-    bottom: $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: $checkbox-width;
-  width: $checkbox-width;
-  background-color: $input-background;
-  border: $border;
-  margin-right: .5rem;
-}
-
-input[type='checkbox'] { border-radius: $border-radius-sm; }
-input[type='radio'] { border-radius: 50%; }
-
-input[type='checkbox']:checked {
-  background-color: $primary;
-
-  &:after {
-    content: "✔";
-    font-size: 1rem;
-    color: $text-contrast;
-  }
-}
-
-input[type='radio']:checked {
-
-  &:after {
-    content: "";
-    height: $checkbox-width*.5;
-    width: $checkbox-width*.5;
-    background-color: $primary;
-    border-radius: 50%;
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// error
-// —————————————————————————————————————————————————————————————————
-
-.input.js-error {
-  
-  .input {
-    
-    &_label { color: $error; }
-
-    &_control {
-      border: 1px solid $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: $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: $input-height;
-  height: $input-height;
-  pointer-events: none;
-  border-left: $border;
-
-  svg {
-    width: 50%;
-    height: 50%;
-  }
-}

package/dist/styles/components/_link.scss

@@ -1,43 +0,0 @@
-// —————————————————————————————————————————————————————————————————
-// elements
-// color
-// —————————————————————————————————————————————————————————————————
-
-// —————————————————————————————————————————————————————————————————
-// elements
-// —————————————————————————————————————————————————————————————————
-
-.link {
-  display: inline-flex;
-  align-items: center;
-  font-weight: $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: $primary;
-  text-decoration: underline rgba($primary, 0.5);
-  
-  @include hover {
-    text-decoration: underline 0.125em;
-  }
-}

package/dist/styles/components/_list.scss

@@ -1,58 +0,0 @@
-// —————————————————————————————————————————————————————————————————
-// 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;
-  }
-}

package/dist/styles/components/_nav.scss

@@ -1,270 +0,0 @@
-// —————————————————————————————————————————————————————————————————
-// elements
-// active
-// show
-// direction
-// dense
-// navbar
-// —————————————————————————————————————————————————————————————————
-
-// —————————————————————————————————————————————————————————————————
-// elements
-// —————————————————————————————————————————————————————————————————
-
-.nav ul,
-.nav__group,
-.nav__target {
-  list-style: none;
-}
-
-.nav {
-  width: fit-content;
-
-  &__container,
-  &__group {
-    display: flex;
-  }
-
-  &__item,
-  &__trigger {
-    border-radius: $border-radius-md;
-  }
-
-  &__item {
-    margin: 0;
-    position: relative;
-
-    &:not(:first-child) {
-      margin-left: $spacing-xs;
-      padding-top: 0;
-    }
-
-    &--dropdown {
-      display: flex;
-      flex-direction: column;
-    }
-  }
-
-  &__trigger {
-    @extend %caption;
-    font-weight: $font-bold;
-    white-space: nowrap;
-    cursor: pointer;
-    height: $nav-item*2;
-    padding: $nav-item*0.5 $nav-item;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    &:hover {
-      background-color: $hover;
-    }
-
-    .nav__item--dropdown > & {
-      
-      &:after {
-        content: '';
-        border: solid $text;
-        border-width: 0 $spacing-xxs $spacing-xxs 0;
-        padding: $spacing-xxs;
-        transform: rotate(45deg);
-        margin-left: $nav-item*0.5;
-      }
-    }
-  }
-
-  &__icon {
-    display: flex;
-    width: 1rem;
-    height: 1rem;
-    align-items: center;
-    justify-content: center;
-    margin-right: 0.25rem;
-    margin-left: -0.25rem;
-  }
-
-  &__target {
-    display: none;
-    flex-direction: column;
-    padding: $nav-item*0.25 $nav-item*0.5 $nav-item*0.5 $nav-item*0.5;
-
-    .nav {
-
-      &__item {
-
-        &:not(:first-child) {
-          margin-top: $spacing-xs;
-          margin-left: 0;
-        }
-      }
-      
-      &__trigger {
-        padding-right: $nav-item*0.5;
-        padding-left: $nav-item*0.5;        
-        border-radius: $border-radius-sm;
-      }
-    }
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// active
-// —————————————————————————————————————————————————————————————————
-
-.nav__trigger--active {
-  color: $primary;
-  background-color: $hover;
-
-  .nav__item--dropdown &:after {
-    border-color: $primary;
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// show
-// —————————————————————————————————————————————————————————————————
-
-.nav__item--dropdown.js-show {
-  height: auto;
-  background-color: $hover;
-
-  > .nav {
-
-    &__trigger--active,
-    &__trigger:hover {
-      background-color: transparent;
-    }
-
-    &__target {
-      display: flex;
-    }
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// direction
-// —————————————————————————————————————————————————————————————————
-
-.nav--portrait {
-  width: 100%;
-  flex-direction: column;
-
-  .nav {
-    
-    &__item:not(:first-child) {
-      margin-left: 0;
-      margin-top: $spacing-xs;
-    }
-
-    &__group {
-      display: flex;
-      flex-direction: column;
-      align-items: stretch;
-
-      &:not(:first-child) {
-        margin-top: $nav-item;
-      }  
-    }
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// dense
-// —————————————————————————————————————————————————————————————————
-
-.nav--dense {
-
-  &.nav--portrait .nav__item:not(:first-child) {
-    margin-top: $spacing-xxs;
-  }
-
-  .nav {
-
-    &__item,
-    &__trigger {
-      border-radius: $border-radius-sm;
-    }
-  
-    &__trigger {
-      padding: $nav-item*0.25 $nav-item*0.5;
-      height: $nav-item*1.5;
-    }
-
-    &__item--dropdown {
-    
-      .nav__target {
-        padding: 0 $nav-item*0.25 $nav-item*0.25 $nav-item*0.25;
-
-        .nav__trigger {
-          padding-right: $nav-item*0.25;
-          padding-left: $nav-item*0.25;
-        }
-      }
-    }
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// navbar
-// —————————————————————————————————————————————————————————————————
-
-.navbar {
-
-  .nav {
-
-    @include responsive(up, tablet) { height: 100%; }
-    @include responsive(down, tablet) { width: 100%; }
-
-    &__container {
-
-      @include responsive(up, tablet) {
-        height: 100%;
-        align-items: center;
-      }
-
-      @include responsive(down, tablet) {
-        @include calc(max-height, '100vh - '$spacing-xl*3);
-        align-items: stretch;
-        overflow: scroll;
-        width: 100%;
-        margin-top: $nav-item;
-        margin-bottom: $nav-item;
-        flex-direction: column;
-        width: 100%;
-      }
-    }
-
-    &__item:not(:first-child) {
-
-      @include responsive(down, tablet) {
-        margin-top: $spacing-xs;
-        margin-left: 0;
-      }
-    }
-
-    &__item--dropdown {
-
-      @include responsive(up, tablet) {
-        
-        .nav__target {
-          @include calc(top, '100% +' $nav-item*0.5);
-          position: absolute;
-          left: 0;
-          width: $spacing-xl*2.5;
-          padding: $nav-item*0.5;
-          border-radius: $border-radius-md;
-          border: $border;
-          z-index: 1;              
-          background-color: $background-paper;
-        }
-      }
-    }
-
-    &__trigger {
-
-      @include responsive(down, tablet) {
-        height: auto;
-      }
-    }
-  }
-}