pallote-css 0.0.0

package/assets/_sass/common/_mixins.scss

@@ -0,0 +1,156 @@
+// —————————————————————————————————————————————————————————————————
+// media queries
+// font
+// form
+// misc
+// —————————————————————————————————————————————————————————————————
+
+// —————————————————————————————————————————————————————————————————
+// media queries
+// —————————————————————————————————————————————————————————————————
+
+@mixin responsive($value, $breakpoint) {
+  @if $value == up {
+    $value: min-width;
+    @if $breakpoint == desktop-lg { $breakpoint: $desktop-lg; } 
+    @else if $breakpoint == desktop { $breakpoint: $desktop; } 
+    @else if $breakpoint == laptop { $breakpoint: $laptop; } 
+    @else if $breakpoint == tablet { $breakpoint: $tablet; } 
+    @else if $breakpoint == mobile { $breakpoint: $mobile; } 
+    @else if $breakpoint == mobile-sm { $breakpoint: $mobile-sm; }
+
+  } @else if $value == down {
+    $value: max-width;
+    @if $breakpoint == desktop-lg { $breakpoint: $desktop-lg-down; } 
+    @else if $breakpoint == desktop { $breakpoint: $desktop-down; } 
+    @else if $breakpoint == laptop { $breakpoint: $laptop-down; } 
+    @else if $breakpoint == tablet { $breakpoint: $tablet-down; } 
+    @else if $breakpoint == mobile { $breakpoint: $mobile-down; } 
+    @else if $breakpoint == mobile-sm { $breakpoint: $mobile-sm-down; }
+  }
+
+  @media ($value: $breakpoint) {
+    @content;
+  }
+}
+
+@mixin responsive-touch {
+	@media (pointer:coarse) {
+		@content;
+	}
+}
+
+@mixin responsive-touch-landscape {
+	@media only screen and (max-device-width: $laptop-down) and (orientation: landscape) {
+		@content;
+	}
+}
+
+// —————————————————————————————————————————————————————————————————
+// font
+// —————————————————————————————————————————————————————————————————
+
+@mixin fontface($font-name, $font-file, $font-weight, $font-style) {
+
+	@font-face {
+		font-family: $font-name;
+		src: url('../fonts/' + $font-file + '.woff2') format('woff2');
+		font-weight: $font-weight;
+		font-style: $font-style;
+		font-display: swap;
+	}
+}
+
+@mixin text-ellipsis() {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+// —————————————————————————————————————————————————————————————————
+// form
+// —————————————————————————————————————————————————————————————————
+
+@mixin placeholder {
+	:-moz-placeholder { @content; }
+	::-moz-placeholder { @content; }
+	:-ms-input-placeholder { @content; }
+	::-webkit-input-placeholder { @content; } 
+}
+
+// —————————————————————————————————————————————————————————————————
+// misc
+// —————————————————————————————————————————————————————————————————
+
+@mixin calc($property, $expression) {
+	#{$property}: -webkit-calc(#{$expression});
+	#{$property}: calc(#{$expression});
+}
+
+@mixin background($position, $size) {
+	background-position: $position;
+	-webkit-background-size: $size;
+			background-size: $size;
+	background-repeat: no-repeat;
+}
+
+@mixin pseudo-element($content: "", $top: 0, $right: 0, $bottom: 0, $left: 0, $width: 100%, $height: 100%) {
+	content: $content;
+	position: absolute;
+	top: $top;
+	right: $right;
+	bottom: $bottom;
+	left: $left;
+	width: $width;
+	height: $height;
+}
+
+@mixin hover {
+	&:hover, &:active, &:focus {
+		@content;
+	}
+}
+
+@mixin keyframes($name) {
+	@-webkit-keyframes #{$name} {
+		@content; 
+	}
+	@-moz-keyframes #{$name} {
+		@content;
+	}
+	@-ms-keyframes #{$name} {
+		@content;
+	}
+	@keyframes #{$name} {
+		@content;
+	} 
+}
+
+@mixin transition($time, $properties...) {
+	$transition: ();
+	$will-change: ();
+  @each $property in $properties {
+    $transition: append(
+        $transition, ($property $time), $separator: comma
+    );
+    $will-change: append(
+        $will-change, ($property), $separator: comma
+    );
+  }
+	transition: $transition;
+	will-change: $will-change;
+}
+
+// fallback for clamp css function
+@mixin clamp($property, $min-size, $scaler, $max-size, $viewport: tablet){
+	
+	@include responsive(up, $viewport) {
+		#{$property}: $max-size;
+		#{$property}: clamp($min-size, $scaler, $max-size);
+	}
+	
+	@include responsive(down, $viewport) {
+		#{$property}: $min-size;
+		#{$property}: clamp($min-size, $scaler, $max-size);
+	}
+}

package/assets/_sass/common/_reset.scss

@@ -0,0 +1,81 @@
+// —————————————————————————————————————————————————————————————————
+// custom (for IE)
+// The new CSS Reset - version 1.2.0 (last updated 23.7.2021)
+// —————————————————————————————————————————————————————————————————
+
+// —————————————————————————————————————————————————————————————————
+// custom (for IE)
+// —————————————————————————————————————————————————————————————————
+
+body,
+html {
+  margin: 0;
+}
+
+h1, h2, h3, h4, h5, h6, p {
+  margin: 0;
+}
+
+// remove visited link styling
+button, a  {
+  color: inherit;
+}
+
+// remove space under picture tag
+picture {
+  display: flex;
+}
+
+// —————————————————————————————————————————————————————————————————
+// The new CSS Reset - version 1.2.0 (last updated 23.7.2021)
+// —————————————————————————————————————————————————————————————————
+
+// Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
+*:where(:not(iframe, canvas, img, svg, video, pre):not(svg *)) {
+  all: unset;
+  display: revert;
+}
+
+// Preferred box-sizing value
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+//  Remove list styles (bullets/numbers) in case you use it with normalize.css
+ol, ul {
+  list-style: none;
+}
+
+// For images to not be able to exceed their container
+img {
+  max-width: 100%;
+}
+
+// Removes spacing between cells in tables
+table {
+  border-collapse: collapse;
+}
+
+// Revert the 'white-space' property for textarea elements on Safari
+textarea {
+  white-space: revert;
+}
+
+// Add focus styles
+a[href],
+area[href],
+input,
+select,
+textarea,
+button,
+iframe,
+[tabindex],
+[contentEditable=true] {
+
+  &:focus {
+    outline: revert;
+    outline-color: $primary;
+  }
+}

package/assets/_sass/common/_variables.scss

@@ -0,0 +1,213 @@
+// —————————————————————————————————————————————————————————————————
+// color palette
+// spacing
+// typography
+// breakpoints
+// misc
+// —————————————————————————————————————————————————————————————————
+
+// —————————————————————————————————————————————————————————————————
+// color palette
+// —————————————————————————————————————————————————————————————————
+
+// main
+
+$white: #ffffff !default;
+$black: #000a1e !default;
+
+// grey
+
+$grey-90: #1A2335 !default;
+$grey-80: #333B4B !default;
+$grey-70: #4D5462 !default;
+$grey-60: #666C78 !default;
+$grey-50: #7F848E !default;
+$grey-40: #999DA5 !default;
+$grey-30: #B2B5BB !default;
+$grey-20: #CCCED2 !default;
+$grey-10: #E5E6E8 !default;
+$grey-5: #F2F3F4 !default;
+
+// text
+
+$text: $white !default;
+$text-alt: rgba($text, 0.5) !default;
+$text-disabled: rgba($text, 0.25) !default;
+
+$text-contrast: $black !default;
+$text-contrast-alt: rgba($text-contrast, 0.6) !default;
+$text-contrast-disabled: rgba($text-contrast, 0.3) !default;
+
+// brand
+
+$primary-light: #C2F9FF !default;
+$primary: #00D2FC !default;
+$primary-dark: #009BC3 !default;
+$primary-text: $text-contrast !default;
+
+$secondary-light: #B1B9D4 !default;
+$secondary: #4D5C8D !default;
+$secondary-dark: #3D4971 !default;
+$secondary-text: $text !default;
+
+$highlight-light: #F9D7B8 !default;
+$highlight: #F2994A !default;
+$highlight-dark: #EF7910 !default;
+$highlight-text: $text-contrast !default;
+
+// feedback
+
+$success-light: #E7F9EE !default;
+$success: #27AE60 !default;
+$success-dark: #1C7C44 !default;
+$success-text: #155F34 !default;
+$success-contrast: $text !default;
+
+$info-light: #E9F8FD !default;
+$info: #17A0CC !default;
+$info-dark: #117798 !default;
+$info-text: #0D5A72 !default;
+$info-contrast: $text !default;
+
+$warning-light: #FFFAE5 !default;
+$warning: #FFDC46 !default;
+$warning-dark: #E5BA00 !default;
+$warning-text: #685400 !default;
+$warning-contrast: $text-contrast !default;
+
+$error-light: #FCE7E7 !default;
+$error: #EB5757 !default;
+$error-dark: #D31919 !default;
+$error-text: #9C1212 !default;
+$error-contrast: $text !default;
+
+// background
+
+$background-default: $black !default;
+$background-paper: $grey-90 !default;
+
+// others
+
+$border-color: rgba($text, 0.2) !default;
+$border: 1px solid $border-color !default;
+
+$hover: rgba($text, 0.12) !default;
+
+$backdrop: rgba($text-contrast, 0.8) !default;
+$backdrop-contrast: rgba($text, 0.2) !default;
+
+// —————————————————————————————————————————————————————————————————
+// spacing
+// —————————————————————————————————————————————————————————————————
+
+$col: calc(100%/12);
+
+$spacing-xxs: 0.125rem !default;
+$spacing-xs: 0.25rem !default;
+$spacing-sm: 0.5rem !default;
+$spacing-md: 1rem !default;
+$spacing-lg: 2rem !default;
+$spacing-xl: 4rem !default;
+$spacing-xxl: 7rem !default;
+
+$max-width-subtitle: $spacing-xxl*4 !default;
+$max-width-editor: $spacing-xxl*6 !default;
+
+$navbar-height: 4rem !default;
+
+// —————————————————————————————————————————————————————————————————
+// typography
+// —————————————————————————————————————————————————————————————————
+
+// typefaces
+
+$font: "Barlow", Arial, sans-serif !default;
+
+// weight
+
+$font-regular: 400 !default;
+$font-bold: 700 !default;
+$font-black: 900 !default;
+
+// styles
+
+$h1-size: 3rem !default;
+$h1-weight: $font-black !default;
+$h1-line-height: 1.25 !default;
+
+$h2-size: 2.5rem !default;
+$h2-weight: $font-black !default;
+$h2-line-height: 1.25 !default;
+
+$h3-size: 2rem !default;
+$h3-weight: $font-bold !default;
+$h3-line-height: 1.25 !default;
+
+$h4-size: 1.75rem !default;
+$h4-weight: $font-bold !default;
+$h4-line-height: 1.25 !default;
+
+$h5-size: 1.5rem !default;
+$h5-weight: $font-bold !default;
+$h5-line-height: 1.25 !default;
+
+$h6-size: 1.25rem !default;
+$h6-weight: $font-bold !default;
+$h6-line-height: 1.25 !default;
+
+$subtitle-size: 1.125rem !default;
+$subtitle-weight: $font-regular !default;
+$subtitle-line-height: 1.5 !default;
+
+$body-size: 1rem !default;
+$body-weight: $font-regular !default;
+$body-line-height: 1.5 !default;
+
+$caption-size: 0.875rem !default;
+$caption-weight:$font-regular !default;
+$caption-line-height:  1.5 !default;
+
+$overline-size: 0.75rem !default;
+$overline-weight: $font-regular !default;
+$overline-line-height: 1.5 !default;
+
+// —————————————————————————————————————————————————————————————————
+// breakpoints
+// —————————————————————————————————————————————————————————————————
+
+$desktop-lg: 1440px !default;
+$desktop-lg-down: calc(#{$desktop-lg} - 0.02px);
+
+$desktop: 1280px !default;
+$desktop-down: calc(#{$desktop} - 0.02px);
+
+$laptop: 1024px !default;
+$laptop-down: calc(#{$laptop} - 0.02px);
+
+$tablet: 768px !default;
+$tablet-down: calc(#{$tablet} - 0.02px);
+
+$mobile: 568px !default;
+$mobile-down: calc(#{$mobile} - 0.02px);
+
+$mobile-sm: 350px !default;
+$mobile-sm-down: calc(#{$mobile-sm} - 0.02px);
+
+// —————————————————————————————————————————————————————————————————
+// misc
+// —————————————————————————————————————————————————————————————————
+
+// box-shadow
+
+$box-shadow: 0 0 $spacing-sm 0 rgba($text, 0.2) !default;
+
+// transition
+
+$transition-md: 0.4s ease 0s !default;
+$transition-lg: 0.8s ease 0s !default;
+
+// border-radius
+
+$border-radius-sm: $spacing-xs !default;
+$border-radius-md: $spacing-sm !default;
+$border-radius-lg: $spacing-md !default;

package/assets/_sass/components/_alert.scss

@@ -0,0 +1,189 @@
+// —————————————————————————————————————————————————————————————————
+// elements
+// color
+// notice
+// bar
+// dense
+// noIcon
+// —————————————————————————————————————————————————————————————————
+
+$spacing-alert: $spacing-sm;
+
+// —————————————————————————————————————————————————————————————————
+// elements
+// —————————————————————————————————————————————————————————————————
+
+.alert {
+  border-radius: $spacing-sm;
+  background-color: $info-light;
+  color: $info-text;
+  padding: $spacing-alert;
+  position: fixed;
+  top: $spacing-md;
+  right: $spacing-md;
+  max-width: $spacing-xxl*3;
+  min-width: $spacing-xxl*2;
+  z-index: 200;
+
+  &:not(.alert--bar) {
+    padding-left: $spacing-lg + $spacing-sm;
+  }
+
+  @include responsive(down, mobile) {
+    @include calc(max-width, '100vw - '$spacing-md);
+    right: 8px;
+    top: $spacing-sm;
+  }
+  
+  @include responsive(down, mobile-sm) {
+    @include calc(width, '100vw - '$spacing-md);
+  }
+
+  &:before {
+    content: "";
+    position: absolute;
+    top: $spacing-alert;
+    left: $spacing-sm;
+    height: $spacing-md*1.5;
+    width: $spacing-md*1.5;
+    background-size: cover;
+    background-repeat: no-repeat;
+  }
+
+  &__title {
+    font-weight: $font-bold;
+  }
+
+  &__subtitle {
+    @extend .caption;
+    padding-bottom: 0.2em;
+  }
+
+  &__close {
+    transition: opacity $transition-md;
+    position: absolute;
+    top: $spacing-sm;
+    right: $spacing-sm;
+    line-height: 0;
+
+    svg {
+      width: $spacing-sm;
+      height: $spacing-sm;
+      fill: $success-dark
+    }
+
+    &:hover {
+      opacity: 0.5;
+    }
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// 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; } 
+
+  background-color: $color-light;
+  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'); }
+  }
+}
+
+.alert {
+
+  &--success { @include color(success); }
+  &--info { @include color(info); }
+  &--warning { @include color(warning); }
+  &--error { @include color(error); }
+}
+
+// —————————————————————————————————————————————————————————————————
+// notice
+// —————————————————————————————————————————————————————————————————
+
+.alert {
+  
+  &--notice {
+    position: relative;
+    max-width: none;
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// bar
+// —————————————————————————————————————————————————————————————————
+
+.alert {
+  
+  &--bar {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    max-width: none;
+    width: 100%; // needed for small devices to not overflow the container
+    z-index: 1;
+    border-radius: 0;
+    text-align: center;
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// dense
+// —————————————————————————————————————————————————————————————————
+
+.alert--dense {
+  padding: $spacing-alert*0.5;
+
+  &:before {
+    top: $spacing-alert*0.5;
+    left: $spacing-alert*0.5;
+    height: $spacing-md*1.25;
+    width: $spacing-md*1.25;
+  }
+
+  &:not(.alert--bar) {
+    padding-left: $spacing-md*1.75;
+  }
+
+  .alert__title {
+
+    + .alert__title,
+    + .alert__subtitle {
+      margin-top: 0;
+    }
+  }
+
+  .alert__title { @extend .caption; }
+  .alert__subtitle { @extend .overline; }
+}
+
+// —————————————————————————————————————————————————————————————————
+// noIcon
+// —————————————————————————————————————————————————————————————————
+
+.alert.alert {
+
+  &--noIcon {    
+    padding-left: $spacing-md;
+    
+    &.alert--dense {
+      padding-left: $spacing-sm;
+    }
+    
+    &:before {
+      display: none;
+    }
+  }
+}