diff --git a/src/Module/MateThemeSetup.php b/src/Module/MateThemeSetup.php index 876b3cc..3f50c60 100644 --- a/src/Module/MateThemeSetup.php +++ b/src/Module/MateThemeSetup.php @@ -38,7 +38,7 @@ protected function getFiles($path) { $pos = strpos($path,"matetheme"); $filesFolder = "files/mate".str_replace("matetheme","",substr($path,$pos))."/".$dir; - if($dir != "_mate_variables.scss" && $dir != "backend.css" && $dir != "mate.scss" && $dir != "materialize.scss") { + if($dir != "_mate_variables.scss" && $dir != "_mate_colors.scss" && $dir != "backend.css" && $dir != "mate.scss" && $dir != "materialize.scss") { if(!file_exists(TL_ROOT."/".$filesFolder)) { $objFile = new \File("web/bundles/".substr($path,$pos)."/".$dir, true); $objFile->copyTo($filesFolder); @@ -48,7 +48,7 @@ protected function getFiles($path) { $folder = $path."/".$dir; $pos = strpos($path,"matetheme"); $filesFolder = "files/mate".str_replace("matetheme","",substr($path,$pos))."/".$dir; - if($dir != "fonts" && $dir != "js" && $dir != "components") { + if($dir != "fonts" && $dir != "js" && $dir != "components" && $dir != "mate_color_schemes") { if(!file_exists($filesFolder)) { new \Folder($filesFolder); } diff --git a/src/Resources/public/sass/_custom_colors.scss b/src/Resources/public/sass/_custom_colors.scss new file mode 100644 index 0000000..c544688 --- /dev/null +++ b/src/Resources/public/sass/_custom_colors.scss @@ -0,0 +1,50 @@ +/**** + **** mate theme files / custom_variables + **** uncomment to override materialize variables + **** + */ + +/* + * mate theme files / custom_variables + * + * uncomment to override materialize variables + */ + + +/* ============================= */ +/* Colour Schemes */ +/* ============================= */ + +//@import 'mate_color_schemes/mate_dark_colors'; +//@import 'mate_color_schemes/mate_blue_colors'; +//@import 'mate_color_schemes/mate_yellow_colors'; + + +/* ============================= */ +/* MATE Theme Variables */ +/* ============================= */ + +/* Colors */ +//$mateColor1: #b6cf92; +//$mateColor2: #86af49; +//$mateColor3: #476a30; +//$mateColor4: #58774e; +//$mateColor6: #abbdb1; + +//$mateColorWhite: #fff; +//$mateColorBlack: #000; +//$mateColorGreyLight: #f5f5f5; +//$mateColorGreyDark: #e6e6e6; +//$pageBackground: #f4f8f0; + +/* Text Colors */ +//$primary-text-color: #000; +//$secondary-text-color: #fff; + +/* Boxes */ +//$boxes-background: $mateColorWhite; +//$boxes-text-color: $primary-text-color; + +/* Content Box */ +//$contentbox-first-background: rgba(255, 255, 255, 0.95); +//$contentbox-second-background: rgba(255, 255, 255, 0.65); diff --git a/src/Resources/public/sass/_custom_variables.scss b/src/Resources/public/sass/_custom_variables.scss index 606169b..c7833fc 100644 --- a/src/Resources/public/sass/_custom_variables.scss +++ b/src/Resources/public/sass/_custom_variables.scss @@ -4,86 +4,48 @@ **** */ -/**** - **** mate theme files / mate_variables - **** overrides materialize variables - **** - */ - /* - * please do not edit this file. + * mate theme files / custom_variables * - * use _custom_variables.scss for update safe overwrites + * uncomment to override materialize variables */ -//@import '_custom_variables_black.scss'; -//@import '_custom_variables_blue.scss'; -//@import '_custom_variables_yellow.scss'; - -//$font1: 'Lato Light'; -//$font2: 'Old Standard'; -//$font3: 'Lato Regular'; - -//$mateColor1: #b6cf92; -//$mateColor2: #86af49; -//$mateColor3: #476a30; -//$mateColor4: #58774e; -//$mateColor6: #abbdb1; -//$mateColorWhite: #fff; -//$mateColorBlack: #000; -//$pageBackground: #f4f8f0; -/* - * colors - */ +/* ============================= */ +/* MATE Theme Variables */ +/* ============================= */ +/* Colors */ //$primary-color: $mateColor2; //$secondary-color: $mateColor3; -//$primary-text-color: $mateColorBlack; -//$secondary-text-color: $mateColorWhite; - -/* - * mate theme specific variables - */ - -/* Boxen */ -//$boxes-background: $mateColorWhite; -//$boxes-text-color: $primary-text-color; - -/* header image headline */ -//$headerHeadlineBackground: rgba(134, 175, 73, 0.84); -//$headerHeadlineColor: $secondary-text-color; +/* Fonts */ +//$font1: 'Lato Light'; +//$font2: 'Old Standard'; +//$font3: 'Lato Regular'; /* Links */ //$primary-link-font-color: $mateColor2; //$primary-link-hover-font-color: $mateColor3; -/* Header - Navigation */ -//$header-top-color: $secondary-text-color; - -//$navbar-bg-color: $mateColorWhite; -//$navbar-color: $primary-text-color; -//$navbar-active-color: $mateColor2; -//$navbar-dropdown-hover-bg-color: $mateColor1; -//$navbar-dropdown-hover-color: $secondary-text-color; -//$navbar-dropdown-bg: $mateColorWhite; -//$navbar-dropdown-color: $primary-text-color; -//$navbar-stuck-bg-color: rgba(134,175,73,0.9); -//$navbar-stuck-color: $secondary-text-color; -//$navbar-stuck-active-color: $mateColor3; -//$navbar-stuck-dropdown-hover-bg-color: rgba(255,255,255,0.5); -//$navbar-stuck-dropdown-hover-color: $primary-text-color; -//$navbar-stuck-dropdown-color: $secondary-text-color; -//$navbar-stuck-dropdown-bg: $navbar-stuck-bg-color; +/* Accordion */ +//$accordion-headline-background: $mateColor2; +//$accordion-headline-color: $secondary-text-color; +//$accordion-content-background: $mateColorWhite; +//$accordion-content-color: $primary-text-color; +//$accordion-border-color: $mateColorWhite; /* Buttons */ //$button-flat-color: $secondary-text-color; //$button-floating-background: $mateColor2; //$button-floating-background-hover: $mateColor3; +/* Content Box */ +//$contentbox-first-color: $boxes-text-color; +//$contentbox-second-color: $boxes-text-color; + /* Download and FAQ Elements */ -//$download-faqlist-background-odd: rgba(134, 175, 73, 0.15); +//$download-faqlist-background-odd: rgba($mateColor2, 0.15); //$download-faqlist-color-odd: $mateColor2; //$download-faqlist-color-odd-hover: $mateColor3; @@ -91,15 +53,19 @@ //$download-faqlist-color-even: $mateColor2; //$download-faqlist-color-even-hover: $mateColor3; -/* Events */ +/* Events and News */ //$calendar-background: $mateColorWhite; //$calendar-border-color: $mateColorWhite; //$calendar-text-color: $mateColor2; +//$news-date-color: $mateColor6; +//$news-category-color: #fff; +//$pagination-color: $mateColor4; + /* Footer */ //$footer-text-color: $secondary-text-color; -//$footer-headline-border-color: $footer-text-color; -//$footer-secondary-bg-color: $secondary-color; +//$footer-headline-border-color: $secondary-text-color; +//$footer-secondary-bg-color: $mateColor3; //$footer-news-events-time-color: $mateColor3; //$footer-primary-link-color: $secondary-text-color; @@ -107,6 +73,30 @@ //$footer-secondary-link-color: $secondary-text-color; //$footer-secondary-link-color-hover: $secondary-text-color; +//$footer-newsletter-button-background: $mateColor2; + +/* Header Image */ +//$headerHeadlineBackground: rgba($mateColor2, 0.9); +//$headerHeadlineColor: $secondary-text-color; + +/* Header and Navigation */ +//$header-top-color: $secondary-text-color; + +//$navbar-bg-color: $mateColorWhite; +//$navbar-color: $primary-text-color; +//$navbar-active-color: $primary-link-font-color; +//$navbar-dropdown-hover-bg-color: $mateColor1; +//$navbar-dropdown-hover-color: $secondary-text-color; +//$navbar-dropdown-bg: $mateColorWhite; +//$navbar-dropdown-color: $primary-text-color; +//$navbar-stuck-bg-color: rgba($mateColor2, 0.9); +//$navbar-stuck-color: $secondary-text-color; +//$navbar-stuck-active-color: $mateColor3; +//$navbar-stuck-dropdown-hover-bg-color: $mateColor1; +//$navbar-stuck-dropdown-hover-color: $primary-text-color; +//$navbar-stuck-dropdown-color: $secondary-text-color; +//$navbar-stuck-dropdown-bg: rgba($mateColor2, 0.9); + /* News Slider */ //$slider-background: $mateColor2; //$slider-subheadline-color: $secondary-text-color; @@ -133,20 +123,7 @@ //$slider-navigation-hover-headline-color: $secondary-text-color; //$slider-navigation-border-color: $mateColor1; -/* Content Box */ -//$contentbox-first-background: rgba(255,255,255,0.95); -//$contentbox-first-color: $boxes-text-color; -//$contentbox-second-background: rgba(255, 255, 255, 0.65); -//$contentbox-second-color: $boxes-text-color; - /* Tables */ //$table-odd-background: $mateColorWhite; -//$table-even-background: #f5f5f5; -//$table-border-color: #e6e6e6; - -/* Accordion */ -//$accordion-headline-background: $mateColor2; -//$accordion-headline-color: $secondary-text-color; -//$accordion-content-background: $mateColorWhite; -//$accordion-content-color: $primary-text-color; -//$accordion-border-color: $mateColorWhite; +//$table-even-background: $mateColorGreyLight; +//$table-border-color: $mateColorGreyDark; diff --git a/src/Resources/public/sass/_custom_variables_black.scss b/src/Resources/public/sass/_custom_variables_black.scss deleted file mode 100644 index 52d6b68..0000000 --- a/src/Resources/public/sass/_custom_variables_black.scss +++ /dev/null @@ -1,127 +0,0 @@ -/**** - **** mate theme files / mate_variables - **** overrides materialize variables - **** - */ - -/* - * please do not edit this file. - * - * use _custom_variables.scss for update safe overwrites - */ - -$font1: 'Lato Light'; -$font2: 'Old Standard'; -$font3: 'Lato Regular'; - -$mateColor1: #AB9C89; -$mateColor2: #C7A47A; -$mateColor3: #7F684F; -$mateColor4: #211F20; -$mateColor6: #323232; -$mateColorWhite: #fff; -$mateColorBlack: #211F20; -$pageBackground: $mateColorBlack; - -/* - * colors - */ - -$primary-color: $mateColor2; -$secondary-color: $mateColor3; -$text-color: $mateColorWhite; - -/* - * mate theme specific variables - */ - -/* Boxen */ -$boxes-background: #080808; -$boxes-text-color: $mateColorWhite; - -/* header image headline */ -$headerHeadlineBackground: rgba(199, 164, 122, 0.8); -$headerHeadlineColor: #fff; - -/* Links */ -$primary-link-font-color: $mateColor2; -$primary-link-hover-font-color: $mateColor3; - -/* Header Navigation */ -$navbar-bg-color: $mateColorWhite; -$navbar-color: $mateColorBlack; -$navbar-active-color: $mateColor2; -$navbar-dropdown-hover-bg-color: $mateColor1; -$navbar-dropdown-hover-color: $mateColorWhite; -$navbar-dropdown-bg: $mateColorWhite; -$navbar-dropdown-color: $mateColorBlack; -$navbar-stuck-bg-color: rgba(199, 164, 122, 0.8); -$navbar-stuck-color: $mateColorWhite; -$navbar-stuck-active-color: $mateColor3; -$navbar-stuck-dropdown-hover-bg-color: rgba(255,255,255,0.5); -$navbar-stuck-dropdown-hover-color: $mateColorBlack; -$navbar-stuck-dropdown-color: $mateColorWhite; -$navbar-stuck-dropdown-bg: $navbar-stuck-bg-color; - -/* Buttons */ -$button-flat-color: $mateColorWhite; -$button-floating-background: $mateColor2; -$button-floating-background-hover: $mateColor3; - -/* Download and FAQ Elements */ -$download-faqlist-background-odd: $boxes-background; -$download-faqlist-color-odd: $mateColorWhite; -$download-faqlist-color-odd-hover: #f2f2f2; - -$download-faqlist-background-even: $mateColor6; -$download-faqlist-color-even: $mateColorWhite; -$download-faqlist-color-even-hover: #f2f2f2; - -/* Footer */ -$footer-text-color: $mateColorWhite; -$footer-headline-border-color: $footer-text-color; -$footer-secondary-bg-color: $secondary-color; - -/* News Slider */ -$slider-background: $mateColor2; -$slider-subheadline-color: #fff; -$slider-headline-color: #fff; -$slider-teaser-color: #fff; - -$slider-button-background: $mateColor1; -$slider-button-color: $mateColor3; -$slider-button-color-hover: #fff; -$slider-button-background-hover: $mateColor3; - -$slider-arrows-background: $mateColor4; -$slider-arrows-border-color: $mateColor2; -$slider-arrows-color: #fff; - -$slider-navigation-background: $mateColor2; -$slider-navigation-subheadline-color: $mateColorWhite; -$slider-navigation-headline-color: $mateColorWhite; -$slider-navigation-active-background: $mateColor1; -$slider-navigation-active-subheadline-color: #fff; -$slider-navigation-active-headline-color: #fff; -$slider-navigation-hover-background: $mateColor1; -$slider-navigation-hover-subheadline-color: #fff; -$slider-navigation-hover-headline-color: #fff; -$slider-navigation-border-color: $mateColor1; - -/* Content Box */ -$contentbox-first-background: $boxes-background; -$contentbox-first-color: $boxes-text-color; -$contentbox-second-background: $mateColor6; -$contentbox-second-color: $boxes-text-color; - -/* Tables */ -$table-odd-background: $boxes-background; -$table-even-background: $mateColor6; -$table-border-color: #3c3c3c; - -/* Accordion */ -$accordion-headline-background: $mateColor2; -$accordion-headline-color: $mateColorWhite; -$accordion-content-background: $boxes-background; -$accordion-content-color: $mateColorWhite; -$accordion-border-color: $boxes-background; diff --git a/src/Resources/public/sass/_custom_variables_blue.scss b/src/Resources/public/sass/_custom_variables_blue.scss deleted file mode 100644 index 904783a..0000000 --- a/src/Resources/public/sass/_custom_variables_blue.scss +++ /dev/null @@ -1,127 +0,0 @@ -/**** - **** mate theme files / mate_variables - **** overrides materialize variables - **** - */ - -/* - * please do not edit this file. - * - * use _custom_variables.scss for update safe overwrites - */ - -$font1: 'Lato Light'; -$font2: 'Old Standard'; -$font3: 'Lato Regular'; - -$mateColor1: #AB9C89; -$mateColor2: #C7A47A; -$mateColor3: #7F684F; -$mateColor4: #211F20; -$mateColor6: #323232; -$mateColorWhite: #fff; -$mateColorBlack: #211F20; -$pageBackground: $mateColorBlack; - -/* - * colors - */ - -$primary-color: $mateColor2; -$secondary-color: $mateColor3; -$text-color: $mateColorWhite; - -/* - * mate theme specific variables - */ - -/* Boxen */ -$boxes-background: #080808; -$boxes-text-color: $mateColorWhite; - -/* header image headline */ -$headerHeadlineBackground: rgba(199, 164, 122, 0.8); -$headerHeadlineColor: #fff; - -/* Links */ -$primary-link-font-color: $mateColor2; -$primary-link-hover-font-color: $mateColor3; - -/* Header Navigation */ -$navbar-bg-color: $mateColorWhite; -$navbar-color: $mateColorBlack; -$navbar-active-color: $mateColor2; -$navbar-dropdown-hover-bg-color: $mateColor1; -$navbar-dropdown-hover-color: $mateColorWhite; -$navbar-dropdown-bg: $mateColorWhite; -$navbar-dropdown-color: $mateColorBlack; -$navbar-stuck-bg-color: rgba(199, 164, 122, 0.8); -$navbar-stuck-color: $mateColorWhite; -$navbar-stuck-active-color: $mateColor3; -$navbar-stuck-dropdown-hover-bg-color: rgba(255,255,255,0.5); -$navbar-stuck-dropdown-hover-color: $mateColorBlack; -$navbar-stuck-dropdown-color: $mateColorWhite; -$navbar-stuck-dropdown-bg: $navbar-stuck-bg-color; - -/* Buttons */ -$button-flat-color: $mateColorWhite; -$button-floating-background: $mateColor2; -$button-floating-background-hover: $mateColor3; - -/* Download and FAQ Elements */ -$download-faqlist-background-odd: $boxes-background; -$download-faqlist-color-odd: $mateColorWhite; -$download-faqlist-color-odd-hover: #f2f2f2; - -$download-faqlist-background-even: $mateColor6; -$download-faqlist-color-even: $mateColorWhite; -$download-faqlist-color-even-hover: #f2f2f2; - -/* Footer */ -$footer-text-color: $mateColorWhite; -$footer-headline-border-color: $footer-text-color; -$footer-secondary-bg-color: $secondary-color; - -/* News Slider */ -$slider-background: $mateColor2; -$slider-subheadline-color: #fff; -$slider-headline-color: #fff; -$slider-teaser-color: #fff; - -$slider-button-background: $mateColor1; -$slider-button-color: $mateColor3; -$slider-button-color-hover: #fff; -$slider-button-background-hover: $mateColor3; - -$slider-arrows-background: $mateColor4; -$slider-arrows-border-color: $mateColor2; -$slider-arrows-color: #fff; - -$slider-navigation-background: $mateColor2; -$slider-navigation-subheadline-color: $mateColorWhite; -$slider-navigation-headline-color: $mateColorWhite; -$slider-navigation-active-background: $mateColor1; -$slider-navigation-active-subheadline-color: #fff; -$slider-navigation-active-headline-color: #fff; -$slider-navigation-hover-background: $mateColor1; -$slider-navigation-hover-subheadline-color: #fff; -$slider-navigation-hover-headline-color: #fff; -$slider-navigation-border-color: $mateColor1; - -/* Content Box */ -$contentbox-first-background: $boxes-background; -$contentbox-first-color: $mateColorWhite; -$contentbox-second-background: $mateColor6; -$contentbox-second-color: $mateColorWhite; - -/* Tables */ -$table-odd-background: $boxes-background; -$table-even-background: $mateColor6; -$table-border-color: #3c3c3c; - -/* Accordion */ -$accordion-headline-background: $mateColor2; -$accordion-headline-color: $mateColorWhite; -$accordion-content-background: $boxes-background; -$accordion-content-color: $mateColorWhite; -$accordion-border-color: $boxes-background; diff --git a/src/Resources/public/sass/_custom_variables_yellow.scss b/src/Resources/public/sass/_custom_variables_yellow.scss deleted file mode 100644 index 904783a..0000000 --- a/src/Resources/public/sass/_custom_variables_yellow.scss +++ /dev/null @@ -1,127 +0,0 @@ -/**** - **** mate theme files / mate_variables - **** overrides materialize variables - **** - */ - -/* - * please do not edit this file. - * - * use _custom_variables.scss for update safe overwrites - */ - -$font1: 'Lato Light'; -$font2: 'Old Standard'; -$font3: 'Lato Regular'; - -$mateColor1: #AB9C89; -$mateColor2: #C7A47A; -$mateColor3: #7F684F; -$mateColor4: #211F20; -$mateColor6: #323232; -$mateColorWhite: #fff; -$mateColorBlack: #211F20; -$pageBackground: $mateColorBlack; - -/* - * colors - */ - -$primary-color: $mateColor2; -$secondary-color: $mateColor3; -$text-color: $mateColorWhite; - -/* - * mate theme specific variables - */ - -/* Boxen */ -$boxes-background: #080808; -$boxes-text-color: $mateColorWhite; - -/* header image headline */ -$headerHeadlineBackground: rgba(199, 164, 122, 0.8); -$headerHeadlineColor: #fff; - -/* Links */ -$primary-link-font-color: $mateColor2; -$primary-link-hover-font-color: $mateColor3; - -/* Header Navigation */ -$navbar-bg-color: $mateColorWhite; -$navbar-color: $mateColorBlack; -$navbar-active-color: $mateColor2; -$navbar-dropdown-hover-bg-color: $mateColor1; -$navbar-dropdown-hover-color: $mateColorWhite; -$navbar-dropdown-bg: $mateColorWhite; -$navbar-dropdown-color: $mateColorBlack; -$navbar-stuck-bg-color: rgba(199, 164, 122, 0.8); -$navbar-stuck-color: $mateColorWhite; -$navbar-stuck-active-color: $mateColor3; -$navbar-stuck-dropdown-hover-bg-color: rgba(255,255,255,0.5); -$navbar-stuck-dropdown-hover-color: $mateColorBlack; -$navbar-stuck-dropdown-color: $mateColorWhite; -$navbar-stuck-dropdown-bg: $navbar-stuck-bg-color; - -/* Buttons */ -$button-flat-color: $mateColorWhite; -$button-floating-background: $mateColor2; -$button-floating-background-hover: $mateColor3; - -/* Download and FAQ Elements */ -$download-faqlist-background-odd: $boxes-background; -$download-faqlist-color-odd: $mateColorWhite; -$download-faqlist-color-odd-hover: #f2f2f2; - -$download-faqlist-background-even: $mateColor6; -$download-faqlist-color-even: $mateColorWhite; -$download-faqlist-color-even-hover: #f2f2f2; - -/* Footer */ -$footer-text-color: $mateColorWhite; -$footer-headline-border-color: $footer-text-color; -$footer-secondary-bg-color: $secondary-color; - -/* News Slider */ -$slider-background: $mateColor2; -$slider-subheadline-color: #fff; -$slider-headline-color: #fff; -$slider-teaser-color: #fff; - -$slider-button-background: $mateColor1; -$slider-button-color: $mateColor3; -$slider-button-color-hover: #fff; -$slider-button-background-hover: $mateColor3; - -$slider-arrows-background: $mateColor4; -$slider-arrows-border-color: $mateColor2; -$slider-arrows-color: #fff; - -$slider-navigation-background: $mateColor2; -$slider-navigation-subheadline-color: $mateColorWhite; -$slider-navigation-headline-color: $mateColorWhite; -$slider-navigation-active-background: $mateColor1; -$slider-navigation-active-subheadline-color: #fff; -$slider-navigation-active-headline-color: #fff; -$slider-navigation-hover-background: $mateColor1; -$slider-navigation-hover-subheadline-color: #fff; -$slider-navigation-hover-headline-color: #fff; -$slider-navigation-border-color: $mateColor1; - -/* Content Box */ -$contentbox-first-background: $boxes-background; -$contentbox-first-color: $mateColorWhite; -$contentbox-second-background: $mateColor6; -$contentbox-second-color: $mateColorWhite; - -/* Tables */ -$table-odd-background: $boxes-background; -$table-even-background: $mateColor6; -$table-border-color: #3c3c3c; - -/* Accordion */ -$accordion-headline-background: $mateColor2; -$accordion-headline-color: $mateColorWhite; -$accordion-content-background: $boxes-background; -$accordion-content-color: $mateColorWhite; -$accordion-border-color: $boxes-background; diff --git a/src/Resources/public/sass/_mate_colors.scss b/src/Resources/public/sass/_mate_colors.scss new file mode 100644 index 0000000..8017ad5 --- /dev/null +++ b/src/Resources/public/sass/_mate_colors.scss @@ -0,0 +1,41 @@ +/**** + **** mate theme files / mate_variables + **** overrides materialize variables + **** + */ + +/* + * please do not edit this file. + * + * use _custom_variables.scss for update safe overwrites + */ + + +/* ============================= */ +/* MATE Theme Variables */ +/* ============================= */ + +/* Colors */ +$mateColor1: #b6cf92; +$mateColor2: #86af49; +$mateColor3: #476a30; +$mateColor4: #58774e; +$mateColor6: #abbdb1; + +$mateColorWhite: #fff; +$mateColorBlack: #000; +$mateColorGreyLight: #f5f5f5; +$mateColorGreyDark: #e6e6e6; +$pageBackground: #f4f8f0; + +/* Text Colors */ +$primary-text-color: #000; +$secondary-text-color: #fff; + +/* Boxes */ +$boxes-background: $mateColorWhite; +$boxes-text-color: $primary-text-color; + +/* Content Box */ +$contentbox-first-background: rgba(255, 255, 255, 0.95); +$contentbox-second-background: rgba(255, 255, 255, 0.65); diff --git a/src/Resources/public/sass/_mate_variables.scss b/src/Resources/public/sass/_mate_variables.scss index 02af5f2..305c759 100644 --- a/src/Resources/public/sass/_mate_variables.scss +++ b/src/Resources/public/sass/_mate_variables.scss @@ -1,5 +1,5 @@ /**** - **** mate theme files / mate_variables + **** mate theme files / mate_specific_variables **** overrides materialize variables **** */ @@ -10,70 +10,40 @@ * use _custom_variables.scss for update safe overwrites */ -$font1: 'Lato Light'; -$font2: 'Old Standard'; -$font3: 'Lato Regular'; - -$mateColor1: #b6cf92; -$mateColor2: #86af49; -$mateColor3: #476a30; -$mateColor4: #58774e; -$mateColor6: #abbdb1; -$mateColorWhite: #fff; -$mateColorBlack: #000; -$pageBackground: #f4f8f0; - -/* - * colors - */ +/* ============================= */ +/* MATE Theme Variables */ +/* ============================= */ $primary-color: $mateColor2; $secondary-color: $mateColor3; -$primary-text-color: $mateColorBlack; -$secondary-text-color: $mateColorWhite; - -/* - * mate theme specific variables - */ - -/* Boxen */ -$boxes-background: $mateColorWhite; -$boxes-text-color: $primary-text-color; - -/* header image headline */ -$headerHeadlineBackground: rgba(134, 175, 73, 0.84); -$headerHeadlineColor: $secondary-text-color; +/* Fonts */ +$font1: 'Lato Light'; +$font2: 'Old Standard'; +$font3: 'Lato Regular'; /* Links */ $primary-link-font-color: $mateColor2; $primary-link-hover-font-color: $mateColor3; -/* Header - Navigation */ -$header-top-color: $secondary-text-color; - -$navbar-bg-color: $mateColorWhite; -$navbar-color: $primary-text-color; -$navbar-active-color: $mateColor2; -$navbar-dropdown-hover-bg-color: $mateColor1; -$navbar-dropdown-hover-color: $secondary-text-color; -$navbar-dropdown-bg: $mateColorWhite; -$navbar-dropdown-color: $primary-text-color; -$navbar-stuck-bg-color: rgba(134,175,73,0.9); -$navbar-stuck-color: $secondary-text-color; -$navbar-stuck-active-color: $mateColor3; -$navbar-stuck-dropdown-hover-bg-color: rgba(255,255,255,0.5); -$navbar-stuck-dropdown-hover-color: $primary-text-color; -$navbar-stuck-dropdown-color: $secondary-text-color; -$navbar-stuck-dropdown-bg: $navbar-stuck-bg-color; +/* Accordion */ +$accordion-headline-background: $mateColor2; +$accordion-headline-color: $secondary-text-color; +$accordion-content-background: $mateColorWhite; +$accordion-content-color: $primary-text-color; +$accordion-border-color: $mateColorWhite; /* Buttons */ $button-flat-color: $secondary-text-color; $button-floating-background: $mateColor2; $button-floating-background-hover: $mateColor3; +/* Content Box */ +$contentbox-first-color: $boxes-text-color; +$contentbox-second-color: $boxes-text-color; + /* Download and FAQ Elements */ -$download-faqlist-background-odd: rgba(134, 175, 73, 0.15); +$download-faqlist-background-odd: rgba($mateColor2, 0.15); $download-faqlist-color-odd: $mateColor2; $download-faqlist-color-odd-hover: $mateColor3; @@ -81,15 +51,19 @@ $download-faqlist-background-even: $mateColorWhite; $download-faqlist-color-even: $mateColor2; $download-faqlist-color-even-hover: $mateColor3; -/* Events */ +/* Events and News */ $calendar-background: $mateColorWhite; $calendar-border-color: $mateColorWhite; $calendar-text-color: $mateColor2; +$news-date-color: $mateColor6; +$news-category-color: #fff; +$pagination-color: $mateColor4; + /* Footer */ $footer-text-color: $secondary-text-color; -$footer-headline-border-color: $footer-text-color; -$footer-secondary-bg-color: $secondary-color; +$footer-headline-border-color: $secondary-text-color; +$footer-secondary-bg-color: $mateColor3; $footer-news-events-time-color: $mateColor3; $footer-primary-link-color: $secondary-text-color; @@ -97,6 +71,30 @@ $footer-primary-link-color-hover: $primary-link-hover-font-color; $footer-secondary-link-color: $secondary-text-color; $footer-secondary-link-color-hover: $secondary-text-color; +$footer-newsletter-button-background: $mateColor2; + +/* Header Image */ +$headerHeadlineBackground: rgba($mateColor2, 0.9); +$headerHeadlineColor: $secondary-text-color; + +/* Header and Navigation */ +$header-top-color: $secondary-text-color; + +$navbar-bg-color: $mateColorWhite; +$navbar-color: $primary-text-color; +$navbar-active-color: $primary-link-font-color; +$navbar-dropdown-hover-bg-color: $mateColor1; +$navbar-dropdown-hover-color: $secondary-text-color; +$navbar-dropdown-bg: $mateColorWhite; +$navbar-dropdown-color: $primary-text-color; +$navbar-stuck-bg-color: rgba($mateColor2, 0.9); +$navbar-stuck-color: $secondary-text-color; +$navbar-stuck-active-color: $mateColor3; +$navbar-stuck-dropdown-hover-bg-color: $mateColor1; +$navbar-stuck-dropdown-hover-color: $primary-text-color; +$navbar-stuck-dropdown-color: $secondary-text-color; +$navbar-stuck-dropdown-bg: rgba($mateColor2, 0.9); + /* News Slider */ $slider-background: $mateColor2; $slider-subheadline-color: $secondary-text-color; @@ -123,20 +121,7 @@ $slider-navigation-hover-subheadline-color: $secondary-text-color; $slider-navigation-hover-headline-color: $secondary-text-color; $slider-navigation-border-color: $mateColor1; -/* Content Box */ -$contentbox-first-background: rgba(255,255,255,0.95); -$contentbox-first-color: $boxes-text-color; -$contentbox-second-background: rgba(255, 255, 255, 0.65); -$contentbox-second-color: $boxes-text-color; - /* Tables */ $table-odd-background: $mateColorWhite; -$table-even-background: #f5f5f5; -$table-border-color: #e6e6e6; - -/* Accordion */ -$accordion-headline-background: $mateColor2; -$accordion-headline-color: $secondary-text-color; -$accordion-content-background: $mateColorWhite; -$accordion-content-color: $primary-text-color; -$accordion-border-color: $mateColorWhite; +$table-even-background: $mateColorGreyLight; +$table-border-color: $mateColorGreyDark; diff --git a/src/Resources/public/sass/mate.scss b/src/Resources/public/sass/mate.scss index 7a07ee2..e33a610 100644 --- a/src/Resources/public/sass/mate.scss +++ b/src/Resources/public/sass/mate.scss @@ -389,6 +389,10 @@ table { .btn, .btn-large { background-color: $button-floating-background; color: $button-flat-color; + + a { + color: $button-flat-color; + } } .container .row.no-margin { @@ -625,16 +629,16 @@ header { left: 0; width: 100%; z-index: 13; - transition: height .2s; - height: 0; + transition: height .2s; + height: 0; - &.active { - height: 130px; - } + &.active { + height: 130px; + } .formbody { margin: 0; - background: #fff; + background: $navbar-bg-color; border: none; text-align: center; padding: 40px; @@ -686,7 +690,7 @@ nav { } nav { - background-color: rgba($navbar-bg-color, 1); + background-color: rgba($navbar-bg-color, 1); .nav-wrapper { margin-bottom: 0; @@ -803,7 +807,7 @@ nav { margin: 0 auto; .dropdown-content { - display: none; + display: none; } ul { @@ -817,24 +821,24 @@ nav { &, &.active { position: relative; - height: inherit; + height: inherit; display: flex; align-items: center; } &.active { - color: $navbar-active-color; + color: $navbar-active-color; } } &:hover ul.dropdown-content { - display: block; + display: block; } & a:hover, &.active { background-color: transparent; - color: $navbar-active-color; - font-weight: normal; + color: $navbar-active-color; + font-weight: normal; } } @@ -858,37 +862,41 @@ nav { } &.dropdown-content { - background: $navbar-dropdown-bg; - padding: 0; - box-shadow: none; - - li { - float: none; - min-height: inherit; - height: inherit; - padding: 0 25px 0 15px; - - &:hover, &.active, &.selected { - background-color: $navbar-dropdown-hover-bg-color; - } - - a { - padding: 10px 10px 10px 0; - color: $navbar-dropdown-color; - - &:before { - display: none; - } - - &:hover { - color: $navbar-dropdown-hover-color; - } - - &:hover:before { - display: none; - } - } - } + background: $navbar-dropdown-bg; + padding: 0; + box-shadow: none; + + li { + float: none; + min-height: inherit; + height: inherit; + padding: 0 25px 0 15px; + + &:hover, &.active, &.selected { + background-color: $navbar-dropdown-hover-bg-color; + + a { + color: $navbar-dropdown-hover-color; + } + } + + a { + padding: 10px 10px 10px 0; + color: $navbar-dropdown-color; + + &:before { + display: none; + } + + &:hover { + color: $navbar-dropdown-hover-color; + } + + &:hover:before { + display: none; + } + } + } > li { text-transform: none; @@ -968,6 +976,10 @@ nav { &.dropdown-content { background: $navbar-stuck-dropdown-bg; + li:hover { + background: $navbar-stuck-dropdown-hover-bg-color; + } + li a { color: $navbar-stuck-dropdown-color; @@ -993,6 +1005,10 @@ nav { color: $secondary-text-color; } } + + .material-icons { + color: $navbar-stuck-active-color; + } } .headroom--unpinned { @@ -1019,9 +1035,9 @@ nav .brand-logo { } #main, #left, #right { - nav.block { - overflow: hidden; - } + nav.block { + display: table; + } } /* ========================== * @@ -1630,40 +1646,40 @@ nav .brand-logo { .info { margin: 0; font-size: 13px; - color: $mateColor6; + color: $news-date-color; } } } .layout_latest, .layout_teaser { .subheadline { - letter-spacing: 1px; - text-transform: uppercase; - font-size: 12px; - position: absolute; - bottom: 25px; - color: $secondary-text-color; - left: 30px; - font-weight: 700; + letter-spacing: 1px; + text-transform: uppercase; + font-size: 12px; + position: absolute; + bottom: 25px; + color: $news-category-color; + left: 30px; + font-weight: 700; } .inner { .more { - position: absolute; - top: -32px; - right: 30px; - font-size: 36px; - line-height: 36px; - background: $mateColor2; - color: #fff; - padding: 11px 5px 10px 3px; - border-radius: 100%; - width: 60px; - height: 60px; - text-align: center; - font-weight: 700; - box-shadow: -2px 2px 2px 0 rgba(0,0,0,0.25); - -webkit-box-shadow: -2px 2px 2px 0 rgba(0,0,0,0.25); + position: absolute; + top: -32px; + right: 30px; + font-size: 36px; + line-height: 36px; + background: $mateColor2; + color: #fff; + padding: 11px 5px 10px 3px; + border-radius: 100%; + width: 60px; + height: 60px; + text-align: center; + font-weight: 700; + box-shadow: -2px 2px 2px 0 rgba(0,0,0,0.25); + -webkit-box-shadow: -2px 2px 2px 0 rgba(0,0,0,0.25); &:hover { background: $mateColor3; @@ -1683,13 +1699,13 @@ nav .brand-logo { } a.more { - background: $mateColor2; - color: #fff; + background: $button-floating-background; + color: $button-flat-color; display: inline-block; padding: 3px 10px; &:hover { - background: $mateColor3; + background: $button-floating-background-hover; } } } @@ -1708,9 +1724,9 @@ nav .brand-logo { .layout_full { .info { - margin: 20px 0 0; - font-size: 13px; - color: $mateColor6; + margin: 20px 0 0; + font-size: 13px; + color: $news-date-color; } h1 { @@ -1737,48 +1753,45 @@ nav .brand-logo { } .pagination { - clear: left; - margin: 0; - background: none; - box-shadow: none; - width: inherit; - - li { - a, span, strong { - display: block; - border: 1px solid $mateColor6; - padding: 0 10px; - font-size: 12px; - line-height: 30px; - letter-spacing: 1px; - text-transform: uppercase; - - } - - a { - background: transparent; - color: $mateColor4; - } + clear: left; + margin: 0; + background: none; + box-shadow: none; + width: inherit; - span, strong { - background: $mateColor6; - color: #fff; - } + li { + a, span, strong { + display: block; + border: 1px solid $mateColor6; + padding: 0 10px; + font-size: 12px; + line-height: 30px; + letter-spacing: 1px; + text-transform: uppercase; + } - a:hover { - background: $mateColor1; - border: 1px solid $mateColor1; - } + a { + background: transparent; + color: $pagination-color; } - &.block p{ - float: right; - font-size: 14px; - color: $mateColor3; - padding-top: 10px; + span, strong { + background: $mateColor6; + color: #fff; } + a:hover { + background: $mateColor1; + border: 1px solid $mateColor1; + } + } + &.block p { + float: right; + font-size: 14px; + color: $mateColor3; + padding-top: 10px; + } } // contao 4.5 fix @@ -2137,55 +2150,63 @@ footer.page-footer { } footer .container { - padding: 0 0.75rem; + padding: 0 0.75rem; } #footer { - #newsletter { - background: $mateColor1; - text-align: center; + #newsletter { + background: $mateColor1; + text-align: center; - .mod_subscribe { - background: $mateColor1; - } + .mod_subscribe { + background: $mateColor1; + } - h2, h3, h4, h5, h6 { - margin: 0 0 30px; - } + h2, h3, h4, h5, h6 { + margin: 0 0 30px; + } - .mod_subscribe { - margin: 0 auto; - border: none; - padding: 50px 250px; - } + .mod_subscribe { + margin: 0 auto; + border: none; + padding: 50px 250px; + } - .widget-text { - width: 75%; - margin: 0; - } + .widget-text { + width: 75%; + margin: 0; + } - .widget-submit { - width: 25%; - margin: 0; - } + .widget-submit { + width: 25%; + margin: 0; + } - button { - margin: 0; - width: 100%; - padding: 0; - height: 40px; - box-shadow: none; - } + button { + margin: 0; + width: 100%; + padding: 0; + height: 40px; + box-shadow: none; + } - .text { - background: #f4f8f0; - border: 1px solid #f4f8f0; + .text { + background: #f4f8f0; + border: 1px solid #f4f8f0; - &::placeholder { - color: rgba(0, 0, 0, 0.87); - } - } + &::placeholder { + color: rgba(0, 0, 0, 0.87); + } } + + .submit { + background: $footer-newsletter-button-background; + + &:hover { + background: $button-floating-background-hover; + } + } + } } /* ========================== * @@ -2302,7 +2323,7 @@ footer .container { legend { margin-bottom: 10px; - color: $mateColor4; + color: $mateColor4; } } diff --git a/src/Resources/public/sass/mate_color_schemes/mate_blue_colors.scss b/src/Resources/public/sass/mate_color_schemes/mate_blue_colors.scss new file mode 100644 index 0000000..ebcc407 --- /dev/null +++ b/src/Resources/public/sass/mate_color_schemes/mate_blue_colors.scss @@ -0,0 +1,33 @@ +/* + * mate theme files / mate_blue_colors + * + * please do not edit this file. + * use _custom_variables.scss for update safe overwrites + */ + + +/* ============================= */ +/* MATE Theme Variables */ +/* ============================= */ + +/* Colors */ +$mateColor1: #7CBED8; +$mateColor2: #318CB8; +$mateColor3: #0B2F47; +$mateColor4: #224E6B; +$mateColor6: #AFB2BF; + +$primary-text-color: #000; +$secondary-text-color: #fff; + +$boxes-background: #F2F3F7; +$boxes-text-color: $primary-text-color; + +$mateColorWhite: $boxes-background; +$mateColorBlack: #000; +$mateColorGreyLight: #ececec; +$pageBackground: #fff; + +/* Content Box */ +$contentbox-first-background: $boxes-background; +$contentbox-second-background: $mateColorGreyLight; diff --git a/src/Resources/public/sass/mate_color_schemes/mate_dark_colors.scss b/src/Resources/public/sass/mate_color_schemes/mate_dark_colors.scss new file mode 100644 index 0000000..cca5c80 --- /dev/null +++ b/src/Resources/public/sass/mate_color_schemes/mate_dark_colors.scss @@ -0,0 +1,33 @@ +/* + * mate theme files / mate_dark_colors + * + * please do not edit this file. + * use _custom_variables.scss for update safe overwrites + */ + + +/* ============================= */ +/* MATE Theme Variables */ +/* ============================= */ + +/* Colors */ +$mateColor1: #CCBAA6; +$mateColor2: #AB9C89; +$mateColor3: #7f684f; +$mateColor4: #8E7E6C; +$mateColor6: #A8A29D; + +$primary-text-color: #fff; +$secondary-text-color: #fff; + +$boxes-background: #1b1b1b; +$boxes-text-color: $primary-text-color; + +$mateColorWhite: $boxes-background; +$mateColorBlack: #292828; +$mateColorGreyLight: #f2f2f2; +$mateColorGreyDark: #e6e6e6; +$pageBackground: $mateColorBlack; + +$contentbox-first-background: $boxes-background; +$contentbox-second-background: #383838; diff --git a/src/Resources/public/sass/mate_color_schemes/mate_yellow_colors.scss b/src/Resources/public/sass/mate_color_schemes/mate_yellow_colors.scss new file mode 100644 index 0000000..2c3d3d6 --- /dev/null +++ b/src/Resources/public/sass/mate_color_schemes/mate_yellow_colors.scss @@ -0,0 +1,34 @@ +/* + * mate theme files / mate_yellow_colors + * + * please do not edit this file. + * use _custom_variables.scss for update safe overwrites + */ + + +/* ============================= */ +/* MATE Theme Variables */ +/* ============================= */ + +/* Colors */ +$mateColor1: #FFEAAE; +$mateColor2: #FFD753; +$mateColor3: #CCA500; +$mateColor4: #5F5C4D; +$mateColor6: #908C77; + +$primary-text-color: #000; +$secondary-text-color: #000; + +$boxes-background: #F9F9F7; +$boxes-text-color: $primary-text-color; + +$mateColorWhite: $boxes-background; +$mateColorBlack: #000; +$mateColorGreyLight: #f5f5f5; +$mateColorGreyDark: #e6e6e6; +$pageBackground: #fff; + +/* Content Box */ +$contentbox-first-background: $boxes-background; +$contentbox-second-background: #f2f2f2; diff --git a/src/Resources/public/sass/materialize.scss b/src/Resources/public/sass/materialize.scss index f165e6e..8ee1e1f 100644 --- a/src/Resources/public/sass/materialize.scss +++ b/src/Resources/public/sass/materialize.scss @@ -6,7 +6,9 @@ @import "components/color"; // Variables; -@import "mate_variables"; +@import "_mate_colors"; +@import "../../../../../../../files/mate/sass/_custom_colors"; +@import "_mate_variables"; @import "../../../../../../../files/mate/sass/_custom_variables"; @import "components/variables";