Initial commit

Update .gitignore, LICENSE-CC0, and 70 more files...

scss/core/border.scss

@@ -0,0 +1,64 @@
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
+
+/* Core > Borders */
+
+.b, .border {
+	border: 1px solid #{$color-border-all};
+}
+
+.b-0 {
+	border: 0;
+}
+
+@mixin border-maker($side-key, $side-css-key) {
+	.b#{$side-key} {
+		border-#{$side-css-key}: 1px solid #{$color-border-all};
+	}
+	.b#{$side-key}-0 {
+		border-#{$side-css-key}: 0;
+	}
+}
+
+@include border-maker("t", "top");
+@include border-maker("b", "bottom");
+@include border-maker("l", "left");
+@include border-maker("r", "right");
+
+.bx {
+	border-left: 1px solid #{$color-border-all};
+	border-right: 1px solid #{$color-border-all};
+}
+.bx-0 {
+	border-left: 0;
+	border-right: 0;
+}
+
+.by {
+	border-top: 1px solid #{$color-border-all};
+	border-bottom: 1px solid #{$color-border-all};
+}
+.by-0 {
+	border-top: 0;
+	border-bottom: 0;
+}
+
+//.border {
+//	border: 1px solid;
+//
+//	//&.b-light {
+//	//	border: 1px solid #{$color-border-light};
+//	//}
+//}
+
+//main {
+//	.border {
+//		border: 1px solid #{$color-border-main};
+//	}
+//}
+
+//* {
+//	.dark-mode & {
+//		border-color: #{$color-border-all};
+//	}
+//}
+

scss/core/containers.scss

@@ -0,0 +1,19 @@
+// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
+
+/* Core > Containers */
+
+.fluid-container {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	
+	// First children, or all, don't care tbh.
+	& > * {
+		position: absolute;
+		width: inherit;
+		height: inherit;
+		max-height: inherit;
+		overflow-y: auto;
+		overflow-x: hidden;
+	}
+}

scss/core/display.scss

@@ -0,0 +1,18 @@
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
+
+/* Core > Display */
+
+.d-none {
+	display: none;
+}
+
+.d-inline-block {
+	display: inline-block;
+}
+
+.o-hidden {
+	overflow: hidden;
+}
+
+// Notes:
+// * 'core/grid.scss' defines '.d-grid' !  (Add here if grids are disabled !)

scss/core/flex.scss

@@ -0,0 +1,77 @@
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
+
+/* Core > Flex */
+
+// Display properties
+.d-flex {
+	display: flex;
+}
+
+.d-inline-flex {
+	display: inline-flex;
+}
+
+// Content justification
+.flex-justify-start {
+	justify-content: flex-start;
+}
+
+.flex-justify-end {
+	justify-content: flex-end;
+}
+
+.flex-justify-center {
+	justify-content: center;
+}
+
+.flex-justify-between {
+	justify-content: space-between;
+}
+
+.flex-justify-around {
+	justify-content: space-around;
+}
+
+.flex-justify-evenly {
+	justify-content: space-evenly;
+}
+
+.flex-justify-left {
+	justify-content: left;
+}
+
+.flex-justify-right {
+	justify-content: right;
+}
+
+// ???
+
+.flex-align-center {
+	align-items: center;
+}
+.flex-align-start {
+	align-items: flex-start;
+}
+
+// Missing: start | end
+
+.flex-direction-row, .flex-row {
+	flex-direction: row;
+}
+
+.flex-direction-row-reverse, .flex-row-reverse {
+	flex-direction: row-reverse;
+}
+
+.flex-direction-column, .flex-column {
+	flex-direction: column;
+}
+
+.flex-direction-column-reverse, .flex-column-reverse {
+	flex-direction: column-reverse;
+}
+
+.flex-fill {
+	-ms-flex: 1 1 auto !important;
+	flex: 1 1 auto !important;
+}

scss/core/float.scss

@@ -0,0 +1,17 @@
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
+
+/* Core > Float */
+
+.fl, .f-left {
+	float: left;
+}
+
+.fr, .f-right {
+	float: right;
+}
+
+.fn, .f-none {
+	float: none;
+}
+
+// TODO: Add more types

scss/core/grid.scss

@@ -0,0 +1,45 @@
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
+
+/* Core > Grids */
+
+.grid, .d-grid {
+	display: grid;
+}
+
+@mixin grid-col-maker($col-count, $middle-part) {
+	.grid-col-#{$middle-part}#{$col-count}, .col-#{$middle-part}#{$col-count} {
+		grid-template-columns: repeat(#{$col-count}, 1fr);
+	}
+}
+
+@mixin grid-gap-maker($gap-size-key, $gap-size-value) {
+	.grid-gap-#{$gap-size-key}, .gap-#{$gap-size-key} {
+		grid-gap: #{$gap-size-value};
+	}
+}
+
+// Defining rules for all devices.
+@include grid-col-maker("1", "");
+@include grid-col-maker("2", "");
+@include grid-col-maker("3", "");
+@include grid-col-maker("4", "");
+@include grid-col-maker("6", "");
+@include grid-col-maker("8", "");
+
+@include grid-gap-maker("xs", calc(#{$grid-gap-base-size} * 0.5));
+@include grid-gap-maker("s", calc(#{$grid-gap-base-size} * 0.75));
+@include grid-gap-maker("m", #{$grid-gap-base-size});
+@include grid-gap-maker("l", calc(#{$grid-gap-base-size} * 1.5));
+@include grid-gap-maker("xl", calc(#{$grid-gap-base-size} * 2.0));
+
+@media only screen and (max-width: 992px) {
+	@include grid-col-maker("1", "medium-");
+	@include grid-col-maker("2", "medium-");
+	@include grid-col-maker("3", "medium-");
+}
+
+@media only screen and (max-width: 768px) {
+	@include grid-col-maker("1", "mobile-");
+	@include grid-col-maker("2", "mobile-");
+	@include grid-col-maker("3", "mobile-");
+}

scss/core/lists.scss

@@ -0,0 +1,29 @@
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
+
+/* Core > Lists */
+
+ul:not(.no-bullet) {
+  padding-left: 1.5rem;
+
+  &> li {
+    list-style-type: disc;
+  }
+}
+
+ol:not(.no-bullet) {
+  list-style-type: decimal;
+  padding-left: 1.5rem;
+}
+
+li {
+  //list-style-type: disc;
+
+  /*&>  li {
+    list-style-type: circle;
+  }*/
+}
+
+/*ul.no-bullet, ol.no-bullet {
+  list-style-type: none;
+  padding-left: 0;
+}*/

scss/core/overflow.scss

@@ -0,0 +1,20 @@
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
+
+/* Core > Overflow */
+
+@mixin overflow-maker($overflow-type) {
+	.o-#{$overflow-type} {
+		overflow: #{$overflow-type};
+	}
+	.ox-#{$overflow-type} {
+		overflow-x: #{$overflow-type};
+	}
+	.oy-#{$overflow-type} {
+		overflow-y: #{$overflow-type};
+	}
+}
+
+@include overflow-maker(auto);
+@include overflow-maker(scroll);
+@include overflow-maker(clip);
+@include overflow-maker(hidden);

scss/core/position.scss

@@ -0,0 +1,7 @@
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
+
+/* Core > Positions */
+
+.p-relative {
+	position: relative;
+}

scss/core/rounding/corner.scss

@@ -0,0 +1,29 @@
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
+
+/* Utilities > Rounding > Corner */
+@mixin corner-rounding-maker($size-key, $size-value) {
+	.rtl-#{$size-key} {
+		border-top-left-radius: #{$size-value};
+	}
+	.rtr-#{$size-key} {
+		border-top-right-radius: #{$size-value};
+	}
+	.rbl-#{$size-key} {
+		border-bottom-left-radius: #{$size-value};
+	}
+	.rbr-#{$size-key} {
+		border-bottom-right-radius: #{$size-value};
+	}
+}
+
+
+/* Utilities > Rounding > Corner > Variable Sizes */
+@include corner-rounding-maker("xs", calc(#{$border-base-radius} * 0.5));
+@include corner-rounding-maker("s", calc(#{$border-base-radius} * 0.75));
+@include corner-rounding-maker("m", #{$border-base-radius});
+@include corner-rounding-maker("l", calc(#{$border-base-radius} * 1.5));
+
+
+/* Utilities > Rounding > Corner > Fixed Sizes */
+@include corner-rounding-maker("0", 0);
+@include corner-rounding-maker("r", 50%);

scss/core/rounding/global.scss

@@ -0,0 +1,22 @@
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
+
+/* Utilities > Rounding > Global */
+@mixin global-rounding-maker($size-key, $size-value) {
+	//, .rounding-#{$size-key}
+	.r-#{$size-key} {
+		border-radius: #{$size-value};
+	}
+}
+
+
+/* Utilities > Rounding > Global > Variable Sizes */
+@include global-rounding-maker("xs", calc(#{$border-base-radius} * 0.5));
+@include global-rounding-maker("s", calc(#{$border-base-radius} * 0.75));
+@include global-rounding-maker("m", #{$border-base-radius});
+@include global-rounding-maker("l", calc(#{$border-base-radius} * 1.5));
+@include global-rounding-maker("xl", calc(#{$border-base-radius} * 2.0));
+
+
+/* Utilities > Rounding > Global > Fixed Sizes */
+@include global-rounding-maker("0", 0);
+@include global-rounding-maker("r", 50%);

scss/core/rounding/sided.scss

@@ -0,0 +1,33 @@
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
+
+/* Utilities > Rounding > Sided */
+@mixin sided-rounding-maker($size-key, $size-value) {
+	.rt-#{$size-key} {
+		border-top-left-radius: #{$size-value};
+		border-top-right-radius: #{$size-value};
+	}
+	.rb-#{$size-key} {
+		border-bottom-left-radius: #{$size-value};
+		border-bottom-right-radius: #{$size-value};
+	}
+	.rl-#{$size-key} {
+		border-top-left-radius: #{$size-value};
+		border-bottom-left-radius: #{$size-value};
+	}
+	.rr-#{$size-key} {
+		border-top-right-radius: #{$size-value};
+		border-bottom-right-radius: #{$size-value};
+	}
+}
+
+
+/* Utilities > Rounding > Sided > Variable Sizes */
+@include sided-rounding-maker("xs", calc(#{$border-base-radius} * 0.5));
+@include sided-rounding-maker("s", calc(#{$border-base-radius} * 0.75));
+@include sided-rounding-maker("m", #{$border-base-radius});
+@include sided-rounding-maker("l", calc(#{$border-base-radius} * 1.5));
+
+
+/* Utilities > Rounding > Sided > Fixed Sizes */
+@include sided-rounding-maker("0", 0);
+@include sided-rounding-maker("r", 50%);

scss/core/sizing.scss

@@ -0,0 +1,56 @@
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
+
+/* Core > Sizing */
+
+// 100 %
+.w-full {
+	width: 100%;
+}
+.wm-full {
+	 max-width: 100%;
+}
+
+.h-full {
+	height: 100%;
+}
+.hm-full {
+	max-height: 100%;
+}
+
+// 50 %
+.w-half {
+	width: 50%;
+}
+
+.h-half {
+	height: 50%;
+}
+
+// Pixels Sizing (Deprecated, disabled by default, use custom rules !)
+@if($add-px-sizing-rules) {
+	// 50, 100, ..., 250 px
+	@for $_ from 1 through 5 {
+		$pxSize: $_ * 50;
+
+		.w-#{$pxSize} {
+			width: #{$pxSize}px;
+		}
+
+		.h-#{$pxSize} {
+			height: #{$pxSize}px;
+		}
+	}
+
+	// 300, 400, ..., 900 px
+	@for $_ from 3 through 9 {
+		$pxSize: $_ * 100;
+
+		.w-#{$pxSize} {
+			width: #{$pxSize}px;
+		}
+
+		.h-#{$pxSize} {
+			height: #{$pxSize}px;
+		}
+	}
+}

scss/core/spacing/axis.scss

@@ -0,0 +1,39 @@
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
+
+/* Utilities > Spacing > Sided */
+@mixin axis-spacing-maker($type-key, $type-property, $size-key, $size-value) {
+	.#{$type-key}x-#{$size-key} {
+		#{$type-property}-left: #{$size-value};
+		#{$type-property}-right: #{$size-value};
+	}
+	.#{$type-key}y-#{$size-key} {
+		#{$type-property}-top: #{$size-value};
+		#{$type-property}-bottom: #{$size-value};
+	}
+}
+
+
+/* Utilities > Spacing > Sided > Variable Sizes */
+@include axis-spacing-maker("m", "margin", "xxs", calc(#{$margin-base-size} * 0.25));
+@include axis-spacing-maker("m", "margin", "xs", calc(#{$margin-base-size} * 0.5));
+@include axis-spacing-maker("m", "margin", "s", calc(#{$margin-base-size} * 0.75));
+@include axis-spacing-maker("m", "margin", "m", #{$margin-base-size});
+@include axis-spacing-maker("m", "margin", "l", calc(#{$margin-base-size} * 1.5));
+@include axis-spacing-maker("m", "margin", "xl", calc(#{$margin-base-size} * 2.0));
+
+@include axis-spacing-maker("p", "padding", "xxs", calc(#{$margin-base-size} * 0.25));
+@include axis-spacing-maker("p", "padding", "xs", calc(#{$margin-base-size} * 0.5));
+@include axis-spacing-maker("p", "padding", "s", calc(#{$margin-base-size} * 0.75));
+@include axis-spacing-maker("p", "padding", "m", #{$margin-base-size});
+@include axis-spacing-maker("p", "padding", "l", calc(#{$margin-base-size} * 1.5));
+@include axis-spacing-maker("p", "padding", "xl", calc(#{$margin-base-size} * 2.0));
+
+
+/* Utilities > Spacing > Sided > Fixed Sizes */
+@include axis-spacing-maker("m", "margin", "0", 0);
+@include axis-spacing-maker("p", "padding", "0", 0);
+
+
+/* Utilities > Spacing > Sided > Others */
+@include axis-spacing-maker("m", "margin", "auto", auto);
+@include axis-spacing-maker("p", "padding", "auto", auto);

scss/core/spacing/global.scss

@@ -0,0 +1,46 @@
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
+
+/* Utilities > Spacing > Global */
+@mixin global-spacing-maker($type-key, $type-property, $size-key, $size-value) {
+	.#{$type-key}-#{$size-key} {
+		#{$type-property}: #{$size-value};
+	}
+}
+
+
+/* Utilities > Spacing > Global > Variable Sizes */
+@include global-spacing-maker("m", "margin", "xxs", calc(#{$margin-base-size} * 0.25));
+@include global-spacing-maker("m", "margin", "xs", calc(#{$margin-base-size} * 0.5));
+@include global-spacing-maker("m", "margin", "s", calc(#{$margin-base-size} * 0.75));
+@include global-spacing-maker("m", "margin", "m", #{$margin-base-size});
+@include global-spacing-maker("m", "margin", "l", calc(#{$margin-base-size} * 1.5));
+@include global-spacing-maker("m", "margin", "xl", calc(#{$margin-base-size} * 2.0));
+
+@include global-spacing-maker("p", "padding", "xxs", calc(#{$margin-base-size} * 0.25));
+@include global-spacing-maker("p", "padding", "xs", calc(#{$margin-base-size} * 0.5));
+@include global-spacing-maker("p", "padding", "s", calc(#{$margin-base-size} * 0.75));
+@include global-spacing-maker("p", "padding", "m", #{$margin-base-size});
+@include global-spacing-maker("p", "padding", "l", calc(#{$margin-base-size} * 1.5));
+@include global-spacing-maker("p", "padding", "xl", calc(#{$margin-base-size} * 2.0));
+
+
+/* Utilities > Spacing > Global > Fixed Sizes */
+@include global-spacing-maker("m", "margin", "0", 0);
+@include global-spacing-maker("p", "padding", "0", 0);
+
+
+/* Utilities > Spacing > Global > Others */
+@include global-spacing-maker("m", "margin", "auto", auto);
+@include global-spacing-maker("p", "padding", "auto", auto);
+
+
+/* Utilities > Spacing > Global > Manual Extras */
+.p-xxxs {
+	padding: calc(#{$margin-base-size} * 0.125);
+}
+.p-mxs {
+	padding: calc(#{$margin-base-size} * 0.375);
+}
+.p-ms {
+	padding: calc(#{$margin-base-size} * 0.625);
+}

scss/core/spacing/sided.scss

@@ -0,0 +1,43 @@
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
+
+/* Utilities > Spacing > Sided */
+@mixin sided-spacing-maker($type-key, $type-property, $size-key, $size-value) {
+	.#{$type-key}t-#{$size-key} {
+		#{$type-property}-top: #{$size-value};
+	}
+	.#{$type-key}b-#{$size-key} {
+		#{$type-property}-bottom: #{$size-value};
+	}
+	.#{$type-key}l-#{$size-key} {
+		#{$type-property}-left: #{$size-value};
+	}
+	.#{$type-key}r-#{$size-key} {
+		#{$type-property}-right: #{$size-value};
+	}
+}
+
+
+/* Utilities > Spacing > Sided > Variable Sizes */
+@include sided-spacing-maker("m", "margin", "xxs", calc(#{$margin-base-size} * 0.25));
+@include sided-spacing-maker("m", "margin", "xs", calc(#{$margin-base-size} * 0.5));
+@include sided-spacing-maker("m", "margin", "s", calc(#{$margin-base-size} * 0.75));
+@include sided-spacing-maker("m", "margin", "m", #{$margin-base-size});
+@include sided-spacing-maker("m", "margin", "l", calc(#{$margin-base-size} * 1.5));
+@include sided-spacing-maker("m", "margin", "xl", calc(#{$margin-base-size} * 2.0));
+
+@include sided-spacing-maker("p", "padding", "xxs", calc(#{$margin-base-size} * 0.25));
+@include sided-spacing-maker("p", "padding", "xs", calc(#{$margin-base-size} * 0.5));
+@include sided-spacing-maker("p", "padding", "s", calc(#{$margin-base-size} * 0.75));
+@include sided-spacing-maker("p", "padding", "m", #{$margin-base-size});
+@include sided-spacing-maker("p", "padding", "l", calc(#{$margin-base-size} * 1.5));
+@include sided-spacing-maker("p", "padding", "xl", calc(#{$margin-base-size} * 2.0));
+
+
+/* Utilities > Spacing > Sided > Fixed Sizes */
+@include sided-spacing-maker("m", "margin", "0", 0);
+@include sided-spacing-maker("p", "padding", "0", 0);
+
+
+/* Utilities > Spacing > Sided > Others */
+@include sided-spacing-maker("m", "margin", "auto", auto);
+@include sided-spacing-maker("p", "padding", "auto", auto);

scss/core/text.scss

@@ -0,0 +1,168 @@
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
+
+/* Core > Text */
+
+/* Core > Text > Headings */
+
+h1, h2, h3, h4, h5, h6 {
+	font-weight: #{$text-header-weight};
+}
+
+
+/* Core > Text > Sizes */
+
+// ".t-size-6", ".t-size-8", ..., "t-size-40"
+@for $_ from 3 through 20 {
+	$sizeKey: $_ * 2;
+	$sizeValue: $sizeKey / 10;
+	
+	.t-size-#{$sizeKey} {
+		font-size: #{$sizeValue}rem !important;
+	}
+}
+
+// Adding special odd values
+.t-size-11 {
+	font-size: 1.1rem !important;
+}
+.t-size-13 {
+	font-size: 1.3rem !important;
+}
+.t-size-15 {
+	font-size: 1.5rem !important;
+}
+.t-size-17 {
+	font-size: 1.7rem !important;
+}
+
+// Jumbo sizes
+// ".t-size-35" & ".t-size-40"
+@for $_ from 7 through 8 {
+	$size: $_ * 5;
+
+	.t-size-#{$size} {
+		font-size: #{$size / 10}rem !important;
+	}
+}
+
+
+/* Core > Text > Weights */
+
+.t-w-normal, .t-normal {
+	font-weight: normal !important;
+}
+b, .t-w-bold, .t-bold {
+	font-weight: bold !important;
+}
+.t-w-bolder, .t-bolder {
+	font-weight: bolder !important;
+}
+.t-w-lighter, .t-lighter {
+	font-weight: lighter !important;
+}
+
+// ".t-w-100", ".t-w-200", ..., ".t-w-900"
+@for $_ from 1 through 9 {
+	$size: $_ * 100;
+	
+	.t-w-#{$size} {
+		font-weight: #{$size} !important;
+	}
+}
+// /!\ Firefox moment /!\
+// * The ".t-w-200" to ".t-w-500" classes barely any effect on weight...
+
+
+/* Core > Text > Styles */
+
+i, .t-italic {
+	font-style: italic;
+}
+
+.t-oblique {
+	font-style: oblique;
+}
+
+u, .t-underline {
+	text-decoration: underline;
+}
+
+s, .t-strikethrough {
+	text-decoration: line-through;
+}
+
+.t-overline {
+	text-decoration: overline;
+}
+
+
+/* Core > Text > Alignment */
+
+.t-justify {
+	text-align: justify;
+}
+
+.t-center {
+	text-align: center;
+}
+
+.t-left {
+	text-align: left;
+}
+
+.t-right {
+	text-align: right;
+}
+
+.t-start {
+	text-align: start;
+}
+
+.t-end {
+	text-align: end;
+}
+
+
+/* Core > Text > Modifiers */
+
+.t-ucase {
+	text-transform: uppercase;
+}
+
+.t-lcase {
+	text-transform: lowercase;
+}
+
+.t-capitalize {
+	text-transform: capitalize;
+}
+
+
+/* Core > Text > Misc */
+
+.t-nowrap {
+	white-space: nowrap;
+	text-wrap: nowrap;
+}
+
+
+/* Core > Text > Helpers */
+
+.t-half-muted {
+	opacity: 65%;
+}
+
+.t-muted {
+	//@if $undefined-toggle-css-variables {
+	//	color: var(--color-white-muted);
+	//} @else {
+	//	color: #{$color-white-muted};
+	//}
+	//color: #A9A9Aa;
+	opacity: 50%;
+}
+
+.t-super-muted {
+	// Should be 35% TBH
+	opacity: 45%;
+}