pallote-css 0.6.0 → 0.7.0

package/styles/components/_input.scss

@@ -0,0 +1,340 @@
+@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,
+  &_hint,
+  &_error {
+    display: block;
+  }
+
+  &_hint,
+  &_error {
+    font-size: variables.$caption-size;
+    margin-top: -.125rem;
+    margin-bottom: .5rem;
+  }
+
+  &_label {
+		@include mixins.transition(variables.$transition-md, color);
+		font-weight: variables.$font-bold;
+		text-overflow: ellipsis;
+		overflow: hidden;
+		white-space: nowrap;
+		position: relative;
+		margin-bottom: .25rem;
+  }
+
+  &_error {
+    font-weight: variables.$font-bold;
+    color: variables.$error;
+    border-left: .25rem solid variables.$error;
+    padding-left: .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);
+    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/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/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/styles/components/_nav.scss

@@ -0,0 +1,185 @@
+@use '../common/mixins';
+@use '../common/variables';
+@use '../utilities/text';
+
+// —————————————————————————————————————————————————————————————————
+// elements
+// active
+// show
+// direction
+// dense
+// —————————————————————————————————————————————————————————————————
+
+// —————————————————————————————————————————————————————————————————
+// elements
+// —————————————————————————————————————————————————————————————————
+
+.nav_trigger,
+a.nav_trigger {
+  outline-offset: -2px;
+
+  &:focus {
+    outline: 2px solid variables.$primary;
+  }
+}
+
+.nav {
+  width: fit-content;
+
+  &_container {
+    display: flex;
+    gap: calc(variables.$nav-item/4);
+  }
+
+  &_item,
+  &_trigger {
+    border-radius: variables.$border-radius-sm;
+  }
+
+  &_item {
+    margin: 0;
+    position: relative;
+
+    &:not(:first-child) {
+      padding-top: 0;
+    }
+
+    &-dropdown {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+
+  &_trigger {
+    @extend %caption;
+    font-weight: variables.$button-weight;
+    text-transform: variables.$button-transform;
+    white-space: nowrap;
+    cursor: pointer;
+    height: variables.$nav-item*2;
+    padding-right: variables.$nav-item*.75;
+    padding-left: variables.$nav-item*.75;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    text-underline-offset: .15em;
+
+    &:not(.nav_trigger-active):hover {
+      background-color: variables.$hover;
+    }
+
+    .nav_item-dropdown > & {
+      
+      &:after {
+        content: '';
+        border: solid variables.$text;
+        border-width: 0 .125rem .125rem 0;
+        padding: .125rem;
+        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;
+    gap: .25rem;
+
+    .nav_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%;
+
+  .nav_container{
+    flex-direction: column;
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// dense
+// —————————————————————————————————————————————————————————————————
+
+.nav-dense {
+
+  .nav {
+
+    &_item,
+    &_trigger {
+      border-radius: variables.$border-radius-sm;
+    }
+  
+    &_trigger {
+      padding-right: variables.$nav-item*0.5;
+      padding-left: 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;
+        }
+      }
+    }
+  }
+}