pallote-css 0.0.0 → 0.2.0

package/dist/pallote.min.js

@@ -0,0 +1 @@
+document.addEventListener("DOMContentLoaded",function(){var acc=document.getElementsByClassName("accordion__control");var panels=document.getElementsByClassName("accordion__content");var activeAccordionItem=document.querySelector(".accordion__item--active");for(var i=0;i<acc.length;i++){acc[i].addEventListener("click",function(){var panel=this.nextElementSibling;var isActive=this.parentElement.classList.contains("accordion__item--active");closeAllPanels();if(!isActive){this.parentElement.classList.add("accordion__item--active");panel.style.maxHeight=panel.scrollHeight+"px"}})}if(activeAccordionItem){var activePanel=activeAccordionItem.querySelector(".accordion__content");activeAccordionItem.classList.add("accordion__item--active");activePanel.style.maxHeight=activePanel.scrollHeight+"px"}function closeAllPanels(){for(var i=0;i<panels.length;i++){var panel=panels[i];var accordionBtn=panel.previousElementSibling;if(accordionBtn.parentElement.classList.contains("accordion__item--active")){accordionBtn.parentElement.classList.remove("accordion__item--active");panel.style.maxHeight=null}}}});var buttonDisabledElement=document.querySelector(".button--disabled");if(buttonDisabledElement!==null){buttonDisabledElement.setAttribute("disabled","disabled")}function closeCookieNotice(){const nowDate=new Date;const expireDate=new Date(nowDate.setDate(nowDate.getDate()+30)).toUTCString();document.cookie="cookie_notice=0;path=/;expires="+expireDate+";SameSite=Lax;";document.getElementById("cookie").classList.add("js-cookie-accepted")}document.addEventListener("DOMContentLoaded",function(){const cookie_notice=("; "+document.cookie).split("; cookie_notice=").pop().split(";")[0];if(cookie_notice!=="0"){document.getElementById("cookie").style.display="flex"}});var inputFocusElement=document.querySelector(".input--focused .input__control");if(inputFocusElement!==null){inputFocusElement.focus()}var inputDisabledElement=document.querySelector(".input--disabled .input__control");if(inputDisabledElement!==null){inputDisabledElement.setAttribute("disabled","disabled")}var inputRequiredElement=document.querySelector(".input--required .input__control");if(inputRequiredElement!==null){inputRequiredElement.setAttribute("required","required")}const dropdownTriggers=document.querySelectorAll(".nav__trigger");dropdownTriggers.forEach(trigger=>{trigger.addEventListener("click",function(e){e.stopPropagation();const dropdown=this.parentElement;dropdown.classList.toggle("js-show")})});document.addEventListener("click",function(e){const dropdowns=document.querySelectorAll(".nav__item--dropdown");dropdowns.forEach(dropdown=>{if(!dropdown.contains(e.target)){dropdown.classList.remove("js-show")}})});const body=document.querySelector("body");const navbar=document.querySelector(".navbar");const buttonNavbar=document.querySelector(".navbar__button");const sidebar=document.querySelector(".sidebar");const buttonSidebarOpen=document.querySelector(".sidebar__button");const buttonSidebarClose=document.querySelector(".sidebar__button--close");if(buttonNavbar!==null){buttonNavbar.addEventListener("click",function(){buttonNavbar.classList.toggle("js-opened");navbar.classList.toggle("js-opened");body.classList.toggle("js-navbar")})}if(buttonSidebarOpen!==null){buttonSidebarOpen.addEventListener("click",function(){sidebar.classList.add("js-opened");body.classList.add("js-sidebar");buttonNavbar.classList.remove("js-opened");navbar.classList.remove("js-opened");body.classList.remove("js-navbar")});buttonSidebarClose.addEventListener("click",function(){sidebar.classList.remove("js-opened");body.classList.remove("js-sidebar")})}function tabify(element){const header=element.querySelector(".tabs__controls");const content=element.querySelector(".tabs__content");const tabHeaders=[...header.children];const tabContents=[...content.children];tabContents.forEach(x=>x.style.display="none");let current_tab_index=-1;function setTab(index){if(current_tab_index>-1){tabHeaders[current_tab_index].classList.remove("tabs__item--active");tabContents[current_tab_index].style.display="none"}tabHeaders[index].classList.add("tabs__item--active");tabContents[index].style.display="flex";current_tab_index=index}default_tab_index=tabHeaders.findIndex(x=>{return[...x.classList].indexOf("tabs__item--default")>-1});default_tab_index=default_tab_index===-1?0:default_tab_index;setTab(default_tab_index);tabHeaders.forEach((x,i)=>x.onclick=event=>setTab(i))}[...document.querySelectorAll(".tabs")].forEach(x=>tabify(x));

package/dist/pallote.scss

@@ -0,0 +1,38 @@
+@import
+
+	"styles/common/_variables",
+	"styles/common/_mixins",
+	"styles/common/_reset",
+	"styles/common/_editor",
+	"styles/common/_fontface",
+	"styles/common/_global",
+
+	"styles/utilities/_color",
+	"styles/utilities/_global",
+	"styles/utilities/_text",
+
+	"styles/components/_text",
+	"styles/components/_accordion",
+	"styles/components/_alert",
+	"styles/components/_breadcrumbs",
+	"styles/components/_button",
+	"styles/components/_buttons",
+	"styles/components/_card",
+	"styles/components/_detail",
+	"styles/components/_divider",
+	"styles/components/_form",
+	"styles/components/_grid",
+	"styles/components/_input",
+	"styles/components/_link",
+	"styles/components/_list",
+	"styles/components/_nav",
+	"styles/components/_navbar",
+	"styles/components/_page",
+	"styles/components/_section",
+	"styles/components/_sidebar",
+	"styles/components/_snippet",
+	"styles/components/_status",
+	"styles/components/_switch",
+	"styles/components/_tabs",
+	"styles/components/_tag"
+;

package/dist/scripts/accordion.js

@@ -0,0 +1,42 @@
+document.addEventListener("DOMContentLoaded", function() {
+  var acc = document.getElementsByClassName("accordion__control");
+  var panels = document.getElementsByClassName("accordion__content");
+  var activeAccordionItem = document.querySelector(".accordion__item--active");
+
+  for (var i = 0; i < acc.length; i++) {
+    acc[i].addEventListener("click", function() {
+      var panel = this.nextElementSibling;
+      
+      // Check if the clicked accordion__control is already active
+      var isActive = this.parentElement.classList.contains("accordion__item--active");
+
+      // Close all panels
+      closeAllPanels();
+
+      // If the clicked accordion__control is not already active, open it
+      if (!isActive) {
+        // Toggle the clicked accordion__control
+        this.parentElement.classList.add("accordion__item--active");
+        panel.style.maxHeight = panel.scrollHeight + "px";
+      }
+    });
+  }
+
+  // If any accordion item has the class accordion__item--active, expand it on page load
+  if (activeAccordionItem) {
+    var activePanel = activeAccordionItem.querySelector(".accordion__content");
+    activeAccordionItem.classList.add("accordion__item--active");
+    activePanel.style.maxHeight = activePanel.scrollHeight + "px";
+  }
+
+  function closeAllPanels() {
+    for (var i = 0; i < panels.length; i++) {
+      var panel = panels[i];
+      var accordionBtn = panel.previousElementSibling;
+      if (accordionBtn.parentElement.classList.contains("accordion__item--active")) {
+        accordionBtn.parentElement.classList.remove("accordion__item--active");
+        panel.style.maxHeight = null;
+      }
+    }
+  }
+});

package/dist/scripts/button.js

@@ -0,0 +1,5 @@
+// add 'disabled' attribute to the button element
+var buttonDisabledElement = document.querySelector('.button--disabled');
+if (buttonDisabledElement !== null) {
+  buttonDisabledElement.setAttribute('disabled', 'disabled');
+}

package/dist/scripts/cookie.js

@@ -0,0 +1,15 @@
+function closeCookieNotice() {
+  const nowDate = new Date();
+  const expireDate = new Date(nowDate.setDate(nowDate.getDate() + 30)).toUTCString();
+
+  document.cookie = "cookie_notice=0;path=/;expires=" + expireDate + ";SameSite=Lax;";
+  document.getElementById("cookie").classList.add("js-cookie-accepted");
+};
+
+document.addEventListener("DOMContentLoaded", function() {
+  const cookie_notice = ('; ' + document.cookie).split('; cookie_notice=').pop().split(';')[0];
+
+  if (cookie_notice !== "0") {
+    document.getElementById("cookie").style.display = "flex";
+  }
+});

package/dist/scripts/input.js

@@ -0,0 +1,24 @@
+// focus an input element on page load
+var inputFocusElement = document.querySelector('.input--focused .input__control');
+if (inputFocusElement !== null) {
+  inputFocusElement.focus();
+}
+
+// add 'disabled' attribute to the input element
+var inputDisabledElement = document.querySelector('.input--disabled .input__control');
+if (inputDisabledElement !== null) {
+  inputDisabledElement.setAttribute('disabled', 'disabled');
+}
+
+// add 'required' attribute to the input element
+var inputRequiredElement = document.querySelector('.input--required .input__control');
+if (inputRequiredElement !== null) {
+  inputRequiredElement.setAttribute('required', 'required');
+}
+
+
+// Update disabled and required above to add attributes when used for checkboxes and radios
+
+// Make functional, careful that the other functions still work after
+// var checkboxDisabledElement = document.querySelector('.checkbox--disabled .checkbox__control');
+// checkboxDisabledElement.setAttribute('disabled', 'disabled');

package/dist/scripts/nav.js

@@ -0,0 +1,22 @@
+// Get all dropdown trigger buttons
+const dropdownTriggers = document.querySelectorAll('.nav__trigger');
+
+// Add click event listener to each trigger button
+dropdownTriggers.forEach(trigger => {
+  trigger.addEventListener('click', function(e) {
+    e.stopPropagation(); // Prevents the click event from bubbling up
+
+    const dropdown = this.parentElement; // Get parent dropdown element
+    dropdown.classList.toggle('js-show'); // Toggle show class
+  });
+});
+
+// Add click event listener to document to close dropdowns when clicking outside
+document.addEventListener('click', function(e) {
+  const dropdowns = document.querySelectorAll('.nav__item--dropdown');
+  dropdowns.forEach(dropdown => {
+    if (!dropdown.contains(e.target)) {
+      dropdown.classList.remove('js-show'); // Close dropdown
+    }
+  });
+});

package/dist/scripts/navbar.js

@@ -0,0 +1,28 @@
+const body = document.querySelector('body');
+const navbar = document.querySelector('.navbar');
+const buttonNavbar = document.querySelector('.navbar__button');
+const sidebar = document.querySelector('.sidebar');
+const buttonSidebarOpen = document.querySelector('.sidebar__button');
+const buttonSidebarClose = document.querySelector('.sidebar__button--close');
+
+if (buttonNavbar !== null) {
+  buttonNavbar.addEventListener('click', function () {
+    buttonNavbar.classList.toggle('js-opened');
+    navbar.classList.toggle('js-opened');
+    body.classList.toggle('js-navbar');
+  });
+}
+
+if (buttonSidebarOpen !== null) {
+  buttonSidebarOpen.addEventListener('click', function () {
+    sidebar.classList.add('js-opened');
+    body.classList.add('js-sidebar');
+    buttonNavbar.classList.remove('js-opened');
+    navbar.classList.remove('js-opened');
+    body.classList.remove('js-navbar');
+  });
+  buttonSidebarClose.addEventListener('click', function () {
+    sidebar.classList.remove('js-opened');
+    body.classList.remove('js-sidebar');
+  });
+}

package/dist/scripts/tabs.js

@@ -0,0 +1,30 @@
+function tabify( element ){
+  const header = element.querySelector('.tabs__controls');
+  const content = element.querySelector('.tabs__content');
+  const tabHeaders = [...header.children];
+  const tabContents = [...content.children];
+  tabContents.forEach( x => x.style.display = 'none');
+  let current_tab_index = -1;
+
+  function setTab( index ){
+    if( current_tab_index > -1 ){
+      tabHeaders[current_tab_index].classList.remove('tabs__item--active');
+      tabContents[ current_tab_index ].style.display = 'none';
+    }
+    tabHeaders[index].classList.add('tabs__item--active');
+    tabContents[ index ].style.display = 'flex';
+    current_tab_index = index;
+  }
+
+  default_tab_index = tabHeaders.findIndex( x => {
+    return [...x.classList].indexOf('tabs__item--default') > -1;
+  });
+
+  default_tab_index = default_tab_index === -1 ? 0 : default_tab_index;
+  setTab( default_tab_index );
+  tabHeaders.forEach((x,i) => x.onclick = event => setTab(i));
+}
+
+  // this is where the magic happens!
+[...document.querySelectorAll('.tabs')]
+  .forEach(x => tabify(x));

package/{assets/_sass → dist/styles}/common/_editor.scss

@@ -40,6 +40,7 @@
     margin-top: 1.5rem;
     margin-bottom: 1.5rem;
     width: fit-content;
+    white-space: nowrap;
   }
 
   a {
@@ -109,10 +110,16 @@
   // table
   // —————————————————————————————————————————————————————————————————
 
+  .table {
+    width: 100%;
+    overflow: scroll;
+  }
+
   table {
     border-collapse: separate;
     border: $border;
     border-radius: $border-radius-sm;
+    width: 100%;
 
     &.table--dense {
 
@@ -150,17 +157,21 @@
 
   td,
   th {
-    padding: $spacing-xs $spacing-sm $spacing-sm;
     border-top: $border;
-
+    
     &:not(:first-child) {
       border-left: $border;
     }
   }
 
   th {
+    padding: $spacing-xs $spacing-sm;
     font-size: 0.875rem;
     font-weight: bold;
     color: $text-alt;
   }
+
+  td {
+    padding: $spacing-xs $spacing-sm $spacing-sm;
+  }
 }

package/{assets/_sass → dist/styles}/common/_global.scss

@@ -14,8 +14,32 @@ body {
 	flex-direction: column;
 	min-height: 100vh;
 	
-	&.js-freeze {
+	&: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;
 	}
 }
 
@@ -46,17 +70,17 @@ footer {
 // text selection
 ::-moz-selection {
 	background: $primary;
-	color: $primary-text;
+	color: $primary-contrast;
 }
 
 ::selection {
 	background: $primary;
-	color: $primary-text;
+	color: $primary-contrast;
 }
 
 ::-moz-selection {
 	background: $primary;
-	color: $primary-text;
+	color: $primary-contrast;
 }
 
 // remove autocomplete from webkit browsers
@@ -122,9 +146,6 @@ strong {
 	.z-index--#{$i} { z-index: $i; }
 }
 
-.cookie { z-index: 10; }
-header { z-index: 11; }
-
 // background
 
 .background-cover {

package/{assets/_sass → dist/styles}/common/_mixins.scss

@@ -54,7 +54,7 @@
 
 	@font-face {
 		font-family: $font-name;
-		src: url('../fonts/' + $font-file + '.woff2') format('woff2');
+		src: url($fonts-path + $font-file + '.woff2') format('woff2');
 		font-weight: $font-weight;
 		font-style: $font-style;
 		font-display: swap;

package/{assets/_sass → dist/styles}/common/_variables.scss

@@ -1,4 +1,5 @@
 // —————————————————————————————————————————————————————————————————
+// dependencies
 // color palette
 // spacing
 // typography
@@ -6,14 +7,21 @@
 // misc
 // —————————————————————————————————————————————————————————————————
 
+// —————————————————————————————————————————————————————————————————
+// dependencies
+// —————————————————————————————————————————————————————————————————
+
+$fonts-path: '../../assets/fonts/';
+$icons-path: '../../assets/icons/';
+
 // —————————————————————————————————————————————————————————————————
 // color palette
 // —————————————————————————————————————————————————————————————————
 
 // main
 
-$white: #ffffff !default;
-$black: #000a1e !default;
+$white: #FFFFFF !default;
+$black: #000A1E !default;
 
 // grey
 
@@ -40,45 +48,45 @@ $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;
+$primary: #00F3FF !default;
+$primary-light: mix($white, $primary, 70%) !default;
+$primary-dark: mix($black, $primary, 50%) !default;
+$primary-contrast: $text-contrast !default;
 
-$secondary-light: #B1B9D4 !default;
-$secondary: #4D5C8D !default;
-$secondary-dark: #3D4971 !default;
-$secondary-text: $text !default;
+$secondary: #E7FC00 !default;
+$secondary-light: mix($white, $secondary, 70%) !default;
+$secondary-dark: mix($black, $secondary, 50%) !default;
+$secondary-contrast: $text-contrast !default;
 
-$highlight-light: #F9D7B8 !default;
-$highlight: #F2994A !default;
-$highlight-dark: #EF7910 !default;
-$highlight-text: $text-contrast !default;
+$highlight: #FF74E6 !default;
+$highlight-light: mix($white, $highlight, 70%) !default;
+$highlight-dark: mix($black, $highlight, 50%) !default;
+$highlight-contrast: $text-contrast !default;
 
 // feedback
 
-$success-light: #E7F9EE !default;
 $success: #27AE60 !default;
-$success-dark: #1C7C44 !default;
-$success-text: #155F34 !default;
+$success-light: mix($white, $success, 70%) !default;
+$success-dark: mix($black, $success, 50%) !default;
+$success-background: mix($black, $success, 80%) !default;
 $success-contrast: $text !default;
 
-$info-light: #E9F8FD !default;
 $info: #17A0CC !default;
-$info-dark: #117798 !default;
-$info-text: #0D5A72 !default;
+$info-light: mix($white, $info, 70%) !default;
+$info-dark: mix($black, $info, 50%) !default;
+$info-background: mix($black, $info, 80%) !default;
 $info-contrast: $text !default;
 
-$warning-light: #FFFAE5 !default;
 $warning: #FFDC46 !default;
-$warning-dark: #E5BA00 !default;
-$warning-text: #685400 !default;
+$warning-light: mix($white, $warning, 70%) !default;
+$warning-dark: mix($black, $warning, 50%) !default;
+$warning-background: mix($black, $warning, 80%) !default;
 $warning-contrast: $text-contrast !default;
 
-$error-light: #FCE7E7 !default;
 $error: #EB5757 !default;
-$error-dark: #D31919 !default;
-$error-text: #9C1212 !default;
+$error-light: mix($white, $error, 70%) !default;
+$error-dark: mix($black, $error, 50%) !default;
+$error-background: mix($black, $error, 80%) !default;
 $error-contrast: $text !default;
 
 // background
@@ -90,11 +98,14 @@ $background-paper: $grey-90 !default;
 
 $border-color: rgba($text, 0.2) !default;
 $border: 1px solid $border-color !default;
+$border-color-contrast: rgba($text-contrast, 0.2) !default;
+$border-contrast: 1px solid $border-color !default;
 
 $hover: rgba($text, 0.12) !default;
+$hover-contrast: rgba($text-contrast, 0.12) !default;
 
-$backdrop: rgba($text-contrast, 0.8) !default;
-$backdrop-contrast: rgba($text, 0.2) !default;
+$overlay: rgba($text-contrast, 0.8) !default;
+$overlay-contrast: rgba($text, 0.2) !default;
 
 // —————————————————————————————————————————————————————————————————
 // spacing
@@ -114,13 +125,14 @@ $max-width-subtitle: $spacing-xxl*4 !default;
 $max-width-editor: $spacing-xxl*6 !default;
 
 $navbar-height: 4rem !default;
+$navbar-height-sm: 3rem !default;
+$nav-item: $spacing-md !default;
 
 // —————————————————————————————————————————————————————————————————
 // typography
 // —————————————————————————————————————————————————————————————————
 
 // typefaces
-
 $font: "Barlow", Arial, sans-serif !default;
 
 // weight

package/dist/styles/components/_accordion.scss

@@ -0,0 +1,130 @@
+// —————————————————————————————————————————————————————————————————
+// elements
+// size
+// transparent
+// active
+// —————————————————————————————————————————————————————————————————
+
+// —————————————————————————————————————————————————————————————————
+// elements
+// —————————————————————————————————————————————————————————————————
+
+.accordion {
+  width: 100%;
+
+  &__item {
+    position: relative;
+    background-color: $hover;
+    width: 100%;
+  }
+
+  &__control,
+  &__content {
+    transition: padding $transition-md;
+    will-change: padding;
+  }
+
+  &__control {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    cursor: pointer;
+
+    &:after {
+      content: url($icons-path + '/phosphor/caret-down.svg');
+      transition: transform $transition-md;
+      will-change: transform;
+      position: absolute;
+      height: $spacing-md;
+      width: $spacing-md;
+      transform-origin: center 60%;
+      pointer-events: none;
+    }
+  }
+
+  &__content {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height $transition-md;
+    will-change: max-height;
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// size
+// —————————————————————————————————————————————————————————————————
+
+@mixin 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 size(md, $spacing-sm);
+  &--sm { @include size(sm, $spacing-xs); }
+  &--lg { @include size(lg, $spacing-md); }
+}
+
+// —————————————————————————————————————————————————————————————————
+// transparent
+// —————————————————————————————————————————————————————————————————
+
+.accordion--transparent {
+
+  .accordion__item {
+    transition: background-color $transition-md, margin $transition-md;
+    will-change: background-color, margin;
+    background-color: transparent;
+
+    @include hover { background-color: $hover; }
+    &--active { background-color: $hover; }
+    
+    &:not(:last-child):not(.accordion__item--active) {
+      margin-bottom: 0;
+    }
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// active
+// —————————————————————————————————————————————————————————————————
+
+.accordion__item--active {
+
+  .accordion__control:after {
+    transform: rotate(180deg);
+  }
+}