quarante-douze/qdouze-wordpress-theme
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

scss: Add definitions to their own scss file

Browse source
This commit is contained in:
Kazhnuz 2018-10-24 10:26:41 +02:00
parent 1174f162a8
commit 8ad2027aae
2 changed files with 32 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
scss/_definitions.scss Normal file
View file

@ -0,0 +1,28 @@
// Definitions
//
// This file contain style that we can easily edit to modify customizable elements
// like colors, etc.
$large-shadow: 0px 2px 10px rgba(0, 0, 0, 0);
$narrow-shadow: 0px 2px 6px rgba(0, 0, 0, 0);
$inset-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.2);
$inset-shadow-inverted: inset 0px 2px 0px rgba(0, 0, 0, 0.2);
$inset-relief: inset 0px 2px 0px rgba(255, 255, 255, 0.1);
$border-radius: 0px;
$border-size: 1px;
$color-primary: $color-red;
$color-secondary: $color-dark;
$color-link: $color-blue;
$color-selection: $color-blue;
$color-mark: $color-yellow;
@mixin borders() {
border: $border-size solid rgba(0, 0, 0, 0.3)
}
@mixin border-radius() {
border-radius: $border-radius $border-radius $border-radius $border-radius;
}

29
scss/style.scss
View file

@ -5,35 +5,14 @@
// Theme made for Wordpress for https://quarante-douze.net // Theme made for Wordpress for https://quarante-douze.net
// //
@import 'typography';
@import 'palette'; @import 'palette';
@import 'definitions';
@import 'typography';
/* ------------------ CUSTOM STYLE ------------------- */ /* ------------------ CUSTOM STYLE ------------------- */
$large-shadow: 0px 2px 10px rgba(0, 0, 0, 0);
$narrow-shadow: 0px 2px 6px rgba(0, 0, 0, 0);
$inset-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.2);
$inset-shadow-inverted: inset 0px 2px 0px rgba(0, 0, 0, 0.2);
$inset-relief: inset 0px 2px 0px rgba(255, 255, 255, 0.1);
$border-radius: 0px;
$border-size: 1px;
$color-primary: $color-red;
$color-secondary: $color-dark;
$color-link: $color-blue;
$color-selection: $color-blue;
$color-mark: $color-yellow;
@mixin borders() {
border: $border-size solid rgba(0, 0, 0, 0.3)
}
@mixin border-radius() {
border-radius: $border-radius $border-radius $border-radius $border-radius;
}
body { body {
background: #666 url('../img/background.png'); background: #666 url('../img/background.png');
padding: 30px; padding: 30px;