diff --git a/.run/Docker - Local demo.run.xml b/.run/Docker - Local demo.run.xml new file mode 100644 index 0000000..71deee0 --- /dev/null +++ b/.run/Docker - Local demo.run.xml @@ -0,0 +1,16 @@ + + + + + + + + + + \ No newline at end of file diff --git a/htdocs/index.php b/htdocs/index.php index e23ff9e..6e7fff1 100644 --- a/htdocs/index.php +++ b/htdocs/index.php @@ -12,17 +12,17 @@ - + NibblePoker's CSS Theme - + - + @@ -84,6 +84,9 @@ + + + diff --git a/htdocs/parts/core/borders.php b/htdocs/parts/core/borders.php new file mode 100644 index 0000000..c9893e6 --- /dev/null +++ b/htdocs/parts/core/borders.php @@ -0,0 +1,97 @@ + + + +
+

Borders + +

+
+
+ +

Border selection

+
+

+ Borders can be applied on a global/axis/sided basis using the standard size suffixes.
+ The table below details them in order of application and definition at the CSS-level. +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Border StyleEnabling classDisabling class
Global.b, .border.b-0
Horizontal.bx.bx-0
Vertical.by.by-0
Top.bt.bt-0
Down.bb.bb-0
Left.bl.bl-0
Right.br.br-0
+
+ +

Border styles

+
+ + + + + + + + + + + + + + + + + + + + +
Border styleClassExample
None.b-none
 
Hidden.b-hidden
 
Dotted.b-dotted
 
Dashed.b-dashed
 
Solid.b-solid
 
Double.b-double
 
Groove.b-groove
 
Ridge.b-ridge
 
Inset.b-inset
 
Outset.b-outset
 
+
+ +
diff --git a/htdocs/parts/sidebar.php b/htdocs/parts/sidebar.php index 51bb3e0..24ececa 100644 --- a/htdocs/parts/sidebar.php +++ b/htdocs/parts/sidebar.php @@ -21,32 +21,32 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {

- Weights + Weights

- Styles + Styles

- Alignment + Alignment

- Modifiers + Modifiers

- Links + Links

- Miscellaneous + Miscellaneous

@@ -54,12 +54,17 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {

- Spacing + Spacing

- Rounding + Rounding +

+ + +

+ Borders

@@ -67,22 +72,22 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {

- Lists + Lists

- Grids + Grids

- Tables + Tables

- Inputs + Inputs

@@ -93,22 +98,22 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {

- Horizontal Rulers + Horizontal Rulers

- Backgrounds + Backgrounds

- Buttons + Buttons

- Tables + Tables

@@ -119,12 +124,12 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {

- Inputs + Inputs

- Cards + Cards

diff --git a/scss/core/border.scss b/scss/core/border.scss index 7ffc5ca..d8682aa 100644 --- a/scss/core/border.scss +++ b/scss/core/border.scss @@ -2,63 +2,79 @@ /* Core > Borders */ +/* Core > Borders > Enabling */ + .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}; } + +@mixin border-maker-enable($side-key, $side-css-key) { + .b#{$side-key} { + border-#{$side-css-key}: 1px solid #{$color-border-all}; + } +} + +@include border-maker-enable("t", "top"); +@include border-maker-enable("b", "bottom"); +@include border-maker-enable("l", "left"); +@include border-maker-enable("r", "right"); + + +/* Core > Borders > Disabling */ + +.b-0 { + border: 0; +} + +.bx-0 { + border-left: 0; + border-right: 0; +} + .by-0 { border-top: 0; border-bottom: 0; } -//.border { -// border: 1px solid; -// -// //&.b-light { -// // border: 1px solid #{$color-border-light}; -// //} -//} +@mixin border-maker-disable($side-key, $side-css-key) { + .b#{$side-key}-0 { + border-#{$side-css-key}: 0; + } +} -//main { -// .border { -// border: 1px solid #{$color-border-main}; -// } -//} +@include border-maker-disable("t", "top"); +@include border-maker-disable("b", "bottom"); +@include border-maker-disable("l", "left"); +@include border-maker-disable("r", "right"); -//* { -// .dark-mode & { -// border-color: #{$color-border-all}; -// } -//} +/* Core > Borders > Styles */ + +// TODO: Improve if per-side border styles are required. + +@mixin border-style-maker($style-key, $style-css-value) { + .border-#{$style-key}, .b-#{$style-key} { + border-style: #{$style-css-value}; + } +} + +@include border-style-maker("none", "none"); +@include border-style-maker("hidden", "hidden"); +@include border-style-maker("dotted", "dotted"); +@include border-style-maker("dashed", "dashed"); +@include border-style-maker("solid", "solid"); +@include border-style-maker("double", "double"); +@include border-style-maker("groove", "groove"); +@include border-style-maker("ridge", "ridge"); +@include border-style-maker("inset", "inset"); +@include border-style-maker("outset", "outset");