aziascreations/CSS-NibblePoker
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Activity

Added border styles, Updated FontAwesome to Pro, Added head description

Browse Source 
Update Docker - Local demo.run.xml, index.php, and 3 more files...
This commit is contained in:
Herwin Bozet (NibblePoker)
2025-09-13 14:52:11 +02:00
parent 44678bd9f4
commit 04cd1294ef
5 changed files with 199 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
.run/Docker - Local demo.run.xml Normal file
View File

@@ -0,0 +1,16 @@
<component name="ProjectRunConfigurationManager">
<configuration default="false" name="Docker - Local demo" type="docker-deploy" factoryName="docker-compose.yml" server-name="Docker">
<deployment type="docker-compose.yml">
<settings>
<option name="envFilePath" value="" />
<option name="services">
<list>
<option value="nibblepoker_css" />
</list>
</option>
<option name="sourceFilePath" value="docker-compose.yml" />
</settings>
</deployment>
<method v="2" />
</configuration>
</component>

13
htdocs/index.php vendored
View File

@@ -12,17 +12,17 @@
<link rel="stylesheet" href="./css/nibblepoker.css"> <link rel="stylesheet" href="./css/nibblepoker.css">
<!--<link rel="stylesheet" href="./css/nibblepoker.min.css">--> <!--<link rel="stylesheet" href="./css/nibblepoker.min.css">-->
<link rel="stylesheet" href="./css/debugger.min.css"> <link rel="stylesheet" href="./css/debugger.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" <link rel="stylesheet" href="https://cdn.nibblepoker.lu/FontAwesomePro/6.7.2/css/all.min.css">
crossorigin="anonymous"
referrerpolicy="no-referrer" />
<title>NibblePoker's CSS Theme</title> <title>NibblePoker's CSS Theme</title>
<meta name="description" content="..."> <meta name="description"
content="Documentation for the standardized CSS theme used across ´NibblePoker.lu´ websites."/>
<meta property="og:title" content="NibblePoker"/> <meta property="og:title" content="NibblePoker"/>
<meta property="og:type" content="website"/> <meta property="og:type" content="website"/>
<meta property="og:url" content="https://css.nibblepoker.com/"/> <meta property="og:url" content="https://css.nibblepoker.com/"/>
<meta property="og:image" content="???"/> <meta property="og:image" content="???"/>
<meta property="og:image:type" content="image/png"/> <meta property="og:image:type" content="image/png"/>
<meta property="og:description" content="..."/> <meta property="og:description"
content="Documentation for the standardized CSS theme used across ´NibblePoker.lu´ websites."/>
</head> </head>
<body class="layout-generic"> <body class="layout-generic">
@@ -84,6 +84,9 @@
<!-- Core > Rounding --> <!-- Core > Rounding -->
<?php include("./parts/rounding.php"); ?> <?php include("./parts/rounding.php"); ?>
<!-- Core > Borders -->
<?php include("./parts/core/borders.php"); ?>
<!-- Core > Lists > Base --> <!-- Core > Lists > Base -->
<?php include("./parts/lists_base.php"); ?> <?php include("./parts/lists_base.php"); ?>

97
htdocs/parts/core/borders.php vendored Normal file
View File

@@ -0,0 +1,97 @@
<?php
// Making sure the file is included and not accessed directly.
if (basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
header('HTTP/1.1 403 Forbidden');
die();
}
?>
<a id="core-borders"></a>
<div class="p-xs b r-s bkgd-grid mt-m">
<h2 class="t-w-500 t-size-14">Borders
<i class="fa-solid fa-border-inner f-right"></i>
</h2>
</div>
<section class="p-s">
<h3 class="t-w-500 t-size-12 my-s">Border selection</h3>
<div class="px-s">
<p class="mb-s">
Borders can be applied on a global/axis/sided basis using the standard size suffixes.<br>
The table below details them in order of application and definition at the CSS-level.
</p>
<table class="table-stylish table-p-xs border r-l table-v-center">
<thead>
<tr>
<th>Border Style</th>
<th>Enabling class</th>
<th>Disabling class</th>
</tr>
</thead>
<tbody>
<tr>
<td><b>Global</b></td>
<td><span class="code">.b</span>, <span class="code">.border</span></td>
<td><span class="code">.b-0</span></td>
</tr>
<tr>
<td><b>Horizontal</b></td>
<td><span class="code">.bx</span></td>
<td><span class="code">.bx-0</span></td>
</tr>
<tr>
<td><b>Vertical</b></td>
<td><span class="code">.by</span></td>
<td><span class="code">.by-0</span></td>
</tr>
<tr>
<td><b>Top</b></td>
<td><span class="code">.bt</span></td>
<td><span class="code">.bt-0</span></td>
</tr>
<tr>
<td><b>Down</b></td>
<td><span class="code">.bb</span></td>
<td><span class="code">.bb-0</span></td>
</tr>
<tr>
<td><b>Left</b></td>
<td><span class="code">.bl</span></td>
<td><span class="code">.bl-0</span></td>
</tr>
<tr>
<td><b>Right</b></td>
<td><span class="code">.br</span></td>
<td><span class="code">.br-0</span></td>
</tr>
</tbody>
</table>
</div>
<h3 class="t-w-500 t-size-12 my-s mt-l">Border styles</h3>
<div class="px-s">
<table class="table-stylish table-p-xs border r-l table-v-center">
<thead>
<tr>
<th>Border style</th>
<th>Class</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr><td><b>None</b></td><td><span class="code">.b-none</span></td><td><div class="bkgd-light b b-none p-xxs">&nbsp;</div></td></tr>
<tr><td><b>Hidden</b></td><td><span class="code">.b-hidden</span></td><td><div class="bkgd-light b b-hidden p-xxs">&nbsp;</div></td></tr>
<tr><td><b>Dotted</b></td><td><span class="code">.b-dotted</span></td><td><div class="bkgd-light b b-dotted p-xxs">&nbsp;</div></td></tr>
<tr><td><b>Dashed</b></td><td><span class="code">.b-dashed</span></td><td><div class="bkgd-light b b-dashed p-xxs">&nbsp;</div></td></tr>
<tr><td><b>Solid</b></td><td><span class="code">.b-solid</span></td><td><div class="bkgd-light b b-solid p-xxs">&nbsp;</div></td></tr>
<tr><td><b>Double</b></td><td><span class="code">.b-double</span></td><td><div class="bkgd-light b b-double p-xxs">&nbsp;</div></td></tr>
<tr><td><b>Groove</b></td><td><span class="code">.b-groove</span></td><td><div class="bkgd-light b b-groove p-xxs">&nbsp;</div></td></tr>
<tr><td><b>Ridge</b></td><td><span class="code">.b-ridge</span></td><td><div class="bkgd-light b b-ridge p-xxs">&nbsp;</div></td></tr>
<tr><td><b>Inset</b></td><td><span class="code">.b-inset</span></td><td><div class="bkgd-light b b-inset p-xxs">&nbsp;</div></td></tr>
<tr><td><b>Outset</b></td><td><span class="code">.b-outset</span></td><td><div class="bkgd-light b b-outset p-xxs">&nbsp;</div></td></tr>
</tbody>
</table>
</div>
</section>

41
htdocs/parts/sidebar.php vendored
View File

@@ -21,32 +21,32 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
<div class="p-xs px-m bt bkgd-grey t-size-11"> <div class="p-xs px-m bt bkgd-grey t-size-11">
<a class="a-hidden" href="#text-weights"> <a class="a-hidden" href="#text-weights">
<p class="t-w-500 py-xs sidebar-entry"> <p class="t-w-500 py-xs sidebar-entry">
<i class="fa-solid fa-text-height pr-xs t-half-muted"></i>Weights <i class="fad fa-text-height pr-xs t-half-muted"></i>Weights
</p> </p>
</a> </a>
<a class="a-hidden" href="#text-styles"> <a class="a-hidden" href="#text-styles">
<p class="t-w-500 py-xs sidebar-entry"> <p class="t-w-500 py-xs sidebar-entry">
<i class="fa-solid fa-italic pr-xs t-half-muted"></i>Styles <i class="fad fa-italic pr-xs t-half-muted"></i>Styles
</p> </p>
</a> </a>
<a class="a-hidden" href="#text-alignment"> <a class="a-hidden" href="#text-alignment">
<p class="t-w-500 py-xs sidebar-entry"> <p class="t-w-500 py-xs sidebar-entry">
<i class="fa-solid fa-text-width pr-xs t-half-muted"></i>Alignment <i class="fad fa-text-width pr-xs t-half-muted"></i>Alignment
</p> </p>
</a> </a>
<a class="a-hidden" href="#text-modifiers"> <a class="a-hidden" href="#text-modifiers">
<p class="t-w-500 py-xs sidebar-entry"> <p class="t-w-500 py-xs sidebar-entry">
<i class="fa-solid fa-subscript pr-xs t-half-muted"></i>Modifiers <i class="fad fa-subscript pr-xs t-half-muted"></i>Modifiers
</p> </p>
</a> </a>
<a class="a-hidden" href="#text-links"> <a class="a-hidden" href="#text-links">
<p class="t-w-500 py-xs sidebar-entry"> <p class="t-w-500 py-xs sidebar-entry">
<i class="fa-solid fa-link pr-xs t-half-muted"></i>Links <i class="fad fa-link pr-xs t-half-muted"></i>Links
</p> </p>
</a> </a>
<a class="a-hidden" href="#text-misc"> <a class="a-hidden" href="#text-misc">
<p class="t-w-500 py-xs sidebar-entry"> <p class="t-w-500 py-xs sidebar-entry">
<i class="fa-solid fa-ellipsis pr-xs t-half-muted"></i>Miscellaneous <i class="fad fa-ellipsis pr-xs t-half-muted"></i>Miscellaneous
</p> </p>
</a> </a>
@@ -54,12 +54,17 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
<a class="a-hidden" href="#spacing"> <a class="a-hidden" href="#spacing">
<p class="t-w-500 py-xs sidebar-entry"> <p class="t-w-500 py-xs sidebar-entry">
<i class="fa-solid fa-ellipsis pr-xs t-half-muted"></i>Spacing <i class="fad fa-ellipsis pr-xs t-half-muted"></i>Spacing
</p> </p>
</a> </a>
<a class="a-hidden" href="#rounding"> <a class="a-hidden" href="#rounding">
<p class="t-w-500 py-xs sidebar-entry"> <p class="t-w-500 py-xs sidebar-entry">
<i class="fa-solid fa-bezier-curve pr-xs t-half-muted"></i>Rounding <i class="fad fa-bezier-curve pr-xs t-half-muted"></i>Rounding
</p>
</a>
<a class="a-hidden" href="#core-borders">
<p class="t-w-500 py-xs sidebar-entry">
<i class="fad fa-border-inner pr-xs t-half-muted"></i>Borders
</p> </p>
</a> </a>
@@ -67,22 +72,22 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
<a class="a-hidden" href="#lists-basic"> <a class="a-hidden" href="#lists-basic">
<p class="t-w-500 py-xs sidebar-entry"> <p class="t-w-500 py-xs sidebar-entry">
<i class="fa-solid fa-list pr-xs t-half-muted"></i>Lists <i class="fad fa-list pr-xs t-half-muted"></i>Lists
</p> </p>
</a> </a>
<a class="a-hidden" href="#grids"> <a class="a-hidden" href="#grids">
<p class="t-w-500 py-xs sidebar-entry"> <p class="t-w-500 py-xs sidebar-entry">
<i class="fa-solid fa-table-cells-large pr-xs t-half-muted"></i>Grids <i class="fad fa-table-cells-large pr-xs t-half-muted"></i>Grids
</p> </p>
</a> </a>
<a class="a-hidden" href="#tables-core"> <a class="a-hidden" href="#tables-core">
<p class="t-w-500 py-xs sidebar-entry"> <p class="t-w-500 py-xs sidebar-entry">
<i class="fa-solid fa-table pr-xs t-half-muted"></i>Tables <i class="fad fa-table pr-xs t-half-muted"></i>Tables
</p> </p>
</a> </a>
<a class="a-hidden" href="#core-inputs"> <a class="a-hidden" href="#core-inputs">
<p class="t-w-500 py-xs sidebar-entry"> <p class="t-w-500 py-xs sidebar-entry">
<i class="fa-solid fa-pen-to-square pr-xs t-half-muted"></i>Inputs <i class="fad fa-pen-to-square pr-xs t-half-muted"></i>Inputs
</p> </p>
</a> </a>
</div> </div>
@@ -93,22 +98,22 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
<div class="p-xs px-m bt bkgd-grey t-size-11"> <div class="p-xs px-m bt bkgd-grey t-size-11">
<a class="a-hidden" href="#horizontal-rulers"> <a class="a-hidden" href="#horizontal-rulers">
<p class="t-w-500 py-xs sidebar-entry"> <p class="t-w-500 py-xs sidebar-entry">
<i class="fa-solid fa-ruler pr-xs t-half-muted"></i>Horizontal Rulers <i class="fad fa-ruler pr-xs t-half-muted"></i>Horizontal Rulers
</p> </p>
</a> </a>
<a class="a-hidden" href="#backgrounds"> <a class="a-hidden" href="#backgrounds">
<p class="t-w-500 py-xs sidebar-entry"> <p class="t-w-500 py-xs sidebar-entry">
<i class="fa-solid fa-paint-roller pr-xs t-half-muted"></i>Backgrounds <i class="fad fa-paint-roller pr-xs t-half-muted"></i>Backgrounds
</p> </p>
</a> </a>
<a class="a-hidden" href="#buttons"> <a class="a-hidden" href="#buttons">
<p class="t-w-500 py-xs sidebar-entry"> <p class="t-w-500 py-xs sidebar-entry">
<i class="fa-solid fa-stop pr-xs t-half-muted"></i>Buttons <i class="fad fa-stop pr-xs t-half-muted"></i>Buttons
</p> </p>
</a> </a>
<a class="a-hidden" href="#tables-site"> <a class="a-hidden" href="#tables-site">
<p class="t-w-500 py-xs sidebar-entry"> <p class="t-w-500 py-xs sidebar-entry">
<i class="fa-solid fa-table pr-xs t-half-muted"></i>Tables <i class="fad fa-table pr-xs t-half-muted"></i>Tables
</p> </p>
</a> </a>
</div> </div>
@@ -119,12 +124,12 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
<div class="p-xs px-m bt bkgd-grey t-size-11"> <div class="p-xs px-m bt bkgd-grey t-size-11">
<a class="a-hidden" href="#examples-inputs"> <a class="a-hidden" href="#examples-inputs">
<p class="t-w-500 py-xs sidebar-entry"> <p class="t-w-500 py-xs sidebar-entry">
<i class="fa-solid fa-pen-to-square pr-xs t-half-muted"></i>Inputs <i class="fad fa-pen-to-square pr-xs t-half-muted"></i>Inputs
</p> </p>
</a> </a>
<a class="a-hidden" href="#examples-cards"> <a class="a-hidden" href="#examples-cards">
<p class="t-w-500 py-xs sidebar-entry"> <p class="t-w-500 py-xs sidebar-entry">
<i class="fa-solid fa-address-card pr-xs t-half-muted"></i>Cards <i class="fad fa-address-card pr-xs t-half-muted"></i>Cards
</p> </p>
</a> </a>
</div> </div>

94
scss/core/border.scss
View File

@@ -2,63 +2,79 @@
/* Core > Borders */ /* Core > Borders */
/* Core > Borders > Enabling */
.b, .border { .b, .border {
border: 1px solid #{$color-border-all}; 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 { .bx {
border-left: 1px solid #{$color-border-all}; border-left: 1px solid #{$color-border-all};
border-right: 1px solid #{$color-border-all}; border-right: 1px solid #{$color-border-all};
} }
.bx-0 {
border-left: 0;
border-right: 0;
}
.by { .by {
border-top: 1px solid #{$color-border-all}; border-top: 1px solid #{$color-border-all};
border-bottom: 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 { .by-0 {
border-top: 0; border-top: 0;
border-bottom: 0; border-bottom: 0;
} }
//.border { @mixin border-maker-disable($side-key, $side-css-key) {
// border: 1px solid; .b#{$side-key}-0 {
// border-#{$side-css-key}: 0;
// //&.b-light { }
// // border: 1px solid #{$color-border-light}; }
// //}
//}
//main { @include border-maker-disable("t", "top");
// .border { @include border-maker-disable("b", "bottom");
// border: 1px solid #{$color-border-main}; @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");