pallote-css 0.6.0 → 0.7.0

package/styles/common/_editor.scss

@@ -0,0 +1,181 @@
+@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: 1rem 2rem;
+    border-radius: variables.$border-radius-md;
+
+    &:before {
+      @include mixins.pseudo-element('”', -1rem, auto, auto, -.5rem, auto, auto);
+      font-size: 7rem;
+      color: variables.$primary;
+      line-height: 1;
+    }
+
+    &:not(:first-child) {
+      margin-top: 1.5rem;
+      margin-bottom: 1.5rem;
+    }
+  }
+
+  // —————————————————————————————————————————————————————————————————
+  // lists
+  // —————————————————————————————————————————————————————————————————
+
+  ol,
+  ul {
+    margin-left: 1rem;
+  }
+
+  ol { list-style: decimal; }
+  ul { list-style: disc; }
+
+  li + li { margin-top: .25rem; }
+
+  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 .25rem; }
+    }
+  }
+
+  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: .25rem .5rem;
+    font-size: 0.875rem;
+    font-weight: bold;
+    color: variables.$text-alt;
+  }
+
+  td {
+    padding: .25rem .5rem .5rem;
+  }
+}

package/styles/common/_fontface.scss

@@ -0,0 +1,31 @@
+@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/styles/common/_functions.scss

@@ -0,0 +1,11 @@
+// —————————————————————————————————————————————————————————————————
+// 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/styles/common/_global.scss

@@ -0,0 +1,157 @@
+@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: 1rem;
+	
+	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: 1rem;
+
+	& + & {
+		padding-top: .25rem;
+	}
+}
+
+// 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/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/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;
+}