pallote-css 0.3.9 → 0.3.11

package/dist/styles/common/_global.scss

@@ -1,154 +0,0 @@
-html {
-	scroll-behavior: smooth;
-}
-
-body {
-	font-family: $font, $font-fallback;
-	font-size: 16px;
-	line-height: 1.5;
-	font-weight: $font-regular;
-	background-color: $background-default;
-	color: $text;
-	// needed for footer margin-top: auto if content smaller than viewport height
-	display: flex;
-	flex-direction: column;
-	min-height: 100vh;
-	
-	&:after {
-		transition: opacity $transition-md;
-		content: '';
-		position: fixed;
-		background-color: $overlay;
-		height: 100vh;
-		width: 100vw;
-		top: 0;
-		left: 0;
-		opacity: 0;
-		z-index: 12;
-		pointer-events: none;
-	}
-	
-	&.js-sidebar,
-	&.js-navbar {
-		overflow: hidden;
-		
-		&:after {
-			opacity: 1;
-			pointer-events: initial;
-		}
-	}
-
-	&.js-navbar:after {
-		z-index: 10;
-	}
-}
-
-// stick to bottom of page when page height smaller than viewport height
-footer {
-	margin-top: auto;
-}
-
-// embed responsively
-
-.embed-container { 
-	position: relative; 
-	padding-bottom: 56.25%; 
-	height: 0; 
-	overflow: hidden; 
-	max-width: 100%;
-	border-radius: $spacing-md;
-	
-	iframe, object, embed { 
-		position: absolute; 
-		top: 0; 
-		left: 0; 
-		width: 100%; 
-		height: 100%; 
-	}
-}        
-
-// text selection
-::-moz-selection {
-	background: $primary;
-	color: $primary-contrast;
-}
-
-::selection {
-	background: $primary;
-	color: $primary-contrast;
-}
-
-::-moz-selection {
-	background: $primary;
-	color: $primary-contrast;
-}
-
-// remove autocomplete from webkit browsers
-
-input:-webkit-autofill,
-input:-webkit-autofill:hover, 
-input:-webkit-autofill:focus,
-textarea:-webkit-autofill,
-textarea:-webkit-autofill:hover
-textarea:-webkit-autofill:focus,
-select:-webkit-autofill,
-select:-webkit-autofill:hover,
-select:-webkit-autofill:focus {
-	-webkit-box-shadow: 0 0 0px 1000px $primary-light inset;
-	@include transition($transition-md, background-color);
-}
-
-// prevent images from stretching with flex 
-
-img {
-	align-self: center;
-	width: 100%;
-	flex-shrink: 0;
-}
-
-// lists
-
-ul {
-	list-style: disc;
-}
-
-li {
-	margin-left: $spacing-md;
-
-	& + & {
-		padding-top: $spacing-xs;
-	}
-}
-
-// buttons and links
-
-button,
-a {
-	outline-color: $primary;
-	cursor: pointer;
-}
-
-// iframe
-
-iframe {
-	display: block; // remove bottom spacing
-	width: 100%;
-	border-radius: $border-radius-md;
-	border: $border;
-}
-
-strong {
-	font-weight: $font-bold;
-}
-
-// z-index
-
-@for $i from 0 through 9 {
-	.z-index--#{$i} { z-index: $i; }
-}
-
-// background
-
-.background-cover {
-	@include background(50% 50%, cover);
-}

package/dist/styles/common/_mixins.scss

@@ -1,162 +0,0 @@
-// —————————————————————————————————————————————————————————————————
-// 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-click {
-	@media not (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-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: 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/dist/styles/common/_reset.scss

@@ -1,143 +0,0 @@
-// —————————————————————————————————————————————————————————————————
-// 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: $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 $primary;
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// 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

@@ -1,249 +0,0 @@
-// —————————————————————————————————————————————————————————————————
-// 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: mix($contrast, $main, 90%) !default;
-$grey-80: mix($contrast, $main, 80%) !default;
-$grey-70: mix($contrast, $main, 70%) !default;
-$grey-60: mix($contrast, $main, 60%) !default;
-$grey-50: mix($contrast, $main, 50%) !default;
-$grey-40: mix($contrast, $main, 40%) !default;
-$grey-30: mix($contrast, $main, 30%) !default;
-$grey-20: mix($contrast, $main, 20%) !default;
-$grey-10: mix($contrast, $main, 10%) !default;
-$grey-5: 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: #0076AC !default;
-$primary-light: mix($main, $primary, 70%) !default;
-$primary-dark: mix($contrast, $primary, 50%) !default;
-$primary-contrast: $text-contrast !default;
-
-$secondary: #C24889 !default;
-$secondary-light: mix($main, $secondary, 70%) !default;
-$secondary-dark: mix($contrast, $secondary, 50%) !default;
-$secondary-contrast: $text-contrast !default;
-
-// feedback
-
-$success: #27AE60 !default;
-$success-light: mix($main, $success, 70%) !default;
-$success-dark: mix($contrast, $success, 50%) !default;
-$success-contrast: $text-contrast !default;
-
-$info: #17A0CC !default;
-$info-light: mix($main, $info, 70%) !default;
-$info-dark: mix($contrast, $info, 50%) !default;
-$info-contrast: $text-contrast !default;
-
-$warning: #FFDC46 !default;
-$warning-light: mix($main, $warning, 70%) !default;
-$warning-dark: mix($contrast, $warning, 50%) !default;
-$warning-contrast: $text !default;
-
-$error: #EB5757 !default;
-$error-light: mix($main, $error, 70%) !default;
-$error-dark: mix($contrast, $error, 50%) !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.12) !default;
-$hover-contrast: rgba($text-contrast, 0.12) !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: str-index($string, $search);
-  
-  @if $index {
-    @return str-replace(
-      str-slice($string, 1, $index - 1) + $replace + str-slice($string, $index + str-length($search), str-length($string)),
-      $search,
-      $replace
-    );
-  }
-
-  @return $string;
-}
-@function clean-string($string) {
-  @return str-replace(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;