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

Added colored backgrounds

Browse Source 
Update backgrounds.php and backgrounds.scss
This commit is contained in:
Herwin Bozet (NibblePoker) 2024-11-20 23:17:23 +01:00
parent cdd0aba327
commit 2c719a19d9
2 changed files with 79 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
htdocs/parts/backgrounds.php
View File

@ -56,7 +56,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
</div>
</div>
<h3 class="t-w-500 t-size-12 my-s mt-l">Other backgrounds</h3>
<h3 class="t-w-500 t-size-12 my-s mt-l">Special backgrounds</h3>
<div class="grid col-3 grid-gap-l px-s">
<div>
<p class="t-w-500">Transparent</p>
@ -64,4 +64,50 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
<span class="code">.bkgd-transparent</span>
</div>
</div>
<h3 class="t-w-500 t-size-12 my-s mt-l">Colored backgrounds</h3>
<div class="grid col-4 col-medium-2 grid-gap-l px-s">
<div>
<p class="t-w-500">Blue</p>
<div class="p-l border r-xl bkgd-blue my-xs"></div>
<span class="code">.bkgd-blue</span>
</div>
<div>
<p class="t-w-500">Light blue</p>
<div class="p-l border r-xl bkgd-blue-light my-xs"></div>
<span class="code">.bkgd-blue-light</span>
</div>
<div>
<p class="t-w-500">Green</p>
<div class="p-l border r-xl bkgd-green my-xs"></div>
<span class="code">.bkgd-green</span>
</div>
<div>
<p class="t-w-500">Light green</p>
<div class="p-l border r-xl bkgd-green-light my-xs"></div>
<span class="code">.bkgd-green-light</span>
</div>
</div>
<div class="grid col-4 col-medium-2 grid-gap-l px-s mt-m">
<div>
<p class="t-w-500">Red</p>
<div class="p-l border r-xl bkgd-red my-xs"></div>
<span class="code">.bkgd-red</span>
</div>
<div>
<p class="t-w-500">Light red</p>
<div class="p-l border r-xl bkgd-red-light my-xs"></div>
<span class="code">.bkgd-red-light</span>
</div>
<div>
<p class="t-w-500">Orange</p>
<div class="p-l border r-xl bkgd-orange my-xs"></div>
<span class="code">.bkgd-orange</span>
</div>
<div>
<p class="t-w-500">Light orange</p>
<div class="p-l border r-xl bkgd-orange-light my-xs"></div>
<span class="code">.bkgd-orange-light</span>
</div>
</div>
</section>

32
scss/site/backgrounds.scss
View File

@ -47,3 +47,35 @@
.bkgd-transparent {
background: rgba(0, 0, 0, 0);
}
.bkgd-blue {
background-color: #{$color-background-button-primary};
}
.bkgd-blue-light {
background-color: #{$color-background-button-primary-hover};
}
.bkgd-green {
background-color: #{$color-background-button-success};
}
.bkgd-green-light {
background-color: #{$color-background-button-success-hover};
}
.bkgd-red {
background-color: #{$color-background-button-error};
}
.bkgd-red-light {
background-color: #{$color-background-button-error-hover};
}
.bkgd-orange {
background-color: #{$color-background-button-warning};
}
.bkgd-orange-light {
background-color: #{$color-background-button-warning-hover};
}