pallote-css 0.0.0 → 0.2.0

package/{assets/_sass → dist/styles}/components/_alert.scss

@@ -15,15 +15,15 @@ $spacing-alert: $spacing-sm;
 
 .alert {
   border-radius: $spacing-sm;
-  background-color: $info-light;
-  color: $info-text;
+  background-color: $info-background;
+  color: $text;
   padding: $spacing-alert;
   position: fixed;
   top: $spacing-md;
   right: $spacing-md;
+  width: 100%;
   max-width: $spacing-xxl*3;
-  min-width: $spacing-xxl*2;
-  z-index: 200;
+  z-index: 20;
 
   &:not(.alert--bar) {
     padding-left: $spacing-lg + $spacing-sm;
@@ -51,7 +51,7 @@ $spacing-alert: $spacing-sm;
   }
 
   &__title {
-    font-weight: $font-bold;
+    font-weight: $font-bold !important;
   }
 
   &__subtitle {
@@ -82,21 +82,22 @@ $spacing-alert: $spacing-sm;
 // color
 // —————————————————————————————————————————————————————————————————
 
-@mixin color($color, $color-light: $info-light, $color-text: $info-text) {
-  @if $color == success { $color-light: $success-light; $color-text: $success-text; } 
-  @else if $color == info { $color-light: $info-light; $color-text: $info-text; } 
-  @else if $color == warning { $color-light: $warning-light; $color-text: $warning-text; } 
-  @else if $color == error { $color-light: $error-light; $color-text: $error-text; } 
+@mixin color($color, $background-color: $info-background, $border-color: $info) {
+  @if $color == success { $background-color: $success-background; $border-color: $success; } 
+  @else if $color == info { $background-color: $info-background; $border-color: $info; } 
+  @else if $color == warning { $background-color: $warning-background; $border-color: $warning; } 
+  @else if $color == error { $background-color: $error-background; $border-color: $error; } 
 
-  background-color: $color-light;
-  color: $color-text;
+  background-color: $background-color;
+  border: 1px solid $border-color;
+  color: $text;
 
   &:not(.alert--bar):before {
 
-    @if $color == success { content: url('../icons/phosphor/check-circle.svg'); }
-    @else if $color == info { content: url('../icons/phosphor/info.svg'); }
-    @else if $color == warning { content: url('../icons/phosphor/warning.svg'); }
-    @else if $color == error { content: url('../icons/phosphor/x-circle.svg'); }
+    @if $color == success { content: url($icons-path + '/phosphor/check-circle.svg'); }
+    @else if $color == info { content: url($icons-path + '/phosphor/info.svg'); }
+    @else if $color == warning { content: url($icons-path + '/phosphor/warning.svg'); }
+    @else if $color == error { content: url($icons-path + '/phosphor/x-circle.svg'); }
   }
 }
 
@@ -117,6 +118,7 @@ $spacing-alert: $spacing-sm;
   &--notice {
     position: relative;
     max-width: none;
+    z-index: 1;
   }
 }
 
@@ -135,6 +137,8 @@ $spacing-alert: $spacing-sm;
     width: 100%; // needed for small devices to not overflow the container
     z-index: 1;
     border-radius: 0;
+    border-left: 0;
+    border-right: 0;
     text-align: center;
   }
 }

package/dist/styles/components/_breadcrumbs.scss

@@ -0,0 +1,47 @@
+// —————————————————————————————————————————————————————————————————
+// elements
+// separator
+// —————————————————————————————————————————————————————————————————
+
+// —————————————————————————————————————————————————————————————————
+// elements
+// —————————————————————————————————————————————————————————————————
+
+.breadcrumbs {
+  display: inline-flex;
+  align-items: baseline;
+
+  @include responsive(down, tablet) {
+    flex-direction: column;
+  }
+
+  &__item {
+    cursor: pointer;
+
+    &:not(:first-child) {
+      margin-left: $spacing-xs;
+
+      &:before {
+        content: "/";
+        margin-right: $spacing-xs;
+        color: $text-alt;
+        display: inline-block; // required to remove underline on hover for before element
+      }
+    }
+
+    @include hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// separator
+// —————————————————————————————————————————————————————————————————
+
+.breadcrumbs--arrow .breadcrumbs__item:not(:first-child):before {
+  content: "\2039";
+  transform: rotate(180deg);
+  font-size: 1.5em;
+  float: left;
+}

package/{assets/_sass → dist/styles}/components/_button.scss

@@ -134,9 +134,9 @@
 }
 
 @include color('button',
-  '' $primary $primary-text,
-  '--secondary' $secondary $secondary-text,
-  '--highlight' $highlight $highlight-text,
+  '' $primary $primary-contrast,
+  '--secondary' $secondary $secondary-contrast,
+  '--highlight' $highlight $highlight-contrast,
   '--default' $background-default $primary,
   '--grey' $text-disabled $text,
   '--success' $success $success-contrast,
@@ -160,98 +160,3 @@ button {
     outline: none;
   }
 }
-
-// —————————————————————————————————————————————————————————————————
-// menu
-// —————————————————————————————————————————————————————————————————
-
-// button apparition
-@include keyframes(button-menu-opacity) {
-	0% 		{ opacity: 0; }
-	50% 	{ opacity: 0; }
-	100% 	{ opacity: 100%; }
-}
-
-// lines > close
-@include keyframes(button-menu-open-before) {
-	0% 		{ transform: translateY($spacing-xs*1.5); }
-	50% 	{ transform: translateY(0); 
-			  	transform: rotate(0); }
-	100% 	{ transform: rotate(45deg); }
-}
-@include keyframes(button-menu-open-after) {
-	0% 		{ transform: translateY(-$spacing-xs*1.5); }
-	50% 	{ transform: translateY(0); 
-			  	transform: rotate(0); }
-	100% 	{ transform: rotate(-45deg); }
-}
-
-// close > lines
-@include keyframes(button-menu-close-before) {
-	0% 		{ transform: rotate(45deg); }
-	50% 	{ transform: rotate(0); 
-			  	transform: translateY(0); }
-	100% 	{ transform: translateY($spacing-xs*1.5); }
-}
-@include keyframes(button-menu-close-after) {
-	0% 		{ transform: rotate(-45deg); }
-	50% 	{ transform: rotate(0); 
-			  	transform: translateY(0); }
-	100% 	{ transform: translateY(-$spacing-xs*1.5); }
-}
-
-.button--menu {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  animation: button-menu-opacity $transition-lg;
-  cursor: pointer;
-  position: relative;
-  overflow: visible;
-  width: $spacing-md;
-  height: $spacing-md;
-  background-color: transparent !important;
-  border: 0;
-  padding: 0;
-
-  &:before,
-  &:after,
-  .button__inner {
-    background-color: $text;
-  }
-
-  &:before,
-  &:after {
-    @include pseudo-element('', auto, auto, auto, auto, $spacing-md, 2px);
-    @include transition($transition-md, transform);
-    border-radius: 0.15rem;
-  }
-
-  &:before {
-    transform: translateY($spacing-xs*1.5);
-    animation: button-menu-close-before $transition-lg;
-  }
-
-  &:after {
-    transform: translateY(-$spacing-xs*1.5);
-    animation: button-menu-close-after $transition-lg;
-  }
-
-  .button__inner {
-    @include transition($transition-md, opacity);
-    border-radius: 0.15rem;
-    width: $spacing-md;
-    height: 2px;
-    position: absolute;
-  }
-
-  &.button--menu--open {
-
-    &:before { animation: button-menu-open-before $transition-lg forwards; }
-    &:after { animation: button-menu-open-after $transition-lg forwards; }
-
-    .button__inner {
-      opacity: 0;
-    }
-  }
-}

package/{assets/_sass → dist/styles}/components/_card.scss

@@ -31,24 +31,26 @@
       background-position: center center;
       width: 100%;
       height: 100%;
-      background-color: $backdrop;
+      background-color: $overlay;
       overflow: hidden;
       padding-bottom: 50%;
       
       .card--transparent & {
-        background-color: $backdrop-contrast;
+        background-color: $overlay-contrast;
       }
     }
   }
 
+  &__label,
   &__title {
-    @extend %h6;
     @extend %text--bold;
+  }
+
+  &__title {
     line-height: 1.25;
   }
   
   &__subtitle {
-    @extend %subtitle;
     @extend %text--regular;
   }
   
@@ -139,9 +141,18 @@
 
   .card {
 
+    &__label {
+      @if $value == xs { @extend %overline; }
+      @else if $value == sm { @extend %overline; }
+      @else if $value == md { @extend %overline; }
+      @else if $value == lg { @extend %caption; }
+      @else if $value == xl { @extend %body; }
+    }
+
     &__title {
       @if $value == xs { @extend %body; }
       @else if $value == sm { @extend %subtitle; }
+      @else if $value == md { @extend %h6; }
       @else if $value == lg { @extend %h5; }
       @else if $value == xl { @extend %h4; }
     }
@@ -149,6 +160,7 @@
     &__subtitle {
       @if $value == xs { @extend %caption; }
       @else if $value == sm { @extend %body; }
+      @else if $value == md { @extend %subtitle; }
       @else if $value == lg { @extend %h6; }
       @else if $value == xl { @extend %h5; }
       margin-top: calc($size / 3);
@@ -214,10 +226,10 @@
 
 .card {
   @include size(md, $spacing-md+$spacing-sm);
-  &--xs { @include size(xs, $spacing-sm+$spacing-xs); }
-  &--sm { @include size(sm, $spacing-md); }
-  &--lg { @include size(lg, $spacing-lg); }
-  &--xl { @include size(xl, $spacing-lg+$spacing-sm); }
+  &--xs.card { @include size(xs, $spacing-sm+$spacing-xs); }
+  &--sm.card { @include size(sm, $spacing-md); }
+  &--lg.card { @include size(lg, $spacing-lg); }
+  &--xl.card { @include size(xl, $spacing-lg+$spacing-sm); }
 }
 
 // —————————————————————————————————————————————————————————————————

package/{assets/_sass/components/_nav.scss → dist/styles/components/_detail.scss}

@@ -1,5 +1,6 @@
 // —————————————————————————————————————————————————————————————————
 // elements
+// bold
 // dense
 // —————————————————————————————————————————————————————————————————
 
@@ -7,66 +8,32 @@
 // elements
 // —————————————————————————————————————————————————————————————————
 
-.nav {
+.detail {
   display: flex;
+  align-items: center;
 
-  // override ul & li styling
-  ul { list-style: none; }
-
-  li { margin-left: 0; }
-  li + li { padding-top: 0; }
-
-  &__group {
-    display: flex;
-
-    & + & {
-      margin-top: $spacing-md;
-    }
-  }
-
-  &__title {
-    @extend %overline;
-    color: $text-alt;
-    font-weight: $font-bold;
-    margin-bottom: $spacing-xs;
-  }
-
-  &__item {
-    cursor: pointer;
-    font-weight: $font-bold;
-    position: relative;
-    display: inline-flex;
+  & + & {
+    margin-top: $spacing-sm;
   }
 
-  &__trigger {
-    @extend %caption;
-    font-weight: $font-bold;
-    padding: $spacing-sm $spacing-md;
-    border-radius: $border-radius-sm;
-
-    @include hover { background-color: $hover; }
-
-    &--active {
-      color: $primary;
-      background-color: $hover;
-    }
+  &__icon {
+    display: flex;
+    align-items: center;
+    width: 1em;
+    height: 1em;
+    margin-right: $spacing-sm;
   }
 }
 
 // —————————————————————————————————————————————————————————————————
-// dense
+// bold
 // —————————————————————————————————————————————————————————————————
 
-.nav--dense {
+.detail--bold {
+  @extend %text--bold;
 
-  .nav {
-
-    &__item + .nav__item {
-      margin-top: $spacing-xxs;
-    }
-
-    &__trigger {
-      padding: $spacing-xs $spacing-sm;
-    }
+  .detail__icon,
+  .detail__icon * {
+    stroke-width: 24;
   }
-}
+}

package/dist/styles/components/_divider.scss

@@ -0,0 +1,51 @@
+// —————————————————————————————————————————————————————————————————
+// elements
+// direction
+// size
+// —————————————————————————————————————————————————————————————————
+
+// —————————————————————————————————————————————————————————————————
+// elements
+// —————————————————————————————————————————————————————————————————
+
+.divider {
+  display: inline-block;
+  background-color: $border-color;
+  height: 1px;
+  width: 100%;
+}
+
+// —————————————————————————————————————————————————————————————————
+// direction
+// —————————————————————————————————————————————————————————————————
+
+.divider {
+
+  &--portrait {
+    height: 100%;
+    width: 1px;
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// size
+// —————————————————————————————————————————————————————————————————
+
+@mixin size($size) {
+  margin-top: $size;
+  margin-bottom: $size;
+
+  &.divider--portrait {
+    margin-top: 0;
+    margin-right: $size;
+    margin-bottom: 0;
+    margin-left: $size;
+  }
+}
+
+.divider {
+  @include size($spacing-md);
+
+  &--sm { @include size($spacing-sm); }
+  &--lg { @include size($spacing-lg); }
+}

package/{assets/_sass → dist/styles}/components/_input.scss

@@ -28,7 +28,6 @@ $checkbox-width: $spacing-md*1.25;
 		@include transition($transition-md, color);
 		@extend %caption;
 		font-weight: $font-bold;
-		color: $text-alt;
 		text-overflow: ellipsis;
 		cursor: pointer;
 		display: block;
@@ -45,10 +44,10 @@ $checkbox-width: $spacing-md*1.25;
 		width: 100%;
     border-radius: $border-radius-md !important;
     padding: $spacing-xs*1.5 $spacing-sm;
-		background-color: $background-paper;
+		background-color: $hover;
 		
 		@include responsive(down, mobile) {
-      background-color: $background-paper;
+      background-color: $hover;
 		}
     
     &:not(textarea) {