WIP: convert sass to css
This commit is contained in:
@ -1,7 +1,7 @@
|
||||
/* Button style */
|
||||
.btn {
|
||||
font-size: 16px;
|
||||
font-family: $primary-font;
|
||||
font-family: var(--gcg-font-primary);
|
||||
padding: 15px 40px;
|
||||
border-radius: 0;
|
||||
font-weight: 500;
|
||||
@ -49,16 +49,16 @@
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: $primary-color;
|
||||
color: $white;
|
||||
background: var(--gcg-color-primary);
|
||||
color: white;
|
||||
|
||||
&::before {
|
||||
background: $white;
|
||||
background: white;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: $primary-color !important;
|
||||
color: $primary-color;
|
||||
background: var(--gcg-color-primary) !important;
|
||||
color: var(--gcg-color-primary);
|
||||
|
||||
&::before {
|
||||
height: 80%;
|
||||
@ -66,57 +66,57 @@
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color: $primary-color, $amount: 10);
|
||||
color: $primary-color;
|
||||
background: var(--gcg-color-primary);
|
||||
color: var(--gcg-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-primary:not(:disabled):not(.disabled).active,
|
||||
.btn-primary:not(:disabled):not(.disabled):active,
|
||||
.show>.btn-primary.dropdown-toggle {
|
||||
color: $white;
|
||||
background-color: darken($color: $primary-color, $amount: 10);
|
||||
border-color: darken($color: $primary-color, $amount: 10);
|
||||
color: white;
|
||||
background-color: var(--gcg-color-primary);
|
||||
border-color: var(--gcg-color-primary);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: $white;
|
||||
color: $primary-color;
|
||||
border: 1px solid $white;
|
||||
background: white;
|
||||
color: var(--gcg-color-primary);
|
||||
border: 1px solid white;
|
||||
|
||||
&::before {
|
||||
background: $primary-color;
|
||||
background: var(--gcg-color-primary);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: $primary-color;
|
||||
color: $white;
|
||||
border: 1px solid $white;
|
||||
background: var(--gcg-color-primary);
|
||||
color: white;
|
||||
border: 1px solid white;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $white;
|
||||
color: $white;
|
||||
border: 1px solid $white;
|
||||
background: white;
|
||||
color: white;
|
||||
border: 1px solid white;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-primary-outline {
|
||||
border: 1px solid $primary-color;
|
||||
color: $primary-color;
|
||||
border: 1px solid var(--gcg-color-primary);
|
||||
color: var(--gcg-color-primary);
|
||||
background: transparent;
|
||||
|
||||
&::before {
|
||||
background: $white;
|
||||
background: white;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $primary-color;
|
||||
color: $primary-color;
|
||||
background: var(--gcg-color-primary);
|
||||
color: var(--gcg-color-primary);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: $primary-color;
|
||||
color: $white;
|
||||
background: var(--gcg-color-primary);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,11 +1,22 @@
|
||||
:root {
|
||||
--gcg-color-primary: #ffbc3b;
|
||||
--gcg-color-primary-light: #ffde9c;
|
||||
--gcg-color-secondary: #1a1a37;
|
||||
--gcg-color-light-1x: #ededf1;
|
||||
--gcg-color-light-2x: #f8f9fe;
|
||||
--gcg-font-primary: 'Ubuntu', sans-serif;
|
||||
--gcg-font-header: 'Fira Sans', sans-serif;
|
||||
--gcg-font-icon: 'Material Design Icons';
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: $body-color;
|
||||
background-color: white;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: lighten($color: $primary-color, $amount: 10);
|
||||
color: $white;
|
||||
background: var(--gcg-color-primary-light);
|
||||
color: var(--bs-tertiary-color);
|
||||
}
|
||||
|
||||
/* preloader */
|
||||
@ -26,7 +37,7 @@ body {
|
||||
ol,
|
||||
ul {
|
||||
list-style-type: none;
|
||||
margin: 0px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
@ -56,15 +67,11 @@ select {
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: $primary-color;
|
||||
color: var(--gcg-color-primary);
|
||||
}
|
||||
|
||||
a.text-primary:hover {
|
||||
color: $primary-color !important;
|
||||
}
|
||||
|
||||
a.text-light:hover {
|
||||
color: $primary-color !important;
|
||||
color: var(--gcg-color-primary) !important;
|
||||
}
|
||||
|
||||
h4 {
|
||||
@ -73,7 +80,7 @@ h4 {
|
||||
|
||||
a h4 {
|
||||
&:hover {
|
||||
color: $primary-color;
|
||||
color: var(--gcg-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
@ -102,7 +109,7 @@ a h4 {
|
||||
}
|
||||
|
||||
.border-primary {
|
||||
border-color: $border-color !important;
|
||||
border-color: var(--gcg-color-light-1x) !important;
|
||||
}
|
||||
|
||||
/* overlay */
|
||||
@ -117,49 +124,29 @@ a h4 {
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: $secondary-color;
|
||||
background: var(--gcg-color-secondary);
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-primary {
|
||||
background: $primary-color !important;
|
||||
background: var(--gcg-color-primary) !important;
|
||||
}
|
||||
|
||||
.bg-secondary {
|
||||
background: $secondary-color !important;
|
||||
}
|
||||
|
||||
.bg-gray {
|
||||
background: $gray;
|
||||
background: var(--gcg-color-secondary) !important;
|
||||
}
|
||||
|
||||
.text-primary {
|
||||
color: $primary-color !important;
|
||||
}
|
||||
|
||||
.text-color {
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
.text-light {
|
||||
color: $text-color-light !important;
|
||||
}
|
||||
|
||||
.text-lighten {
|
||||
color: #d6d6e0 !important;
|
||||
color: var(--gcg-color-primary) !important;
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: #b5b5b7 !important;
|
||||
}
|
||||
|
||||
.text-dark {
|
||||
color: $text-color-dark !important;
|
||||
}
|
||||
|
||||
.font-secondary {
|
||||
font-family: $secondary-font;
|
||||
.font-header {
|
||||
font-family: var(--gcg-font-header);
|
||||
}
|
||||
|
||||
.vertical-align-middle {
|
||||
@ -191,7 +178,7 @@ a h4 {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
border-radius: 50%;
|
||||
background: $primary-color;
|
||||
background: var(--gcg-color-primary);
|
||||
left: -25px;
|
||||
top: 5px;
|
||||
}
|
||||
@ -217,14 +204,14 @@ textarea.form-control {
|
||||
|
||||
&.active {
|
||||
.page-link {
|
||||
background: $primary-color;
|
||||
color: $white;
|
||||
border-color: $primary-color;
|
||||
background: var(--gcg-color-primary);
|
||||
color: white;
|
||||
border-color: var(--gcg-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.page-link {
|
||||
color: $text-color;
|
||||
color: var(--bs-secondary-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -265,7 +252,7 @@ textarea.form-control {
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "\f0B2A";
|
||||
font-family: $icon-font;
|
||||
font-family: var(--gcg-font-icon);
|
||||
font-size: 14px;
|
||||
left: 0;
|
||||
top: 1px;
|
||||
@ -295,11 +282,11 @@ textarea.form-control {
|
||||
}
|
||||
|
||||
thead {
|
||||
background: darken($color: $light, $amount: 2);
|
||||
background: var(--gcg-color-light-1x);
|
||||
}
|
||||
|
||||
tbody {
|
||||
background: $light;
|
||||
background: var(--gcg-color-light-2x);
|
||||
|
||||
td {
|
||||
text-align: left !important;
|
||||
@ -309,16 +296,17 @@ textarea.form-control {
|
||||
|
||||
|
||||
blockquote {
|
||||
border: 1px solid $border-color;
|
||||
border-left: 5px solid $primary-color;
|
||||
border: 1px solid var(--gcg-color-light-1x);
|
||||
border-left: 5px solid var(--gcg-color-primary);
|
||||
padding: 20px;
|
||||
padding-left: 40px;
|
||||
background-color: $light;
|
||||
background-color: var(--gcg-color-light-2x);
|
||||
|
||||
p {
|
||||
color: $text-color;
|
||||
color: var(--bs-secondary-color);
|
||||
font-style: italic !important;
|
||||
}
|
||||
|
||||
* {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
@ -326,17 +314,17 @@ textarea.form-control {
|
||||
|
||||
pre {
|
||||
padding: 10px 20px;
|
||||
background: $light;
|
||||
background: var(--gcg-color-light-2x);
|
||||
}
|
||||
}
|
||||
|
||||
summary {
|
||||
font-weight: 900;
|
||||
font-size: 22px;
|
||||
color: $secondary-color;
|
||||
color: var(--gcg-color-secondary);
|
||||
|
||||
&.hover {
|
||||
color: $primary-color;
|
||||
color: var(--gcg-color-primary);
|
||||
}
|
||||
|
||||
}
|
||||
@ -375,7 +363,7 @@ details[open] summary {
|
||||
bottom: -123px;
|
||||
z-index: 9;
|
||||
padding: 15px;
|
||||
color: rgba($color: $white, $alpha: .5);
|
||||
color: rgba($color: white, $alpha: .5);
|
||||
border: 0;
|
||||
font-size: 30px;
|
||||
transition: all linear .2s;
|
||||
@ -386,7 +374,7 @@ details[open] summary {
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $primary-color;
|
||||
color: var(--gcg-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
@ -414,7 +402,7 @@ details[open] summary {
|
||||
|
||||
&.slick-active {
|
||||
button {
|
||||
background: $primary-color;
|
||||
background: var(--gcg-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
@ -424,7 +412,7 @@ details[open] summary {
|
||||
overflow: hidden;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: rgba($color: $white, $alpha: .5);
|
||||
background: rgba($color: white, $alpha: .5);
|
||||
border: 0;
|
||||
outline: 0;
|
||||
}
|
||||
@ -457,7 +445,7 @@ details[open] summary {
|
||||
font-size: 96px;
|
||||
}
|
||||
|
||||
.wc-canvas {
|
||||
#wc-canvas {
|
||||
width: 100%;
|
||||
height: 600px;
|
||||
}
|
||||
@ -468,23 +456,24 @@ details[open] summary {
|
||||
transition: .1s ease;
|
||||
&.active{
|
||||
font-weight: 600;
|
||||
color: $primary-color;
|
||||
color: var(--gcg-color-primary);
|
||||
}
|
||||
&:hover{
|
||||
color: $primary-color;
|
||||
color: var(--gcg-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tag-list{
|
||||
a{
|
||||
.tag-list {
|
||||
a {
|
||||
display: block;
|
||||
padding: 5px 10px;
|
||||
background: $light;
|
||||
color: $text-color;
|
||||
background: var(--bs-secondary-bg);
|
||||
color: var(--bs-secondary-color);
|
||||
|
||||
&:hover{
|
||||
background-color: $primary-color;
|
||||
color: $white;
|
||||
background: var(--gcg-color-primary);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,23 +2,27 @@
|
||||
@import url('https://assets.cantorgymnasium.de/fonts/fira/fira.css');
|
||||
body {
|
||||
line-height: 1.2;
|
||||
font-family: $primary-font;
|
||||
font-family: var(--gcg-font-primary);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-size: 15px;
|
||||
color: $text-color;
|
||||
color: var(--bs-secondary-color);
|
||||
}
|
||||
|
||||
p, .paragraph {
|
||||
font-weight: 400;
|
||||
color: $text-color;
|
||||
color: var(--bs-secondary-color);
|
||||
font-size: 15px;
|
||||
line-height: 1.9;
|
||||
font-family: $primary-font;
|
||||
font-family: var(--gcg-font-primary);
|
||||
}
|
||||
|
||||
.text-white p {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
color: $text-color-dark;
|
||||
font-family: $secondary-font;
|
||||
color: var(--gcg-color-secondary);
|
||||
font-family: var(--gcg-font-header);
|
||||
font-weight: 900;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
@ -1,17 +0,0 @@
|
||||
// Color Variables
|
||||
$primary-color: #ffbc3b;
|
||||
$secondary-color: #1a1a37;
|
||||
$text-color: #5c5c77;
|
||||
$text-color-light: #8585a4;
|
||||
$text-color-dark: #1e1e4b;
|
||||
$body-color: #fff;
|
||||
$border-color: #ededf1;
|
||||
$black: #000;
|
||||
$white: #fff;
|
||||
$light: #f8f9fe;
|
||||
$gray: #f8f8f8;
|
||||
|
||||
// Font Variables
|
||||
$primary-font: 'Ubuntu', sans-serif;
|
||||
$secondary-font: 'Fira Sans', sans-serif;
|
||||
$icon-font: 'Material Design Icons';
|
||||
@ -1,5 +1,3 @@
|
||||
@import 'variables';
|
||||
|
||||
@import 'mixins';
|
||||
|
||||
@import 'typography';
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
.feature-icon {
|
||||
font-size: 60px;
|
||||
color: $secondary-color;
|
||||
color: var(--gcg-color-secondary);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@ -69,8 +69,8 @@
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
border-radius: 50%;
|
||||
background: $primary-color;
|
||||
color: $white;
|
||||
background: var(--gcg-color-primary);
|
||||
color: white;
|
||||
font-size: 25px;
|
||||
text-align: center;
|
||||
|
||||
@ -84,7 +84,7 @@
|
||||
height: 0;
|
||||
width: 0;
|
||||
transform: translate(-50%, -50%);
|
||||
background: $white;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
@ -99,7 +99,7 @@
|
||||
height: 80%;
|
||||
width: 80%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: $primary-color;
|
||||
background: var(--gcg-color-primary);
|
||||
border-radius: 50%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
|
||||
@ -11,32 +11,32 @@
|
||||
}
|
||||
|
||||
.navigation {
|
||||
background: linear-gradient(to right, transparent 50%, $primary-color 50%);
|
||||
background: linear-gradient(to right, transparent 50%, var(--gcg-color-primary) 50%);
|
||||
transition: .2s ease;
|
||||
|
||||
@include desktop {
|
||||
background: $secondary-color;
|
||||
background: var(--gcg-color-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-collapse{
|
||||
@include desktop {
|
||||
background: $secondary-color;
|
||||
background: var(--gcg-color-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
padding-left: 50px;
|
||||
background: $primary-color;
|
||||
background: var(--gcg-color-primary);
|
||||
|
||||
@include desktop {
|
||||
padding-left: 0;
|
||||
background: $secondary-color;
|
||||
background: var(--gcg-color-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.nav-bg {
|
||||
background-color: $secondary-color;
|
||||
background-color: var(--gcg-color-secondary);
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
@ -55,7 +55,7 @@
|
||||
height: 6px;
|
||||
width: 100%;
|
||||
content: "";
|
||||
background: $white;
|
||||
background: white;
|
||||
transform: scaleY(0);
|
||||
transform-origin: top;
|
||||
transition: transform .3s ease;
|
||||
@ -71,19 +71,19 @@
|
||||
}
|
||||
|
||||
.navbar-dark .navbar-nav .nav-link {
|
||||
color: $white;
|
||||
color: white;
|
||||
}
|
||||
|
||||
link:focus,
|
||||
.navbar-dark .navbar-nav .nav-link:hover {
|
||||
color: $white;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.navbar-dark .navbar-nav .active>.nav-link,
|
||||
.navbar-dark .navbar-nav .nav-link.active,
|
||||
.navbar-dark .navbar-nav .nav-link.show,
|
||||
.navbar-dark .navbar-nav .show>.nav-link {
|
||||
color: $white;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.navbar-expand-lg .navbar-nav .nav-link {
|
||||
@ -99,7 +99,7 @@ link:focus,
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
background: $white;
|
||||
background: white;
|
||||
box-shadow: 0 2px 5px #0000000d;
|
||||
}
|
||||
|
||||
@ -115,7 +115,7 @@ link:focus,
|
||||
|
||||
&-menu {
|
||||
box-shadow: 0px 3px 9px 0px rgba(0, 0, 0, 0.12);
|
||||
border-bottom: 5px solid $primary-color;
|
||||
border-bottom: 5px solid var(--gcg-color-primary);
|
||||
padding: 15px;
|
||||
top: 96px;
|
||||
border-radius: 0;
|
||||
@ -124,7 +124,7 @@ link:focus,
|
||||
transition: .3s ease;
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
background: $white;
|
||||
background: white;
|
||||
|
||||
@include desktop {
|
||||
display: none;
|
||||
@ -146,10 +146,10 @@ link:focus,
|
||||
|
||||
&-item {
|
||||
position: relative;
|
||||
color: $text-color-dark;
|
||||
color: var(--gcg-color-secondary);
|
||||
transition: .2s ease;
|
||||
text-transform: capitalize;
|
||||
font-family: $primary-font;
|
||||
font-family: var(--gcg-font-primary);
|
||||
|
||||
@include desktop {
|
||||
text-align: center;
|
||||
@ -160,7 +160,7 @@ link:focus,
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $primary-color;
|
||||
color: var(--gcg-color-primary);
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user