@studio-helga/once-ui-core 1.7.8

package/dist/styles/flex.scss

@@ -0,0 +1,518 @@
+@use "../styles/breakpoints.scss" as breakpoints;
+
+.display-flex {
+  display: flex;
+}
+
+.display-inline-flex {
+  display: inline-flex;
+}
+
+.flex-column {
+  flex-direction: column;
+}
+
+.flex-row {
+  flex-direction: row;
+}
+
+.flex-column-reverse {
+  flex-direction: column-reverse;
+}
+
+.flex-row-reverse {
+  flex-direction: row-reverse;
+}
+
+.l-flex-show {
+  display: none;
+}
+
+.m-flex-show {
+  display: none;
+}
+
+.s-flex-show {
+  display: none;
+}
+
+.justify-start {
+  justify-content: flex-start;
+}
+  
+.justify-center {
+  justify-content: center;
+}
+
+.justify-end {
+  justify-content: flex-end;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.justify-around {
+  justify-content: space-around;
+}
+
+.justify-even {
+  justify-content: space-evenly;
+}
+
+.justify-stretch {
+  justify-content: stretch;
+}
+
+.align-start {
+  align-items: flex-start;
+}
+
+.align-center {
+  align-items: center;
+}
+
+.align-end {
+  align-items: flex-end;
+}
+
+.align-between {
+  align-items: space-between;
+}
+
+.align-around {
+  align-items: space-around;
+}
+
+.align-even {
+  align-items: space-evenly;
+}
+
+.align-stretch {
+  align-items: stretch;
+}
+
+.center {
+  align-items: center;
+  justify-content: center;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.flex-nowrap {
+  flex-wrap: nowrap;
+}
+
+.flex-wrap-reverse {
+  flex-wrap: wrap-reverse;
+}
+
+.flex-0 {
+  flex: 0;
+}
+
+.flex-1 {
+  flex: 1;
+}
+
+.flex-2 {
+  flex: 2;
+}
+
+.flex-3 {
+  flex: 3;
+}
+
+.flex-4 {
+  flex: 4;
+}
+
+.flex-5 {
+  flex: 5;
+}
+
+.flex-6 {
+  flex: 6;
+}
+
+.flex-7 {
+  flex: 7;
+}
+
+.flex-8 {
+  flex: 8;
+}
+
+.flex-9 { 
+  flex: 9;
+}
+
+.flex-10 {
+  flex: 10;
+}
+
+.flex-11 {
+  flex: 11;
+}
+
+.flex-12 {
+  flex: 12;
+}
+
+.flex-hide {
+  display: none;
+}
+
+.flex-show {
+  display: flex;
+}
+
+@include breakpoints.l {
+  .l-flex-hide {
+      display: none;
+  }
+
+  .l-flex-show {
+      display: flex;
+  }
+
+  .l-flex-column {
+      flex-direction: column;
+  }
+
+  .l-flex-row {
+      flex-direction: row;
+  }
+
+  .l-flex-column-reverse {
+      flex-direction: column-reverse;
+  }
+  
+  .l-flex-row-reverse {
+      flex-direction: row-reverse;
+  }
+
+  .l-justify-start {
+    justify-content: flex-start;
+  }
+    
+  .l-justify-center {
+    justify-content: center;
+  }
+  
+  .l-justify-end {
+    justify-content: flex-end;
+  }
+  
+  .l-justify-between {
+    justify-content: space-between;
+  }
+  
+  .l-justify-around {
+    justify-content: space-around;
+  }
+  
+  .l-justify-even {
+    justify-content: space-evenly;
+  }
+  
+  .l-justify-stretch {
+    justify-content: stretch;
+  }
+  
+  .l-align-start {
+    align-items: flex-start;
+  }
+  
+  .l-align-center {
+    align-items: center;
+  }
+  
+  .l-align-end {
+    align-items: flex-end;
+  }
+  
+  .l-align-between {
+    align-items: space-between;
+  }
+  
+  .l-align-around {
+    align-items: space-around;
+  }
+  
+  .l-align-even {
+    align-items: space-evenly;
+  }
+  
+  .l-align-stretch {
+    align-items: stretch;
+  }
+  
+  .l-center {
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+@include breakpoints.m {
+  .m-flex-hide {
+      display: none;
+  }
+
+  .m-flex-show {
+      display: flex;
+  }
+
+  .m-flex-column {
+      flex-direction: column;
+  }
+
+  .m-flex-row {
+      flex-direction: row;
+  }
+
+  .m-flex-column-reverse {
+      flex-direction: column-reverse;
+  }
+  
+  .m-flex-row-reverse {
+      flex-direction: row-reverse;
+  }
+
+  .m-justify-start {
+    justify-content: flex-start;
+  }
+    
+  .m-justify-center {
+    justify-content: center;
+  }
+  
+  .m-justify-end {
+    justify-content: flex-end;
+  }
+  
+  .m-justify-between {
+    justify-content: space-between;
+  }
+  
+  .m-justify-around {
+    justify-content: space-around;
+  }
+  
+  .m-justify-even {
+    justify-content: space-evenly;
+  }
+  
+  .m-justify-stretch {
+    justify-content: stretch;
+  }
+  
+  .m-align-start {
+    align-items: flex-start;
+  }
+  
+  .m-align-center {
+    align-items: center;
+  }
+  
+  .m-align-end {
+    align-items: flex-end;
+  }
+  
+  .m-align-between {
+    align-items: space-between;
+  }
+  
+  .m-align-around {
+    align-items: space-around;
+  }
+  
+  .m-align-even {
+    align-items: space-evenly;
+  }
+  
+  .m-align-stretch {
+    align-items: stretch;
+  }
+  
+  .m-center {
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+@include breakpoints.s {
+  .s-flex-hide {
+      display: none;
+  }
+
+  .s-flex-show {
+      display: flex;
+  }
+
+  .s-flex-column {
+      flex-direction: column;
+  }
+
+  .s-flex-row {
+      flex-direction: row;
+  }
+
+  .s-flex-column-reverse {
+      flex-direction: column-reverse;
+  }
+  
+  .s-flex-row-reverse {
+      flex-direction: row-reverse;
+  }
+  
+  .s-justify-start {
+    justify-content: flex-start;
+  }
+    
+  .s-justify-center {
+    justify-content: center;
+  }
+  
+  .s-justify-end {
+    justify-content: flex-end;
+  }
+  
+  .s-justify-between {
+    justify-content: space-between;
+  }
+  
+  .s-justify-around {
+    justify-content: space-around;
+  }
+  
+  .s-justify-even {
+    justify-content: space-evenly;
+  }
+  
+  .s-justify-stretch {
+    justify-content: stretch;
+  }
+  
+  .s-align-start {
+    align-items: flex-start;
+  }
+  
+  .s-align-center {
+    align-items: center;
+  }
+  
+  .s-align-end {
+    align-items: flex-end;
+  }
+  
+  .s-align-between {
+    align-items: space-between;
+  }
+  
+  .s-align-around {
+    align-items: space-around;
+  }
+  
+  .s-align-even {
+    align-items: space-evenly;
+  }
+  
+  .s-align-stretch {
+    align-items: stretch;
+  }
+  
+  .s-center {
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+@include breakpoints.xs {
+    .xs-flex-hide {
+        display: none;
+    }
+
+    .xs-flex-show {
+        display: flex;
+    }
+
+    .xs-flex-column {
+        flex-direction: column;
+    }
+
+    .xs-flex-row {
+        flex-direction: row;
+    }
+
+    .xs-flex-column-reverse {
+        flex-direction: column-reverse;
+    }
+
+    .xs-flex-row-reverse {
+        flex-direction: row-reverse;
+    }
+
+    .xs-justify-start {
+        justify-content: flex-start;
+    }
+
+    .xs-justify-center {
+        justify-content: center;
+    }
+
+    .xs-justify-end {
+        justify-content: flex-end;
+    }
+
+    .xs-justify-between {
+        justify-content: space-between;
+    }
+
+    .xs-justify-around {
+        justify-content: space-around;
+    }
+
+    .xs-justify-even {
+        justify-content: space-evenly;
+    }
+
+    .xs-justify-stretch {
+        justify-content: stretch;
+    }
+
+    .xs-align-start {
+        align-items: flex-start;
+    }
+
+    .xs-align-center {
+        align-items: center;
+    }
+
+    .xs-align-end {
+        align-items: flex-end;
+    }
+
+    .xs-align-between {
+        align-items: space-between;
+    }
+
+    .xs-align-around {
+        align-items: space-around;
+    }
+
+    .xs-align-even {
+        align-items: space-evenly;
+    }
+
+    .xs-align-stretch {
+        align-items: stretch;
+    }
+
+    .xs-center {
+        align-items: center;
+        justify-content: center;
+    }
+}

package/dist/styles/global.scss

@@ -0,0 +1,36 @@
+* {
+    box-sizing: border-box;
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    scroll-margin-top: var(--static-space-80);
+}
+
+img {
+    user-select: none;
+}
+
+/* SELECTION */
+::selection {
+    background: var(--neutral-on-background-medium);
+    color: var(--neutral-background-strong);
+}
+
+/* LINK */
+a:not(.button) {
+    color: var(--brand-on-background-medium);
+    text-decoration: none;
+    transition: var(--transition-micro-medium);
+    text-decoration-thickness: 1px;
+    text-underline-offset: 0.25em;
+    text-decoration-color: var(--neutral-border-strong) !important;
+
+    &:hover {
+        text-decoration: none;
+        color: var(--brand-on-background-strong);
+    }
+}