pallote-css 0.4.0 → 0.6.0

package/dist/styles/common/_editor.scss

@@ -1,181 +0,0 @@
-@use 'mixins';
-@use 'variables';
-@use '../utilities/text';
-
-// —————————————————————————————————————————————————————————————————
-// text
-// lists
-// table
-// —————————————————————————————————————————————————————————————————
-
-.editor, %editor {
-  max-width: variables.$max-width-editor;
-
-  // —————————————————————————————————————————————————————————————————
-  // text
-  // —————————————————————————————————————————————————————————————————
-
-  h2 { @extend %h3; }
-  h3 { @extend %h4; }
-  h4 { @extend %h5; }
-  h5 { @extend %h6; }
-  h6 { @extend %subtitle; }
-  blockquote { @extend %subtitle; }
-
-  h2 {
-    color: variables.$primary;
-  }
-
-  h2, h3, h4, h5, h6 {
-    
-    &:not(:first-child) { margin-top: 1.5em; }
-    &:not(:last-child) { margin-bottom: .75em; }
-  }
-
-  p,
-  ol, ul,
-  p + a, a + p {
-
-    &:not(:first-child) { margin-top: 0.75em; }
-  }
-
-  .highlighter-rouge,
-  .alert {
-    margin-top: 1.5rem;
-    margin-bottom: 1.5rem;
-    width: fit-content;
-    white-space: nowrap;
-  }
-
-  a {
-    color: variables.$primary;
-    text-decoration: underline;
-  }
-
-  strong {
-    font-weight: variables.$font-bold;
-  }
-
-  em {
-    font-style: italic;
-  }
-
-  blockquote {
-    position: relative;
-    background-color: variables.$background-paper;
-    padding: variables.$spacing-md variables.$spacing-lg;
-    border-radius: variables.$border-radius-md;
-
-    &:before {
-      @include mixins.pseudo-element('”', -(variables.$spacing-md), auto, auto, -(variables.$spacing-sm), auto, auto);
-      font-size: variables.$spacing-xxl;
-      color: variables.$primary;
-      line-height: 1;
-    }
-
-    &:not(:first-child) {
-      margin-top: 1.5rem;
-      margin-bottom: 1.5rem;
-    }
-  }
-
-  // —————————————————————————————————————————————————————————————————
-  // lists
-  // —————————————————————————————————————————————————————————————————
-
-  ol,
-  ul {
-    margin-left: variables.$spacing-md;
-  }
-
-  ol { list-style: decimal; }
-  ul { list-style: disc; }
-
-  li + li { margin-top: variables.$spacing-xs; }
-
-  li {
-
-    > ul {
-      margin-top: 0.25rem !important;
-      margin-left: 0;
-
-      li + li { margin-top: 0; }
-    }
-
-    &:not(:last-child) {
-
-      > ul {
-        margin-bottom: 0.25rem;
-      }
-    }
-  }
-
-  // —————————————————————————————————————————————————————————————————
-  // table
-  // —————————————————————————————————————————————————————————————————
-
-  .table {
-    width: 100%;
-    overflow: scroll;
-  }
-
-  table {
-    border-collapse: separate;
-    border: variables.$border;
-    border-radius: variables.$border-radius-sm;
-    width: 100%;
-
-    &.table--dense {
-
-      th { font-size: 0.65rem; }
-      td { font-size: 0.75rem;; }
-      td, th { padding: 1px variables.$spacing-xs; }
-    }
-  }
-
-  thead {
-    background-color: variables.$background-paper;
-
-    tr:first-child {
-
-      th {
-        border-top: none;
-
-        &:first-of-type { border-top-left-radius: variables.$border-radius-sm; }
-        &:last-of-type { border-top-right-radius: variables.$border-radius-sm; }
-      }
-    }
-  }
-
-  tbody {
-
-    tr:last-child {
-
-      th, td {
-
-        &:first-of-type { border-bottom-left-radius: variables.$border-radius-sm; }
-        &:last-of-type { border-bottom-right-radius: variables.$border-radius-sm; }
-      }
-    }
-  }
-
-  td,
-  th {
-    border-top: variables.$border;
-    
-    &:not(:first-child) {
-      border-left: variables.$border;
-    }
-  }
-
-  th {
-    padding: variables.$spacing-xs variables.$spacing-sm;
-    font-size: 0.875rem;
-    font-weight: bold;
-    color: variables.$text-alt;
-  }
-
-  td {
-    padding: variables.$spacing-xs variables.$spacing-sm variables.$spacing-sm;
-  }
-}

package/dist/styles/common/_fontface.scss

@@ -1,31 +0,0 @@
-@use 'mixins';
-@use 'variables';
-
-// In order to have a clean a easy to use font, give the same font-family name to all styles.
-// You can then sort them by using the font-style (normal or italic) property
-
-// —————————————————————————————————————————————————————————————————
-// list of styles and their weight equivalent
-// —————————————————————————————————————————————————————————————————
-// style name               weight  variable
-// —————————————————————————————————————————————————————————————————
-// thin, hairline           100     $thin
-// extralight, ultralight   200     $extralight
-// light                    300     $light
-// normal, regular          400     $regular
-// medium                   500     $medium
-// semibold, demibold       600     $semibold
-// bold                     700     $bold
-// extrabold, ultrabold     800     $extrabold
-// black, heavy             900     $contrast
-// —————————————————————————————————————————————————————————————————
-
-// —————————————————————————————————————————————————————————————————
-// barlow
-// —————————————————————————————————————————————————————————————————
-
-@include mixins.fontface(variables.$font, variables.$font-clean/regular, variables.$font-regular, normal);
-@include mixins.fontface(variables.$font, variables.$font-clean/regularitalic, variables.$font-regular, italic);
-
-@include mixins.fontface(variables.$font, variables.$font-clean/semibold, variables.$font-bold, normal);
-@include mixins.fontface(variables.$font, variables.$font-clean/semibolditalic, variables.$font-bold, italic);

package/dist/styles/common/_functions.scss

@@ -1,11 +0,0 @@
-// —————————————————————————————————————————————————————————————————
-// trim white spaces
-// —————————————————————————————————————————————————————————————————
-
-@function str-remove-whitespace($str) {
-  @while (str-index($str, ' ') != null) {
-    $index: str-index($str, ' ');
-    $str: "#{str-slice($str, 0, $index - 1)}#{str-slice($str, $index + 1)}";
-  }
-  @return $str;
-}

package/dist/styles/common/_global.scss

@@ -1,157 +0,0 @@
-@use 'mixins';
-@use 'variables';
-
-html {
-	scroll-behavior: smooth;
-}
-
-body {
-	font-family: variables.$font, variables.$font-fallback;
-	font-size: 16px;
-	line-height: 1.5;
-	font-weight: variables.$font-regular;
-	background-color: variables.$background-default;
-	color: variables.$text;
-	// needed for footer margin-top: auto if content smaller than viewport height
-	display: flex;
-	flex-direction: column;
-	min-height: 100vh;
-	
-	&:after {
-		transition: opacity variables.$transition-md;
-		content: '';
-		position: fixed;
-		background-color: variables.$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: variables.$spacing-md;
-	
-	iframe, object, embed { 
-		position: absolute; 
-		top: 0; 
-		left: 0; 
-		width: 100%; 
-		height: 100%; 
-	}
-}        
-
-// text selection
-::-moz-selection {
-	background: variables.$primary;
-	color: variables.$primary-contrast;
-}
-
-::selection {
-	background: variables.$primary;
-	color: variables.$primary-contrast;
-}
-
-::-moz-selection {
-	background: variables.$primary;
-	color: variables.$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 variables.$primary-light inset;
-	@include mixins.transition(variables.$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: variables.$spacing-md;
-
-	& + & {
-		padding-top: variables.$spacing-xs;
-	}
-}
-
-// buttons and links
-
-button,
-a {
-	outline-color: variables.$primary;
-	cursor: pointer;
-}
-
-// iframe
-
-iframe {
-	display: block; // remove bottom spacing
-	width: 100%;
-	border-radius: variables.$border-radius-md;
-	border: variables.$border;
-}
-
-strong {
-	font-weight: variables.$font-bold;
-}
-
-// z-index
-
-@for $i from 0 through 9 {
-	.z-index--#{$i} { z-index: $i; }
-}
-
-// background
-
-.background-cover {
-	@include mixins.background(50% 50%, cover);
-}

package/dist/styles/common/_mixins.scss

@@ -1,164 +0,0 @@
-@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

@@ -1,145 +0,0 @@
-@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;
-}