Added border styles, Updated FontAwesome to Pro, Added head description
Update Docker - Local demo.run.xml, index.php, and 3 more files...
This commit is contained in:
16
.run/Docker - Local demo.run.xml
Normal file
16
.run/Docker - Local demo.run.xml
Normal 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
13
htdocs/index.php
vendored
@@ -12,17 +12,17 @@
|
||||
<link rel="stylesheet" href="./css/nibblepoker.css">
|
||||
<!--<link rel="stylesheet" href="./css/nibblepoker.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"
|
||||
crossorigin="anonymous"
|
||||
referrerpolicy="no-referrer" />
|
||||
<link rel="stylesheet" href="https://cdn.nibblepoker.lu/FontAwesomePro/6.7.2/css/all.min.css">
|
||||
<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:type" content="website"/>
|
||||
<meta property="og:url" content="https://css.nibblepoker.com/"/>
|
||||
<meta property="og:image" content="???"/>
|
||||
<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>
|
||||
|
||||
<body class="layout-generic">
|
||||
@@ -84,6 +84,9 @@
|
||||
<!-- Core > Rounding -->
|
||||
<?php include("./parts/rounding.php"); ?>
|
||||
|
||||
<!-- Core > Borders -->
|
||||
<?php include("./parts/core/borders.php"); ?>
|
||||
|
||||
<!-- Core > Lists > Base -->
|
||||
<?php include("./parts/lists_base.php"); ?>
|
||||
|
||||
|
||||
97
htdocs/parts/core/borders.php
vendored
Normal file
97
htdocs/parts/core/borders.php
vendored
Normal 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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </div></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
41
htdocs/parts/sidebar.php
vendored
41
htdocs/parts/sidebar.php
vendored
@@ -21,32 +21,32 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
||||
<div class="p-xs px-m bt bkgd-grey t-size-11">
|
||||
<a class="a-hidden" href="#text-weights">
|
||||
<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>
|
||||
</a>
|
||||
<a class="a-hidden" href="#text-styles">
|
||||
<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>
|
||||
</a>
|
||||
<a class="a-hidden" href="#text-alignment">
|
||||
<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>
|
||||
</a>
|
||||
<a class="a-hidden" href="#text-modifiers">
|
||||
<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>
|
||||
</a>
|
||||
<a class="a-hidden" href="#text-links">
|
||||
<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>
|
||||
</a>
|
||||
<a class="a-hidden" href="#text-misc">
|
||||
<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>
|
||||
</a>
|
||||
|
||||
@@ -54,12 +54,17 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
||||
|
||||
<a class="a-hidden" href="#spacing">
|
||||
<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>
|
||||
</a>
|
||||
<a class="a-hidden" href="#rounding">
|
||||
<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>
|
||||
</a>
|
||||
|
||||
@@ -67,22 +72,22 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
||||
|
||||
<a class="a-hidden" href="#lists-basic">
|
||||
<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>
|
||||
</a>
|
||||
<a class="a-hidden" href="#grids">
|
||||
<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>
|
||||
</a>
|
||||
<a class="a-hidden" href="#tables-core">
|
||||
<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>
|
||||
</a>
|
||||
<a class="a-hidden" href="#core-inputs">
|
||||
<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>
|
||||
</a>
|
||||
</div>
|
||||
@@ -93,22 +98,22 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
||||
<div class="p-xs px-m bt bkgd-grey t-size-11">
|
||||
<a class="a-hidden" href="#horizontal-rulers">
|
||||
<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>
|
||||
</a>
|
||||
<a class="a-hidden" href="#backgrounds">
|
||||
<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>
|
||||
</a>
|
||||
<a class="a-hidden" href="#buttons">
|
||||
<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>
|
||||
</a>
|
||||
<a class="a-hidden" href="#tables-site">
|
||||
<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>
|
||||
</a>
|
||||
</div>
|
||||
@@ -119,12 +124,12 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
||||
<div class="p-xs px-m bt bkgd-grey t-size-11">
|
||||
<a class="a-hidden" href="#examples-inputs">
|
||||
<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>
|
||||
</a>
|
||||
<a class="a-hidden" href="#examples-cards">
|
||||
<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>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -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");
|
||||
|
||||
Reference in New Issue
Block a user