u2ui 1.0.0 → 1.4.5

package/class/table/table.css

@@ -1,126 +1,126 @@
-/*
-use aria?
-No, css is representation
-https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Grid_Role
-
-using grid:
-https://jsfiddle.net/x90cz65o/103/
-*/
-
-.u2-table {
-    display:table;
-    border-collapse:collapse;
-    width:100%;
-    /* todo?
-    width:-moz-available;
-    width:-webkit-fill-available;
-    border-spacing: 0; /* css-tables: border-spacing in not table-elements is already 0 *
-    font-variant-numeric: tabular-nums; /* in base.css but not for css-tables
-    */
-    --u2-Gap: 1rem;
-    --u2-Col-gap: var(--u2-Gap);
-    --u2-Row-gap: var(--u2-Gap);
-}
-.u2-table > * {
-    display:table-row-group;
-}
-.u2-table > * > * {
-    display:table-row;
-}
-.u2-table > * > * > * {
-    display:table-cell;
-    padding-inline: calc(var(--u2-Col-gap) / 2);
-    padding-block: calc(var(--u2-Row-gap) / 2);
-}
-
-
-/* .-Flex */
-.u2-table.-Flex {
-    display: block;
-}
-.u2-table.-Flex > * {
-    display: block;
-}
-.u2-table.-Flex > * > * { /* tr */
-    display:flex;
-    flex-wrap:wrap; /* only fields-table? */
-    align-items: baseline;
-    padding-block: calc(var(--u2-Row-gap) / 2);
-    padding-inline: 0;
-}
-.u2-table.-Flex > * > * > * { /* td */
-    flex-grow: 1;
-    flex-shrink:0;
-    flex-basis:10em;
-    min-width:0;
-    padding-block: 0;
-    padding-inline: calc(var(--u2-Col-gap) / 2);
-    border:0 !important; /* overwrite inherit from sticky, and border makes no sense if flex */
-    display:flex; /* new ok? better textarea-baseline */
-    flex-direction:column;
-}
-.u2-table.-Flex.-NoSideGaps > * > * { column-gap:var(--u2-Col-gap); }
-.u2-table.-Flex.-NoSideGaps > * > * > * { padding:0; }
-
-
-/* .-Fields */
-.u2-table.-Fields input:not([type=radio], [type=checkbox], [type=date], [type=color]),
-.u2-table.-Fields textarea {
-    width:100%;
-    width:-moz-available;
-    width:-webkit-fill-available;
-}
-.u2-table.-Fields > * > * > :first-child {
-    inline-size: var(--col-1-width, 9em);
-    flex-basis:var(--col-1-width, 9em);
-}
-/* would be good for textarea align *
-.u2-table.-Flex.-Fields > * > * > * {
-    display:flex;
-}
-*/
-
-.u2-table.-NoSideGaps > * > * > :first-child { padding-inline-start:0; }
-.u2-table.-NoSideGaps > * > * > :last-child { padding-inline-end:0; }
-
-
-
-/* .-Sticky beta! */
-.u2-table.-Sticky {
-    border-collapse: separate;
-    /*
-    Tables should be in a overflow:auto-wrapper (for mobile)
-    But it make sticky not work, because it gets a new sticky container :(
-    position:relative;
-    z-index:0;
-    xmax-height:60vh;
-    xoverflow:auto;
-    xdisplay:block;
-    */
-}
-.u2-table.-Sticky > thead > * > th {
-    position:sticky;
-    top:0;
-    background-color:var(--color-bg);
-}
-.u2-table.-Sticky > * > * > * { /* border-collapse:separate prevents borders on tr */
-    border-bottom:inherit;
-}
-
-/*
-.u2-table.-Sticky > tbody > * > th {
-    max-width:30%;
-    width:30%;
-    white-space: normal;
-}
-*/
-
-/*
-display:grid;(block) makes chrome first-textarea-line as baseline; makes but removes this from firefox needs inline
-bad hack, what if chrome implements two-values-display
-.u2-table textarea {
-    vertical-align: baseline;
-    display: block;
-    display: flex inline;
-}
+/*
+use aria?
+No, css is representation
+https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Grid_Role
+
+using grid:
+https://jsfiddle.net/x90cz65o/103/
+*/
+
+.u2-table {
+    /* --u2-Items-width: 11rem; */
+    display:table;
+    border-collapse:collapse;
+    width:100%;
+    /* todo?
+    width:-webkit-fill-available;
+    border-spacing: 0; /* css-tables: border-spacing in not table-elements is already 0 *
+    font-variant-numeric: tabular-nums; /* in base.css but not for css-tables
+    */
+    --u2-Gap: 1rem;
+    --u2-Col-gap: var(--u2-Gap);
+    --u2-Row-gap: var(--u2-Gap);
+}
+.u2-table > * {
+    display:table-row-group;
+}
+.u2-table > * > * {
+    display:table-row;
+}
+.u2-table > * > * > * {
+    display:table-cell;
+    padding-inline: calc(var(--u2-Col-gap) / 2);
+    padding-block: calc(var(--u2-Row-gap) / 2);
+    /*
+    width: var(--u2-Items-width, auto);
+    flex-basis: var(--u2-Items-width, auto);
+    */
+}
+
+
+/* .-Flex */
+.u2-table.-Flex {
+    display: block;
+}
+.u2-table.-Flex > * {
+    display: block;
+}
+.u2-table.-Flex > * > * { /* tr */
+    display:flex;
+    flex-wrap:wrap; /* only fields-table? */
+    align-items: baseline;
+    padding-block: calc(var(--u2-Row-gap) / 2);
+    padding-inline: 0;
+}
+.u2-table.-Flex > * > * > * { /* td */
+    flex: 7 1 11em;
+    min-width:0;
+    padding-block: 0;
+    padding-inline: calc(var(--u2-Col-gap) / 2);
+    border:0 !important; /* overwrite inherit from sticky, and border makes no sense if flex */
+    /* display:flex; /* new ok? better textarea-baseline / no it should not be flex, bad for content, mybe just -Fields ? */
+    /* flex-direction:column; */
+}
+.u2-table.-Flex.-NoSideGaps > * > * { column-gap:var(--u2-Col-gap); }
+.u2-table.-Flex.-NoSideGaps > * > * > * { padding:0; }
+
+
+/* .-Fields */
+.u2-table.-Fields input:not([type=radio], [type=checkbox], [type=date], [type=color], [type=time]),
+.u2-table.-Fields textarea,
+.u2-table.-Fields select {
+    width: 100%;
+    width: -webkit-fill-available;
+    width: stretch;
+    margin: 0;
+}
+.u2-table.-Fields > * > * > :first-child {
+    inline-size: var(--col-1-width, 9em);
+    flex-basis: var(--col-1-width, 9em);
+    flex-grow:1;
+}
+
+.u2-table.-NoSideGaps > * > * > :first-child { padding-inline-start:0; }
+.u2-table.-NoSideGaps > * > * > :last-child { padding-inline-end:0; }
+
+
+
+/* .-Sticky beta! */
+.u2-table.-Sticky {
+    border-collapse: separate;
+    /*
+    Tables should be in a overflow:auto-wrapper (for mobile)
+    But it make sticky not work, because it gets a new sticky container :(
+    position:relative;
+    z-index:0;
+    xmax-height:60vh;
+    xoverflow:auto;
+    xdisplay:block;
+    */
+}
+.u2-table.-Sticky > thead > * > th {
+    position:sticky;
+    top:0;
+    background-color:var(--color-bg); /* too strong */
+}
+.u2-table.-Sticky > * > * > * { /* border-collapse:separate prevents borders on tr */
+    border-bottom:inherit;
+}
+
+/*
+.u2-table.-Sticky > tbody > * > th {
+    max-inline-size:30%;
+    inline-size:30%;
+    white-space: normal;
+}
+*/
+
+/*
+display:grid;(block) makes chrome first-textarea-line as baseline; makes but removes this from firefox needs inline
+bad hack, what if chrome implements two-values-display
+.u2-table textarea {
+    vertical-align: baseline;
+    display: block;
+    display: flex inline;
+}
 /**/

package/class/unstyle/README.md

@@ -1,29 +1,31 @@
 # .u2-unstyle - class
-Unstyle elements eg. buttons
+Unstyle elements e.g. buttons
 
 Specificity: 0.1.0
 
 ## Usage
 
 ```html
-<button class=u2-unstyle>Unstyled Button</button>
+<button class=u2-unstyle>
+    Unstyled Button
+</button>
 ```
 
 ```css
-.u2-unstyle {
+.u2-unstyle {
 }
 ```
 
 ## Install
 
 ```html
-<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/class/unstyle/unstyle.min.css" rel=stylesheet>
+<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@main/class/unstyle/unstyle.css" rel=stylesheet>
 ```
 
 ## Demos
 
-[minimal.html](http://gcdn.li/u2ui/u2@main/class/unstyle/tests/minimal.html)  
 [test.html](http://gcdn.li/u2ui/u2@main/class/unstyle/tests/test.html)  
+[minimal.html](http://gcdn.li/u2ui/u2@main/class/unstyle/tests/minimal.html)  
 
 ## About
 

package/class/unstyle/unstyle.css

@@ -1,12 +1,14 @@
-.u2-unstyle {
-    background: unset;
-    color: unset;
-    margin: unset;
-    padding: unset;
-    display: inline;
-    border: unset;
-    border-radius:unset;
-}
-.u2-unstyle:is(:hover,:focus) {
-    background:unset;
-}
+.u2-unstyle.u2-unstyle.u2-unstyle {
+    background-color:unset;
+    color: unset;
+    margin: unset;
+    padding: unset;
+    display: inline;
+    border: unset;
+    border-radius: unset;
+    box-shadow: unset;
+    text-transform: unset;
+}
+.u2-unstyle.u2-unstyle.u2-unstyle:is(:hover,:focus) {
+    background-color:unset;
+}

package/class/width/README.md

@@ -1,45 +1,45 @@
-# .u2-width - class
-The main width of your layout
-
+# .u2-width - class
+The main width of your layout
+
 This class has a max-width of `var(--width)`.
 
 ## Features
 
-- Horizontal centered
-- Default paddings left and right of `1rem`
-- Padding adds spacing of save area `env(safe-area-inset-left)`
-- Nested elements using `.u2-width` have no padding.
+- Horizontal centered
+- Default paddings left and right of `1rem`
+- Padding adds spacing of save area `env(safe-area-inset-left)`
+- Nested elements using `.u2-width` have no padding.
 - Box-sizing is explicit **content-box** to define the width without its padding.
 
 ## Usage
 
 ```html
-<div class=u2-width>
-    content
-    <div class=u2-width>nested (no padding)</div>
+<div class=u2-width>
+    content
+    <div class=u2-width>nested (no padding)</div>
 </div>
 ```
 
 ```css
-html {
-    --width:20rem;
-}
-.u2-width {
-    outline:1px solid;
-    background-color:yellow;
+html {
+    --width:20rem;
+}
+.u2-width {
+    outline:1px solid;
+    background-color:yellow;
 }
 ```
 
 ## Install
 
 ```html
-<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/class/width/width.min.css" rel=stylesheet>
+<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@main/class/width/width.css" rel=stylesheet>
 ```
 
 ## Demos
 
-[minimal.html](http://gcdn.li/u2ui/u2@main/class/width/tests/minimal.html)  
 [test.html](http://gcdn.li/u2ui/u2@main/class/width/tests/test.html)  
+[minimal.html](http://gcdn.li/u2ui/u2@main/class/width/tests/minimal.html)  
 
 ## About
 

package/class/width/width.css

@@ -1,22 +1,21 @@
-
-.u2-width {
-    max-width:var(--width);
-    margin-left:auto;
-    margin-right:auto;
-    box-sizing:content-box;
-    padding-left:1rem;
-    padding-right:1rem;
-    padding-left:calc(1rem + env(safe-area-inset-left)); /* todo: test, better: max(1rem, env(safe-area-inset-left)) */
-    padding-right:calc(1rem + env(safe-area-inset-right));
-
-
-    /* if used as flexbox-col-item */
-    width: 100%;
-    width: -moz-available;
-    width: -webkit-fill-available;
-}
-/* remove padding on nested width-containers */
-.u2-width .u2-width {
-    padding-left:0;
-    padding-right:0;
-}
+
+.u2-width {
+    max-width:var(--width);
+    min-width:0;/* needed if used as flexbox-item */
+    margin-left:auto;
+    margin-right:auto;
+    box-sizing:content-box;
+    padding-left:1rem;
+    padding-right:1rem;
+    padding-left:calc(1rem + env(safe-area-inset-left)); /* todo: test, better: max(1rem, env(safe-area-inset-left)) */
+    padding-right:calc(1rem + env(safe-area-inset-right));
+
+    /* if used as flexbox-col-item */
+    width: 100%;
+    width: -webkit-fill-available;
+    width: stretch;
+}
+/* remove padding on nested width-containers */
+.u2-width .u2-width {
+    padding-inline:0;
+}

package/css/README.md

@@ -0,0 +1,11 @@
+# u2 - Design System - CSS
+Sophisticated CSS Base
+
+
+
+
+## About
+
+- MIT License, Copyright (c) 2022 <u2> (like all repositories in this organization) <br>
+- Suggestions, ideas, finding bugs and making pull requests make us very happy. ♥
+

package/css/base/README.md

@@ -1,10 +1,16 @@
 # base.css
-⏚ Usefull css defaults
+Best practices and useful defaults
+
+## Install
+
+```html
+<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@main/css/base/base.css" rel=stylesheet>
+```
 
 ## Demos
 
-[nomotion.html](http://gcdn.li/u2ui/u2@main/css/base/tests/nomotion.html)  
 [test.html](http://gcdn.li/u2ui/u2@main/css/base/tests/test.html)  
+[nomotion.html](http://gcdn.li/u2ui/u2@main/css/base/tests/nomotion.html)  
 
 ## Description