[ADD] theme 13.0
This commit is contained in:
Design
@@ -0,0 +1,158 @@
|
||||
//
|
||||
// Color system
|
||||
//
|
||||
|
||||
// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
|
||||
$yiq-contrasted-threshold: 200 !default;
|
||||
|
||||
// Components
|
||||
//
|
||||
// Define common padding and border radius sizes and more.
|
||||
|
||||
$line-height-lg: 1.4 !default;
|
||||
$line-height-sm: 1.4 !default;
|
||||
|
||||
$border-radius: 0 !default;
|
||||
$border-radius-lg: 0 !default;
|
||||
$border-radius-sm: 0 !default;
|
||||
|
||||
$box-shadow-sm: 0 3px 3px -2px rgba(51,51,51,0) !default;
|
||||
$box-shadow: 0 3px 3px -2px rgba(51,51,51,0) !default;
|
||||
$box-shadow-lg: 0 3px 3px -2px rgba(51,51,51,0) !default;
|
||||
|
||||
// Fonts
|
||||
//
|
||||
// Font, line-height, and color for body text, headings, and more.
|
||||
|
||||
$font-size-base: $o-theme-font-size-base !default;
|
||||
|
||||
$line-height-base: 1.4 !default;
|
||||
|
||||
$h1-font-size: $font-size-base * 3 !default;
|
||||
$h2-font-size: $font-size-base * (30 / 14) !default;
|
||||
$h3-font-size: $font-size-base * (24 / 14) !default;
|
||||
$h4-font-size: $font-size-base * (18 / 14) !default;
|
||||
$h5-font-size: $font-size-base * 1 !default;
|
||||
$h6-font-size: $font-size-base * (12 / 14) !default;
|
||||
|
||||
$headings-font-weight: 300 !default;
|
||||
|
||||
$hr-border-color: #eee !default;
|
||||
|
||||
$hr-margin-y: .25rem !default;
|
||||
|
||||
// Buttons + Forms
|
||||
//
|
||||
// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
|
||||
|
||||
$input-btn-padding-y-sm: .375rem !default !default;
|
||||
$input-btn-padding-x-sm: .75rem !default !default;
|
||||
|
||||
$input-btn-padding-y-lg: .625rem !default;
|
||||
$input-btn-padding-x-lg: 2rem !default;
|
||||
|
||||
// Buttons
|
||||
//
|
||||
// For each of Bootstrap's buttons, define text, background, and border color.
|
||||
|
||||
$btn-box-shadow: 0 3px 3px -2px rgba(51,51,51,0) !default;
|
||||
$btn-focus-box-shadow: 0 3px 3px -2px rgba(51,51,51,0) !default;
|
||||
$btn-active-box-shadow: 0 3px 3px -2px rgba(51,51,51,0) !default;
|
||||
|
||||
// Forms
|
||||
|
||||
$label-margin-bottom: 0 !default;
|
||||
|
||||
$input-box-shadow: 0 3px 3px -2px rgba(51,51,51,0) !default;
|
||||
|
||||
$input-focus-box-shadow: 0 3px 3px -2px rgba(51,51,51,0) !default;
|
||||
|
||||
// Dropdowns
|
||||
//
|
||||
// Dropdown menu container and contents.
|
||||
|
||||
$dropdown-padding-y: .3125rem !default;
|
||||
$dropdown-spacer: 0 !default;
|
||||
$dropdown-border-color: palette-gray('200') !default;
|
||||
|
||||
// Navs
|
||||
|
||||
$nav-link-padding-y: .625rem !default;
|
||||
$nav-link-padding-x: .9375rem !default;
|
||||
|
||||
$nav-tabs-border-width: 0 !default;
|
||||
$nav-tabs-link-active-bg: none !default;
|
||||
|
||||
$nav-divider-margin-y: 0 !default;
|
||||
|
||||
// Navbar
|
||||
|
||||
$navbar-padding-y: 1rem !default;
|
||||
$navbar-padding-x: 2.5% !default;
|
||||
|
||||
// Pagination
|
||||
|
||||
$pagination-padding-y: .375rem !default;
|
||||
$pagination-padding-y-sm: .3125rem !default;
|
||||
$pagination-padding-x-sm: .625rem !default;
|
||||
$pagination-padding-y-lg: .625rem !default;
|
||||
$pagination-padding-x-lg: 1rem !default;
|
||||
|
||||
$pagination-focus-box-shadow: 0 !default;
|
||||
|
||||
$pagination-hover-color: palette-theme-color('primary') !default;
|
||||
|
||||
$pagination-active-color: white !default;
|
||||
$pagination-active-bg: palette-theme-color('primary') !default;
|
||||
|
||||
// Badges
|
||||
|
||||
$badge-border-radius: 0.25em !default;
|
||||
|
||||
// Progress bars
|
||||
|
||||
$progress-box-shadow: 0 !default;
|
||||
|
||||
// Image thumbnails
|
||||
|
||||
$thumbnail-box-shadow: 0 3px 3px -2px rgba(51,51,51,0) !default;
|
||||
|
||||
// Breadcrumbs
|
||||
|
||||
$breadcrumb-bg: palette-gray('100') !default;
|
||||
$breadcrumb-divider-color: palette-gray('400') !default;
|
||||
$breadcrumb-active-color: palette-gray('400') !default;
|
||||
|
||||
// Carousel
|
||||
|
||||
$carousel-control-color: palette-theme-color('delta') !default;
|
||||
|
||||
$carousel-indicator-active-bg: palette-theme-color('delta') !default;
|
||||
|
||||
$carousel-caption-color: palette-theme-color('delta') !default;
|
||||
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Non Bootstrap Variables (should not be here but the system is not good enough
|
||||
// to put them at the right place yet)
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
// s_medias_list
|
||||
$s-medias-list-bg-color-main: palette-gray('white');
|
||||
|
||||
// s_numbers
|
||||
$s-numbers-main-bg-color: palette-theme-color('beta');
|
||||
$s-numbers-numbers-color: palette-gray('white');
|
||||
|
||||
// Google Map
|
||||
$s-google-map-desc-bg: palette-theme-color('beta');
|
||||
$s-google-map-desc-hover-bg: palette-theme-color('beta');
|
||||
|
||||
// s_page_header
|
||||
$s-page-header-main-bg-color: palette-theme-color('beta-lighter');
|
||||
$s-page-header-main-font-color: palette-gray('white');
|
||||
$s-page-header-label-font-size: .9em;
|
||||
$s-page-header-label-border-radius: .125rem;
|
||||
$s-page-header-label-padding: .3125rem .5rem;
|
||||
$s-page-header-label-margin: 0 .625rem 0 0;
|
||||
$s-page-header-i-margin: 0 .375rem;
|
||||
@@ -0,0 +1,24 @@
|
||||
|
||||
.bg-img-01 { @include o-theme-sri-bg-image-styles($o-theme-img-01); }
|
||||
.bg-img-02 { @include o-theme-sri-bg-image-styles($o-theme-img-02,white, black); }
|
||||
.bg-img-03 { @include o-theme-sri-bg-image-styles($o-theme-img-03, #F4F4F4, black); }
|
||||
.bg-img-04 { @include o-theme-sri-bg-image-styles($o-theme-img-04, white, black); }
|
||||
.bg-img-05 { @include o-theme-sri-bg-image-styles($o-theme-img-05); }
|
||||
.bg-img-06 { @include o-theme-sri-bg-image-styles($o-theme-img-06,#333, rgba(0, 0, 0, 0), 50%,0%); }
|
||||
.bg-img-07 { @include o-theme-sri-bg-image-styles($o-theme-img-07,white, black); }
|
||||
.bg-img-08 { @include o-theme-sri-bg-image-styles($o-theme-img-08, white, black); }
|
||||
.bg-img-09 { @include o-theme-sri-bg-image-styles($o-theme-img-09); }
|
||||
.bg-img-10 { @include o-theme-sri-bg-image-styles($o-theme-img-10,white, black); }
|
||||
|
||||
.bg_patt-01 { @include o-theme-sri-bg-pattern-styles($o-theme-patt-01, gray('700')); }
|
||||
.bg_patt-02 { @include o-theme-sri-bg-pattern-styles($o-theme-patt-02, gray('700'), $x: 100%, $y: 42%); }
|
||||
.bg_patt-03 { @include o-theme-sri-bg-pattern-styles($o-theme-patt-03, gray('700'), $x: 100%, $y: 42%); }
|
||||
.bg_patt-04 { @include o-theme-sri-bg-pattern-styles($o-theme-patt-04, gray('700'), $x: 100%, $y: 35%); }
|
||||
.bg_patt-05 { @include o-theme-sri-bg-pattern-styles($o-theme-patt-05, #555, $x: 100%, $y: 42%); }
|
||||
.bg_patt-06 { @include o-theme-sri-bg-pattern-styles($o-theme-patt-06, #666, $x: 100%, $y: 36%); }
|
||||
|
||||
@include o-theme-sri-bg-img-thumb-classes((
|
||||
'bg-img-01': $o-theme-img-01, 'bg-img-02': $o-theme-img-02, 'bg-img-03': $o-theme-img-03, 'bg-img-04': $o-theme-img-04, 'bg-img-05': $o-theme-img-05,
|
||||
'bg-img-06': $o-theme-img-06, 'bg-img-07': $o-theme-img-07, 'bg-img-08': $o-theme-img-08, 'bg-img-09': $o-theme-img-09, 'bg-img-10': $o-theme-img-10,
|
||||
'bg-patt-01': $o-theme-patt-01, 'bg-patt-02': $o-theme-patt-02, 'bg-patt-03': $o-theme-patt-03, 'bg-patt-04': $o-theme-patt-04, 'bg-patt-05': $o-theme-patt-05, 'bg-patt-06': $o-theme-patt-06
|
||||
));
|
||||
@@ -0,0 +1,21 @@
|
||||
|
||||
@font-face {
|
||||
font-family: 'et-line';
|
||||
src: url('../fonts/et-line/et-line.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
[data-icon]:before {
|
||||
font-family: 'et-line';
|
||||
content: attr(data-icon);
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
display:inline-block;
|
||||
}
|
||||
@@ -0,0 +1,553 @@
|
||||
// =================================================================
|
||||
// Graphene Theme.
|
||||
// Light colours, thin text, clean and sharp design.
|
||||
// =================================================================
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Responsive margins
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
$lg-margin: 0.8;
|
||||
$md-margin: 0.6;
|
||||
$sm-margin: 0.4;
|
||||
$xs-margin: 0.2;
|
||||
@include o-theme-responsive-spacing-classes($lg-margin, $md-margin, $sm-margin, $xs-margin);
|
||||
|
||||
|
||||
.modal:not(.o_technical_modal) {
|
||||
.modal-header {
|
||||
border-bottom: 1px solid $graphene-ui-light;
|
||||
color: $graphene-ui-dark;
|
||||
.close {
|
||||
text-shadow: 0 1px 0 #000;
|
||||
}
|
||||
}
|
||||
.modal-content {
|
||||
color: $graphene-ui-text;
|
||||
top: 15px;
|
||||
label {
|
||||
font-weight: 300;
|
||||
}
|
||||
hr {
|
||||
border-top-color: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
.card, .panel {
|
||||
background-color : $graphene-ui-light;
|
||||
border: none;
|
||||
}
|
||||
.table-striped > tbody > tr:nth-of-type(2n+1) {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
select, textarea {
|
||||
color: gray('800')est;
|
||||
}
|
||||
form .list-group .form-group {
|
||||
background: rgba(0, 0, 0, 0);
|
||||
border-color: $graphene-ui-light;
|
||||
border-width: 0 0 1px 0
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
background-color : $graphene-ui-dark;
|
||||
border: none;
|
||||
> li > a {
|
||||
color: $graphene-ui-muted;
|
||||
border: none;
|
||||
&:hover {
|
||||
background-color: $graphene-ui-light;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
> li.active > a,
|
||||
> li.active > a:hover,
|
||||
> li.active > a:focus {
|
||||
background-color: $graphene-ui-light;
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
li.search {
|
||||
top: 3px;
|
||||
right: 7px;
|
||||
.pager li > a, .pager li > span {
|
||||
background-color: theme-color('primary');
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
}
|
||||
.pager .disabled >a,
|
||||
.pager .disabled> a:hover,
|
||||
.pager .disabled> a:focus,
|
||||
.pager .disabled> span {
|
||||
background-color: $graphene-ui-light;
|
||||
border: none;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
.form-control {
|
||||
background-color: $graphene-ui-dark;
|
||||
color: #EAEAEA;
|
||||
border:none;
|
||||
}
|
||||
.font-icons:before {
|
||||
top: 7px!important;
|
||||
left: 8px!important;
|
||||
font-size: 1.2em!important;
|
||||
}
|
||||
.o_payment_form {
|
||||
.payment_option_name {
|
||||
color: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
border-bottom : 1px solid rgba(255, 255, 255, 0.05);
|
||||
background-color : $graphene-ui-light;
|
||||
padding-bottom : $modal-header-padding;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding: $modal-header-padding + (5/16) * 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
//================================== BASE ====================================
|
||||
|
||||
// =============================
|
||||
// 3.1 GENERAL LAYOUT ==========
|
||||
// =============================
|
||||
|
||||
#wrap {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
// =============================
|
||||
// 3.2 TYPOGRAPHY ==============
|
||||
// =============================
|
||||
|
||||
.serif {
|
||||
font-family: nth($o-theme-fonts, $o-theme-font-serif-number);
|
||||
}
|
||||
.sans-serif {
|
||||
font-family: nth($o-theme-fonts, $o-theme-font-sans-serif-number);
|
||||
}
|
||||
|
||||
.body {
|
||||
-webkit-font-smoothing : antialiased;
|
||||
-moz-osx-font-smoothing : grayscale;
|
||||
}
|
||||
|
||||
h4, h5, h6 {
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
font-size: 20px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 200;
|
||||
letter-spacing: 0px;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
footer {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
@if $o-theme-layout == 'boxed' {
|
||||
#wrap {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
#wrapwrap {
|
||||
> header, > main {
|
||||
background: #FFF;
|
||||
}
|
||||
|
||||
#graph_header .navbar {
|
||||
padding: 20px 10px;
|
||||
}
|
||||
}
|
||||
|
||||
#graph_header, .o_header_affix {
|
||||
.navbar {
|
||||
> .container {
|
||||
width: 100%;
|
||||
max-width: 1024px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@if $o-theme-layout == 'postcard' {
|
||||
#graph_header {
|
||||
.navbar {
|
||||
padding-left: 2.5%;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
padding-right: 2.5%;
|
||||
}
|
||||
}
|
||||
.nav li.show > a {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
color: #555;
|
||||
}
|
||||
.nav li.show > a {
|
||||
color: #555;
|
||||
}
|
||||
}
|
||||
|
||||
main, footer:not(.modal-footer) {
|
||||
background-color: rgba(0, 0, 0, 0)!important;
|
||||
}
|
||||
|
||||
#wrap, footer:not(.modal-footer) > * {
|
||||
background: #FFF;
|
||||
margin: 0 auto;
|
||||
padding-top: 1px;
|
||||
padding-bottom: 1px;
|
||||
max-width: 1024px;
|
||||
width: 95%;
|
||||
box-shadow: 0 3px 5px 0px rgba(0, 0, 0, 0.18);
|
||||
.container {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
footer:not(.modal-footer) {
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
footer:not(.modal-footer) > * {
|
||||
border-radius:0;
|
||||
margin-top: 0!important;
|
||||
&:last-child {
|
||||
padding: 8px;
|
||||
margin-bottom: 3em!important;
|
||||
}
|
||||
}
|
||||
|
||||
// =========== Others modules compatibility
|
||||
|
||||
.o_wforum_navbar_container {
|
||||
background: #FFF;
|
||||
margin: 0 auto;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 1px;
|
||||
max-width: 1024px;
|
||||
width: 95%;
|
||||
max-width: 100%;
|
||||
a.navbar-brand {
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
main > section.container {
|
||||
background: #FFF;
|
||||
margin: 0 auto;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 1px;
|
||||
max-width: 1024px;
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
#graph_header, .o_header_affix {
|
||||
.navbar {
|
||||
> .container {
|
||||
width: 100%;
|
||||
max-width: 1024px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// =============================
|
||||
// BUTTONS / LABELS ============
|
||||
// =============================
|
||||
|
||||
// ======== Button Customizations
|
||||
@include o-theme-sri-btn-style(0px 3px 3px -2px rgba(51, 51, 51, 0.0), 0px 3px 3px -2px rgba(51, 51, 51, 0.23), 0px 2px 2px -1px rgba(51, 51, 51, 0.23));
|
||||
|
||||
button.btn {
|
||||
outline:0!important;
|
||||
&:focus, &:active {
|
||||
outline:0;
|
||||
}
|
||||
}
|
||||
|
||||
@include o-theme-sri-ripple-animation-styles('graph');
|
||||
|
||||
.tooltip {
|
||||
height: auto;
|
||||
.tooltip-arrow {
|
||||
display: none;
|
||||
}
|
||||
h5 {
|
||||
text-transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
// ==================================
|
||||
// WB builder default classes ===
|
||||
// ==================================
|
||||
|
||||
#wrapwrap {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
#wrap > hr {
|
||||
width: 50%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// =============================
|
||||
// EFFECTS =================
|
||||
// =============================
|
||||
|
||||
@mixin generate-spacing($n) {
|
||||
@for $i from 1 through $n {
|
||||
.letterSpacing#{$i} {
|
||||
letter-spacing:($i)*1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include generate-spacing(10);
|
||||
|
||||
.em2 {
|
||||
font-size: 2em;
|
||||
}
|
||||
.em4 {
|
||||
font-size: 4em;
|
||||
}
|
||||
|
||||
.mo0 {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.title-parent {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title-underlined, .title-boxed {
|
||||
display: inline-block;
|
||||
clear: both;
|
||||
position: relative;
|
||||
|
||||
&:before, &:after {
|
||||
content: "";
|
||||
opacity: .8;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.o_hold {
|
||||
&:before, &:after {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title-underlined {
|
||||
padding-bottom: 0.6em;
|
||||
&:after {
|
||||
margin: .2em auto 0;
|
||||
border-top: 2px solid;
|
||||
width: 0;
|
||||
transition: width 1s ease-in 500ms;
|
||||
}
|
||||
&.o_visible {
|
||||
&:after {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title-boxed{
|
||||
margin: 0.9em 0 1em;
|
||||
padding: 0.25em 0.1em;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
padding: 0.45em 0.8em;
|
||||
}
|
||||
|
||||
&:before, &:after{
|
||||
opacity: 0;
|
||||
border: 2px solid rgba(0, 0, 0, 0);
|
||||
display: initial;
|
||||
@include o-position-absolute(0,0,0,0);
|
||||
transition: e("opacity .75s ease-out 500ms, transform 1s ease-out 500ms");
|
||||
}
|
||||
&:before {
|
||||
transform: scale(0, 1);
|
||||
border-top-color: inherit;
|
||||
border-bottom-color: inherit;
|
||||
}
|
||||
&:after {
|
||||
transform: scale(1, 0);
|
||||
border-right-color: inherit;
|
||||
border-left-color: inherit;
|
||||
}
|
||||
&.o_visible {
|
||||
&:before,&:after {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include o-theme-sri-bg-effects-classes();
|
||||
|
||||
@include o-theme-sri-v-align-class();
|
||||
|
||||
// =============================
|
||||
// === HEADER ==================
|
||||
// =============================
|
||||
@include o-theme-sri-header-styles('graph', rgba(0, 0, 0, 0), gray('900'), uppercase, 600, 0.5, none, gray('800'));
|
||||
|
||||
// =============================
|
||||
// 3.8 Website B. ==============
|
||||
// =============================
|
||||
|
||||
// Restore original toolbar font-family
|
||||
div#website-top-navbar *:not(.fa) {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
// Elements interaction
|
||||
|
||||
// If a title is first child of a box with custom margin-top,
|
||||
// then remove the natural title's margin-top
|
||||
|
||||
[class*='mt'] {
|
||||
> h1, > h2, > h3, > h4, > h5, > h6 {
|
||||
&:first-child{
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// =============================
|
||||
// ==== Top Content ==========
|
||||
// =============================
|
||||
|
||||
@mixin graphene-top-content {
|
||||
z-index: -1;
|
||||
width: 100%;
|
||||
@include o-position-absolute($top: 0, $left: 0);
|
||||
}
|
||||
|
||||
#wrapwrap.o_header_overlay {
|
||||
|
||||
> header:not(.affixed) {
|
||||
|
||||
.navbar-brand {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.navbar-toggle {
|
||||
border-color: white;
|
||||
|
||||
.icon-bar {
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.nav > li {
|
||||
> a {
|
||||
color: white;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.active > a, &:hover > a, li.active > a {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#wrap {
|
||||
> section, > div {
|
||||
&:not([class*='bg-']) {
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//================================== SNIPPETS ====================================
|
||||
|
||||
// =============================
|
||||
// s_text_block ================
|
||||
// =============================
|
||||
|
||||
.s_text_block {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// =============================
|
||||
// s_text_block_image_fw =======
|
||||
// =============================
|
||||
|
||||
.s_text_block_image_fw {
|
||||
div {
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin o-anim-movingBG {
|
||||
0% {
|
||||
background-position: 0% 84%
|
||||
}
|
||||
40% {
|
||||
background-position: 100% 16%
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 84%
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes o-anim_movingBG { @include o-anim-movingBG; }
|
||||
@-moz-keyframes o-anim_movingBG { @include o-anim-movingBG; }
|
||||
@-ms-keyframes o-anim_movingBG { @include o-anim-movingBG; }
|
||||
@-o-keyframes o-anim_movingBG { @include o-anim-movingBG; }
|
||||
@keyframes o-anim_movingBG { @include o-anim-movingBG; }
|
||||
|
||||
// =============================
|
||||
// Google Map
|
||||
// =============================
|
||||
|
||||
we-button.thumb {
|
||||
margin: 2px 7px 6px;
|
||||
float: left;
|
||||
clear: none;
|
||||
width: 50%;
|
||||
|
||||
height: 50px;
|
||||
background-size: cover;
|
||||
outline: 1px solid #626262;
|
||||
opacity: .8;
|
||||
&:hover {opacity: 1}
|
||||
&.active {
|
||||
opacity: 1;
|
||||
outline: 2px solid theme-color('success');
|
||||
}
|
||||
}
|
||||
|
||||
@include o-theme-sri-bg-img-thumb-classes((
|
||||
'stdMap': 'map-default.jpg', 'lightMonoMap': 'map-lightMono.jpg', 'cupertinoMap': 'map-cupertino.jpg',
|
||||
'retroMap': 'map-retro.jpg', 'cobaltMap': 'map-cobalt.jpg', 'flatMap': 'map-flat.jpg', 'blueMap': 'map-blue.jpg',
|
||||
'lillaMap': 'map-lilla.jpg', 'carMap': 'map-caramello.jpg', 'testMap': 'map-default.jpg', 'bwMap': 'map-bw.jpg'
|
||||
));
|
||||
|
||||
/* Ecommerce */
|
||||
@include o-theme-sri-ecommerce-classes();
|
||||
|
||||
// TODO remove me in master
|
||||
button.o_small {
|
||||
&[data-color*="alpha"], &[data-color*="beta"], &[data-color*="gamma"],
|
||||
&[data-color*="delta"], &[data-color*="epsilon"] {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
// TODO remove me in master
|
||||
@@ -0,0 +1 @@
|
||||
$o-theme-font-serif-number: 3;
|
||||
@@ -0,0 +1 @@
|
||||
$o-theme-font-serif-number: 4;
|
||||
@@ -0,0 +1 @@
|
||||
$o-theme-font-serif-number: 5;
|
||||
@@ -0,0 +1 @@
|
||||
$o-theme-font-sans-serif-number: 2;
|
||||
@@ -0,0 +1 @@
|
||||
$o-theme-font-sans-serif-number: 1;
|
||||
@@ -0,0 +1 @@
|
||||
$o-theme-font-sans-serif-number: 6;
|
||||
@@ -0,0 +1 @@
|
||||
$o-theme-layout: 'postcard';
|
||||
@@ -0,0 +1,182 @@
|
||||
$o-theme-font-size-base: (14 / 16) * 1rem;
|
||||
|
||||
$o-theme-img-base-url: "theme_graphene/static/src/img/pictures/";
|
||||
$o-theme-img-2x-prefix: "2x_";
|
||||
$o-theme-thumb-base-url: "theme_graphene/static/src/img/thumbs/";
|
||||
$o-theme-pattern-base-url: "theme_graphene/static/src/img/patterns/";
|
||||
$o-theme-pattern-2x-prefix: "2x_";
|
||||
|
||||
$o-theme-img-01: "bg_image_01.jpg";
|
||||
$o-theme-img-02: "bg_image_02.jpg";
|
||||
$o-theme-img-03: "bg_image_03.jpg";
|
||||
$o-theme-img-04: "bg_image_04.jpg";
|
||||
$o-theme-img-05: "bg_image_05.jpg";
|
||||
$o-theme-img-06: "bg_image_06.jpg";
|
||||
$o-theme-img-07: "bg_image_07.jpg";
|
||||
$o-theme-img-08: "bg_image_08.jpg";
|
||||
$o-theme-img-09: "bg_image_09.jpg";
|
||||
$o-theme-img-10: "bg_image_10.jpg";
|
||||
|
||||
$o-theme-patt-01: "bg_pattern_01.jpg";
|
||||
$o-theme-patt-02: "bg_pattern_02.jpg";
|
||||
$o-theme-patt-03: "bg_pattern_03.jpg";
|
||||
$o-theme-patt-04: "bg_pattern_04.jpg";
|
||||
$o-theme-patt-05: "bg_pattern_05.jpg";
|
||||
$o-theme-patt-06: "bg_pattern_06.jpg";
|
||||
|
||||
// UI colors
|
||||
$graphene-ui-dark: #252931;
|
||||
$graphene-ui-light: #303540;
|
||||
$graphene-ui-text: #fff;
|
||||
$graphene-ui-muted: #9097A8;
|
||||
$graphene-ui-success: #16A085;
|
||||
$graphene-ui-danger: #E77575;
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Snippets
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
// s_showcase_slider
|
||||
// =================
|
||||
|
||||
@mixin s-showcase-slider-navigation-hook {
|
||||
span {
|
||||
text-indent: 100%;
|
||||
background: url("../img/ui/s_showcase_slider-arrow.svg") no-repeat center center;
|
||||
&:before { content: none; }
|
||||
}
|
||||
&:first-of-type {
|
||||
span { transform: rotate(180deg); }
|
||||
}
|
||||
}
|
||||
|
||||
@mixin s-showcase-slider-close-hook {
|
||||
background: url("../img/ui/s_showcase_slider-close.svg") no-repeat center center;
|
||||
text-indent: 100%;
|
||||
}
|
||||
|
||||
@mixin s-showcase-slider-slider-hover-hook {
|
||||
&::after {
|
||||
background: rgba(0, 0, 0, 0.4) url("../img/ui/s_showcase_slider-zoom.svg") no-repeat center center;
|
||||
}
|
||||
}
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Colors
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
// Theme colors
|
||||
$o-theme-color-palettes: (
|
||||
(
|
||||
'alpha': #85AFA8,
|
||||
'beta': #7E566B,
|
||||
'gamma': #85909A,
|
||||
'delta': #969397,
|
||||
'epsilon': #422335,
|
||||
),
|
||||
(
|
||||
'alpha': #54787D,
|
||||
'beta': #6B9997,
|
||||
'gamma': #615145,
|
||||
'delta': #C6CCA5,
|
||||
'epsilon': #412342,
|
||||
|
||||
'success': #5CB85C,
|
||||
'info': #4D68A3,
|
||||
'warning': #DDC66B,
|
||||
'danger': #D86060,
|
||||
),
|
||||
(
|
||||
'alpha': #456F74,
|
||||
'beta': #EB5937,
|
||||
'gamma': #403D3C,
|
||||
'delta': #1C1919,
|
||||
'epsilon': #D3CBBD,
|
||||
|
||||
'success': #31B05E,
|
||||
'info': #4D68A3,
|
||||
'warning': #EACF41,
|
||||
'danger': #CB3E3E,
|
||||
),
|
||||
(
|
||||
'alpha': #23C59E,
|
||||
'beta': #FF5B5B,
|
||||
'gamma': #FFE9C7,
|
||||
'delta': #545445,
|
||||
'epsilon': #2D2D36,
|
||||
|
||||
'success': #5CB85C,
|
||||
),
|
||||
);
|
||||
|
||||
// Grays
|
||||
$-black: #000000;
|
||||
$o-gray-color-palettes: ();
|
||||
@each $-palette in $o-theme-color-palettes {
|
||||
$o-gray-color-palettes: append($o-gray-color-palettes, (
|
||||
'black': $-black,
|
||||
'975': lighten($-black, 13%),
|
||||
'950': lighten($-black, 16%),
|
||||
'925': lighten($-black, 19%),
|
||||
'900': lighten($-black, 22%),
|
||||
'800': lighten($-black, 25%),
|
||||
'700': lighten($-black, 33.5%),
|
||||
'650': lighten($-black, 50%),
|
||||
'600': lighten($-black, 65.5%),
|
||||
'400': lighten($-black, 82%),
|
||||
'200': lighten($-black, 93.5%),
|
||||
'white': lighten($-black, 100%),
|
||||
));
|
||||
}
|
||||
|
||||
// Colors
|
||||
$o-color-palettes: ();
|
||||
@each $-palette in $o-theme-color-palettes {
|
||||
$o-color-palettes: append($o-color-palettes, (
|
||||
'body': #fefefe,
|
||||
'menu': #fefefe,
|
||||
'footer': #f8f8f8,
|
||||
));
|
||||
}
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Website customizations
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
$o-website-values-palettes: (
|
||||
(
|
||||
'font-number': 1,
|
||||
'headings-font-number': 6,
|
||||
'navbar-font-number': 1,
|
||||
'buttons-font-number': 1,
|
||||
),
|
||||
);
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Fonts
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
$o-theme-fonts: (
|
||||
('Heebo', sans-serif),
|
||||
('Abel', sans-serif),
|
||||
('Cinzel', serif),
|
||||
('Old Standard TT', serif),
|
||||
('Playfair Display', serif),
|
||||
('Source Sans Pro', sans-serif),
|
||||
);
|
||||
$o-theme-font-urls: (
|
||||
'Heebo:300,300i,400,400i,700,700i',
|
||||
'Abel:300,300i,400,400i,700,700i',
|
||||
'Cinzel:300,300i,400,400i,700,700i',
|
||||
'Old+Standard+TT:300,300i,400,400i,700,700i',
|
||||
'Playfair+Display:300,300i,400,400i,700,700i',
|
||||
'Source+Sans+Pro:300,300i,400,400i,700,700i',
|
||||
);
|
||||
$o-theme-font-names: (
|
||||
'Heebo',
|
||||
'Abel',
|
||||
'Cinzel',
|
||||
'Old Standard',
|
||||
'Playfair Display',
|
||||
'Source Sans Pro',
|
||||
);
|
||||
@@ -0,0 +1,9 @@
|
||||
// TODO Maybe we should handle light/dark variation in standard in such a way no
|
||||
// extra classes are created (border-alpha-light, btn-epsilon-dark, ...)
|
||||
$-palettes: $o-theme-color-palettes;
|
||||
$o-theme-color-palettes: ();
|
||||
$-variations: ('lighter': 10%, 'light': 5%, 'dark': -5%, 'darker': -10%);
|
||||
@each $-palette in $-palettes {
|
||||
$o-theme-color-palettes: append($o-theme-color-palettes, o-theme-common-add-color-variations($-palette, $-palette, $-variations));
|
||||
}
|
||||
$o-user-theme-color-palette: o-theme-common-add-color-variations($o-user-theme-color-palette, $o-user-theme-color-palette, $-variations);
|
||||
Reference in New Issue
Block a user