pallote-css 0.3.11 → 0.4.0

package/dist/styles/components/_input.scss

@@ -0,0 +1,328 @@
+@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

@@ -0,0 +1,51 @@
+@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

@@ -0,0 +1,59 @@
+@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;
+  }
+}

package/dist/styles/components/_nav.scss

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