pallote-css 0.3.11 → 0.4.0

package/dist/styles/common/_mixins.scss

@@ -0,0 +1,164 @@
+@use 'sass:list';
+@use 'variables';
+
+// —————————————————————————————————————————————————————————————————
+// media queries
+// font
+// form
+// misc
+// —————————————————————————————————————————————————————————————————
+
+// —————————————————————————————————————————————————————————————————
+// media queries
+// —————————————————————————————————————————————————————————————————
+
+@mixin responsive($value, $breakpoint) {
+  @if $value == up {
+    $value: min-width;
+    @if $breakpoint == desktop-lg { $breakpoint: variables.$desktop-lg; } 
+    @else if $breakpoint == desktop { $breakpoint: variables.$desktop; } 
+    @else if $breakpoint == laptop { $breakpoint: variables.$laptop; } 
+    @else if $breakpoint == tablet { $breakpoint: variables.$tablet; } 
+    @else if $breakpoint == mobile { $breakpoint: variables.$mobile; } 
+    @else if $breakpoint == mobile-sm { $breakpoint: variables.$mobile-sm; }
+
+  } @else if $value == down {
+    $value: max-width;
+    @if $breakpoint == desktop-lg { $breakpoint: variables.$desktop-lg-down; } 
+    @else if $breakpoint == desktop { $breakpoint: variables.$desktop-down; } 
+    @else if $breakpoint == laptop { $breakpoint: variables.$laptop-down; } 
+    @else if $breakpoint == tablet { $breakpoint: variables.$tablet-down; } 
+    @else if $breakpoint == mobile { $breakpoint: variables.$mobile-down; } 
+    @else if $breakpoint == mobile-sm { $breakpoint: variables.$mobile-sm-down; }
+  }
+
+  @media ($value: $breakpoint) {
+    @content;
+  }
+}
+
+@mixin responsive-touch {
+	@media (pointer:coarse) {
+		@content;
+	}
+}
+
+@mixin responsive-click {
+	@media not (pointer:coarse) {
+		@content;
+	}
+}
+
+@mixin responsive-touch-landscape {
+	@media only screen and (max-device-width: variables.$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(variables.$fonts-path + $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: list.append(
+        $transition, ($property $time), $separator: comma
+    );
+    $will-change: list.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) {
+	#{$property}: clamp($min-size, $scaler, $max-size);
+
+	// @include responsive(up, $viewport) {
+	// 	#{$property}: $max-size;
+	// }
+
+	// @include responsive(down, $viewport) {
+	// 	#{$property}: $min-size;
+	// }
+}

package/dist/styles/common/_reset.scss

@@ -0,0 +1,145 @@
+@use 'variables';
+
+// —————————————————————————————————————————————————————————————————
+// custom (for IE)
+// The new CSS Reset - version 1.2.0 (last updated 23.7.2021)
+// Remove inputs icons
+// —————————————————————————————————————————————————————————————————
+
+// —————————————————————————————————————————————————————————————————
+// custom (for IE)
+// —————————————————————————————————————————————————————————————————
+
+body,
+html {
+  margin: 0;
+  accent-color: variables.$primary;
+}
+
+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,
+input[type="checkbox"],
+input[type='radio'],
+select,
+textarea,
+button,
+iframe,
+[tabindex],
+[contentEditable=true] {
+  outline: revert;
+  
+  &:focus {
+    outline: 2px solid currentColor;
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// Remove inputs icons
+// —————————————————————————————————————————————————————————————————
+
+// Remove default arrow for input[type=number] in Webkit browsers (Chrome, Safari, etc.)
+input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button {
+  opacity: 0;
+  margin: 0;
+}
+
+// Remove default arrow for input[type=number] in Firefox
+input[type="number"] {
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+
+// Remove default calendar and time picker icons in Webkit browsers
+input[type="date"]::-webkit-calendar-picker-indicator,
+input[type="time"]::-webkit-calendar-picker-indicator {
+  opacity: 0;
+}
+
+// Remove default calendar icon in Edge and IE
+input[type="date"]::-ms-clear,
+input[type="date"]::-ms-input-placeholder {
+  opacity: 0;
+}
+
+input[type="time"]::-ms-clear,
+input[type="time"]::-ms-input-placeholder {
+  opacity: 0;
+}
+
+// Remove default calendar and time picker icons in Mozilla Firefox
+input[type="date"] {
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+
+input[type="time"] {
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+
+// For additional browser support
+input[type="date"],
+input[type="time"] {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}
+
+// Hide the clear button in Edge
+input::-ms-clear {
+  opacity: 0;
+}

package/dist/styles/common/_variables.scss

@@ -0,0 +1,252 @@
+@use 'sass:color';
+@use 'sass:string';
+
+// —————————————————————————————————————————————————————————————————
+// dependencies
+// color palette
+// spacing
+// typography
+// breakpoints
+// misc
+// components
+// —————————————————————————————————————————————————————————————————
+
+// —————————————————————————————————————————————————————————————————
+// dependencies
+// —————————————————————————————————————————————————————————————————
+
+// $fonts-path: './assets/fonts/' !default;
+// $icons-path: './assets/icons/' !default;
+
+// —————————————————————————————————————————————————————————————————
+// color palette
+// —————————————————————————————————————————————————————————————————
+
+// main
+
+$main: #FFFFFF !default;
+$contrast: #000A1E !default;
+
+// grey
+
+$grey-90: color.mix($contrast, $main, 90%) !default;
+$grey-80: color.mix($contrast, $main, 80%) !default;
+$grey-70: color.mix($contrast, $main, 70%) !default;
+$grey-60: color.mix($contrast, $main, 60%) !default;
+$grey-50: color.mix($contrast, $main, 50%) !default;
+$grey-40: color.mix($contrast, $main, 40%) !default;
+$grey-30: color.mix($contrast, $main, 30%) !default;
+$grey-20: color.mix($contrast, $main, 20%) !default;
+$grey-10: color.mix($contrast, $main, 10%) !default;
+$grey-5: color.mix($contrast, $main, 5%) !default;
+
+// background
+
+$background-default: $grey-5 !default;
+$background-paper: $main !default;
+
+// text
+
+$text: $contrast !default;
+$text-alt: rgba($text, 0.5) !default;
+$text-disabled: rgba($text, 0.25) !default;
+
+$text-contrast: $main !default;
+$text-contrast-alt: rgba($text-contrast, 0.6) !default;
+$text-contrast-disabled: rgba($text-contrast, 0.3) !default;
+
+// brand
+
+$primary: #3C6BF4 !default;
+$primary-light: color.mix($main, $primary, 70%) !default;
+$primary-dark: color.mix($contrast, $primary, 50%) !default;
+$primary-contrast: $text-contrast !default;
+
+$secondary: #9E6D04 !default;
+$secondary-light: color.mix($main, $secondary, 70%) !default;
+$secondary-dark: color.mix($contrast, $secondary, 50%) !default;
+$secondary-contrast: $text-contrast !default;
+
+// feedback
+
+$success: #27AE60 !default;
+$success-light: color.mix($main, $success, 80%) !default;
+$success-dark: color.mix($contrast, $success, 60%) !default;
+$success-contrast: $text-contrast !default;
+
+$info: #17A0CC !default;
+$info-light: color.mix($main, $info, 80%) !default;
+$info-dark: color.mix($contrast, $info, 60%) !default;
+$info-contrast: $text-contrast !default;
+
+$warning: #FFDC46 !default;
+$warning-light: color.mix($main, $warning, 80%) !default;
+$warning-dark: color.mix($contrast, $warning, 60%) !default;
+$warning-contrast: $text !default;
+
+$error: #EB5757 !default;
+$error-light: color.mix($main, $error, 80%) !default;
+$error-dark: color.mix($contrast, $error, 60%) !default;
+$error-contrast: $text-contrast !default;
+
+// others
+
+$border-color: rgba($text, 0.2) !default;
+$border: 1px solid $border-color !default;
+$border-color-contrast: rgba($text-contrast, 0.3) !default;
+$border-contrast: 1px solid $border-color-contrast !default;
+
+$hover: rgba($text, 0.08) !default;
+$hover-contrast: rgba($text-contrast, 0.08) !default;
+
+$overlay: rgba($text-contrast, 0.8) !default;
+$overlay-contrast: rgba($text, 0.2) !default;
+
+$input-background: rgba($text, 0.05);
+
+// —————————————————————————————————————————————————————————————————
+// 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: 27.5rem !default;
+$max-width-editor: 40rem !default;
+$max-width-form: 40rem !default;
+
+$navbar-height: 4rem !default;
+$navbar-height-sm: 3rem !default;
+$nav-item: $spacing-md !default;
+
+// —————————————————————————————————————————————————————————————————
+// typography
+// —————————————————————————————————————————————————————————————————
+
+// Functions to unquote and remove spaces
+// @function str-replace($string, $search, $replace: "") {
+//   $index: string.index($string, $search);
+  
+//   @if $index {
+//     @return str-replace(
+//       string.slice($string, 1, $index - 1) + $replace + string.slice($string, $index + string.length($search), string.length($string)),
+//       $search,
+//       $replace
+//     );
+//   }
+
+//   @return $string;
+// }
+// @function clean-string($string) {
+//   @return str-replace(string.unquote($string), " ");
+// }
+
+// typefaces
+$font: "Source Sans Pro" !default;
+// $font-clean: clean-string($font);
+$font-fallback: "Arial, sans-serif" !default;
+$font-code: monospace !default;
+
+// weight
+
+$font-regular: 400 !default;
+$font-bold: 700 !default;
+
+// styles
+
+$h1-size: 3rem !default;
+$h1-weight: $font-bold !default;
+$h1-line-height: 1.25 !default;
+
+$h2-size: 2.5rem !default;
+$h2-weight: $font-bold !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 .5rem 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: .25rem !default;
+$border-radius-md: .5rem !default;
+$border-radius-lg: 1rem !default;
+
+// —————————————————————————————————————————————————————————————————
+// components
+// —————————————————————————————————————————————————————————————————
+
+// input
+
+$input-height: 2.5rem;
+$checkbox-width: 1.5rem;

package/dist/styles/components/_accordion.scss

@@ -0,0 +1,132 @@
+@use '../common/mixins';
+@use '../common/variables';
+
+// —————————————————————————————————————————————————————————————————
+// elements
+// size
+// transparent
+// active
+// —————————————————————————————————————————————————————————————————
+
+// —————————————————————————————————————————————————————————————————
+// elements
+// —————————————————————————————————————————————————————————————————
+
+.accordion {
+  width: 100%;
+
+  &__item {
+    position: relative;
+    background-color: variables.$hover;
+    width: 100%;
+  }
+
+  &__control,
+  &__content {
+    transition: padding variables.$transition-md;
+    will-change: padding;
+  }
+
+  &__control {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    cursor: pointer;
+
+    &:after {
+      transition: transform variables.$transition-md;
+      will-change: transform;
+      position: absolute;
+      height: variables.$spacing-md;
+      width: variables.$spacing-md;
+      transform-origin: center 60%;
+      pointer-events: none;
+    }
+  }
+
+  &__content {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height variables.$transition-md;
+    will-change: max-height;
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// size
+// —————————————————————————————————————————————————————————————————
+
+@mixin accordion-size($proportion, $size) {
+
+  .accordion {
+
+    &__item {
+      border-radius: calc($size*2/3);
+
+      &:not(:last-child) { margin-bottom: calc($size/3); }
+      &--active { padding-bottom: $size; }
+    }
+    
+    &__control {
+      padding: $size $size*1.5;
+
+      &:after {
+        top: $size;
+        right: $size*1.25;
+      }
+    }
+
+    &__header {
+
+      @if $proportion == sm { margin-bottom: -1px; }
+      @if $proportion == lg { margin: -1px 0 -2px 0; }
+    }
+
+    &__content {
+      padding: 0 $size*1.5;
+      overflow: hidden;
+    }
+  }
+
+  &.accordion--transparent .accordion__item--active:not(:first-child) {
+    margin-top: calc($size/3);
+  }
+}
+
+.accordion {
+
+  @include accordion-size(md, variables.$spacing-sm);
+  &--sm { @include accordion-size(sm, variables.$spacing-xs); }
+  &--lg { @include accordion-size(lg, variables.$spacing-md); }
+}
+
+// —————————————————————————————————————————————————————————————————
+// transparent
+// —————————————————————————————————————————————————————————————————
+
+.accordion--transparent {
+
+  .accordion__item {
+    transition: background-color variables.$transition-md, margin variables.$transition-md;
+    will-change: background-color, margin;
+    background-color: transparent;
+
+    @include mixins.hover { background-color: variables.$hover; }
+    &--active { background-color: variables.$hover; }
+    
+    &:not(:last-child):not(.accordion__item--active) {
+      margin-bottom: 0;
+    }
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// active
+// —————————————————————————————————————————————————————————————————
+
+.accordion__item--active {
+
+  .accordion__control:after {
+    transform: rotate(180deg);
+  }
+}