diff options
Diffstat (limited to 'addons/theme_default/static/src/scss')
10 files changed, 576 insertions, 0 deletions
diff --git a/addons/theme_default/static/src/scss/colors.scss b/addons/theme_default/static/src/scss/colors.scss new file mode 100644 index 00000000000..fbfa3d35269 --- /dev/null +++ b/addons/theme_default/static/src/scss/colors.scss @@ -0,0 +1,95 @@ +/* Clean Colors */ + +@color-blue: #3498DB; +@color-turquoise: #1ABC9C; +@color-green: #2ECC71; +@color-yellow: #F1C40F; +@color-orange: #E67E22; +@color-red: #E74C3C; +@color-pink: #f74b94; +@color-purple: #9B59B6; +@color-brown: #7b5844; + +@color-blue-dark: #2980B9; +@color-turquoise-dark: #16A085; +@color-green-dark: #27AE60; +@color-yellow-dark: #f3ac12; +@color-orange-dark: #D35400; +@color-red-dark: #C0392B; +@color-pink-dark: #ea3884; +@color-purple-dark: #8E44AD; +@color-brown-dark: #604434; + +@color-blue-light: lighten(@color-blue, 20%); +@color-turquoise-light: lighten(@color-turquoise, 20%); +@color-green-light: lighten(@color-green, 20%); +@color-yellow-light: lighten(@color-yellow, 20%); +@color-orange-light: lighten(@color-orange, 20%); +@color-red-light: lighten(@color-red, 20%); +@color-pink-light: lighten(@color-pink, 20%); +@color-purple-light: lighten(@color-purple, 20%); +@color-brown-light: lighten(@color-brown, 20%); + +@color-clouds: #ECF0F1; +@color-silver: #BDC3C7; +@color-concrete: #95A5A6; +@color-stone: #7F8C8D; +@color-asphalt: #34495E; +@color-midnight: #2C3E50; + + +@color-concrete-dark: #445b5c; + +/* +++++ NEW COLORS +++++ */ + +@color-wind: #f7f7f7; +@color-clay: #e1dcd5; +@color-sand: #c5bcb1; +@color-beach: #f3bf91; +@color-forest: #254c3a; +@color-twilight: #3b2c50; +@color-burgundy: #8e362d; +@color-marine: #212d3a; + +/* GRAYS --------------------------------------------------------- */ + +@gray-darker: lighten(#000, 20%); +@gray-dark: lighten(#000, 40%); +@gray: lighten(#000, 55%); +@gray-light: lighten(#000, 70%); +@gray-lighter: lighten(#000, 80%); + +/* Backgrounds Colors ------------------------------------------------*/ + +@bg-blue: background(@color-blue); +@bg-turquoise: background(@color-turquoise); +@bg-green: background(@color-green); +@bg-yellow: background(@color-yellow); +@bg-orange: background(@color-orange); +@bg-red: background(@color-red); +@bg-pink: background(@color-pink); +@bg-purple: background(@color-purple); +@bg-brown: background(@color-brown); + + +/* ---- Default Color HTML Class ---- */ + +.bg-blue { background-color: @color-blue;} +.bg-turquoise { background-color: @color-turquoise;} +.bg-green { background-color: @color-green;} +.bg-yellow { background-color: @color-yellow;} +.bg-orange { background-color: @color-orange;} +.bg-red { background-color: @color-red;} +.bg-pink { background-color: @color-pink;} +.bg-purple { background-color: @color-purple;} +.bg-brown { background-color: @color-brown;} + +.text-blue { color: @color-blue;} +.text-turquoise { color: @color-turquoise;} +.text-green { color: @color-green;} +.text-yellow { color: @color-yellow;} +.text-orange { color: @color-orange;} +.text-red { color: @color-red;} +.text-pink { color: @color-pink;} +.text-purple { color: @color-purple;} +.text-brown { color: @color-brown;}
\ No newline at end of file diff --git a/addons/theme_default/static/src/scss/customize_modal.scss b/addons/theme_default/static/src/scss/customize_modal.scss new file mode 100644 index 00000000000..ce963f659a3 --- /dev/null +++ b/addons/theme_default/static/src/scss/customize_modal.scss @@ -0,0 +1,18 @@ + +#theme_customize_modal { + .modal-h5 { + color: #ffffff; + font-family: "Lato-Regular"; + font-weight: normal; + text-transform: uppercase; + letter-spacing: normal; + font-size: 14px; + color: white; + padding: 4px 0 4px 4px; + background-color: #bdc3c7; + } + table { + width: 100%; + margin-bottom: 8px; + } +} diff --git a/addons/theme_default/static/src/scss/option_color_amethyst.scss b/addons/theme_default/static/src/scss/option_color_amethyst.scss new file mode 100644 index 00000000000..ef509d6325d --- /dev/null +++ b/addons/theme_default/static/src/scss/option_color_amethyst.scss @@ -0,0 +1,77 @@ +/* GRAYS --------------------------------------------------------- */ + +@gray-darker: lighten(#000, 30%); + +/* COLORS --------------------------------------------------------- */ + +@color-primary: @color-purple; +@color-success: @color-purple-dark; +@color-info: @color-twilight; +@color-warning: @color-red-dark; +@color-danger: @color-midnight; + +/* COLORED BG -------------------------------------------------------- */ + +.bg-primary { + background-color: @color-clouds; +} +.bg-success { + background-color: @color-purple; +} +.bg-info { + background-color: @color-twilight; +} +.bg-warning { + background-color: @color-purple-dark; +} +.bg-danger { + background-color: @color-midnight; +} + +/* TEXTS & LINKS --------------------------------------------------- */ + +@text-muted: @color-primary; +@link-color: @color-primary; +@link-hover-color: @color-success; + +/* BUTTONS --------------------------------------------------------- */ + +@btn-primary-bg: @color-silver; +@btn-success-bg: @color-concrete; +@btn-info-bg: @color-purple; +@btn-warning-bg: @color-purple-light; +@btn-danger-bg: @color-red; + +.btn .fa { + color: white;} + +.btn-default .fa { + color: @gray-dark;} + +/* TRANSPARENT BG --------------------------------------------------- */ +/* Used in snippets Prx Image Color and Prx Image Shade ------------- */ + +.bg-transparent-color { background: @color-twilight; opacity: 0.85;} +.bg-transparent-shade { background: black; opacity: 0.5;} + +/* Footer ----------------------------------------------------------- */ + +#wrapwrap footer { + background-color: @color-concrete-dark; + color: @gray-light; + } +footer ul li a { + color: @color-clouds; + } +footer ul li a:hover { + color: white; + text-decoration: none; + } +footer h4 { + color: @gray-lighter; + padding-bottom: 12px; + text-transform: uppercase; + } +footer .fa { + color: @color-concrete; + }
\ No newline at end of file diff --git a/addons/theme_default/static/src/scss/option_color_cobalt.scss b/addons/theme_default/static/src/scss/option_color_cobalt.scss new file mode 100644 index 00000000000..a7e90b26be1 --- /dev/null +++ b/addons/theme_default/static/src/scss/option_color_cobalt.scss @@ -0,0 +1,74 @@ +/* COLORS --------------------------------------------------------- */ + +@color-primary: @color-blue; +@color-success: @color-turquoise; +@color-info: @color-green; +@color-warning: @color-asphalt; +@color-danger: @color-midnight; + +/* COLORED BG -------------------------------------------------------- */ + +.bg-primary { + background-color: @color-wind; +} +.bg-success { + background-color: @color-silver; +} +.bg-info { + background-color: @color-blue; +} +.bg-warning { + background-color: @color-blue-dark; +} +.bg-danger { + background-color: @color-asphalt; +} + +/* TEXTS & LINKS --------------------------------------------------- */ + +@text-muted: @color-primary; +@link-color: @color-primary; +@link-hover-color: @color-info; + +/* BUTTONS --------------------------------------------------------- */ + +@btn-primary-bg: @color-blue; +@btn-success-bg: @color-turquoise; +@btn-info-bg: @color-green; +@btn-warning-bg: @color-orange; +@btn-danger-bg: @color-red; + +.btn .fa { + color: white;} + +.btn-default .fa { + color: @gray-dark;} + +/* TRANSPARENT BG --------------------------------------------------- */ +/* Used in snippets Prx Image Color and Prx Image Shade ------------- */ + +.bg-transparent-color { background: @color-blue-dark; opacity: 0.9;} +.bg-transparent-shade { background: black; opacity: 0.5;} + +/* Footer ----------------------------------------------------------- */ + +#wrapwrap footer { + background-color: @color-midnight; + color: @gray; +} +footer ul li a { + color: @color-silver; +} + +footer ul li a:hover { + color: @color-clouds; + text-decoration: none; +} +footer h4 { + color: @color-stone; + padding-bottom: 12px; + text-transform: uppercase; +} +footer .fa { + color: @gray-light; +} diff --git a/addons/theme_default/static/src/scss/option_color_emerald.scss b/addons/theme_default/static/src/scss/option_color_emerald.scss new file mode 100644 index 00000000000..69df3204fcc --- /dev/null +++ b/addons/theme_default/static/src/scss/option_color_emerald.scss @@ -0,0 +1,73 @@ +/* COLORS --------------------------------------------------------- */ + +@color-primary: @color-green; +@color-success: @color-turquoise; +@color-info: @color-turquoise-dark; +@color-warning: @color-asphalt; +@color-danger: @color-midnight; + +/* COLORED BG -------------------------------------------------------- */ + +.bg-primary { + background-color: @color-wind; +} +.bg-success { + background-color: @color-silver; +} +.bg-info { + background-color: @color-green-dark; +} +.bg-warning { + background-color: @color-green; +} +.bg-danger { + background-color: @color-forest; +} + +/* TEXTS & LINKS --------------------------------------------------- */ + +@text-muted: @color-success; +@link-color: @color-success; +@link-hover-color: @color-primary; + +/* BUTTONS --------------------------------------------------------- */ + +@btn-primary-bg: @color-green; +@btn-success-bg: @color-turquoise; +@btn-info-bg: @color-blue; +@btn-warning-bg: @color-orange; +@btn-danger-bg: @color-red; + +.btn .fa { + color: white;} + +.btn-default .fa { + color: @gray-dark;} + +/* TRANSPARENT BG --------------------------------------------------- */ +/* Used in snippets Prx Image Color and Prx Image Shade ------------- */ + +.bg-transparent-color { background: @color-green-dark; opacity: 0.9;} +.bg-transparent-shade { background: black; opacity: 0.5;} + +/* Footer ----------------------------------------------------------- */ + +#wrapwrap footer { + background-color: @color-concrete-dark; + color: @gray; + } +footer ul li a { + color: @color-clouds; + } +footer ul li a:hover { + color: white; + text-decoration: none; + } +footer h4 { + color: @color-silver; + padding-bottom: 12px; + text-transform: uppercase; + } +footer .fa { + color: @color-clouds; + } diff --git a/addons/theme_default/static/src/scss/option_color_gold.scss b/addons/theme_default/static/src/scss/option_color_gold.scss new file mode 100644 index 00000000000..77fe9a683df --- /dev/null +++ b/addons/theme_default/static/src/scss/option_color_gold.scss @@ -0,0 +1,77 @@ +/* COLORS --------------------------------------------------------- */ + +@color-primary: @color-orange; +@color-success: @color-red; +@color-info: @color-yellow-dark; +@color-warning: @color-red-dark; +@color-danger: @color-orange-dark; + +/* COLORED BG -------------------------------------------------------- */ + +.bg-primary { + background-color: @color-sand; +} +.bg-success { + background-color: @color-yellow; +} +.bg-info { + background-color: @color-orange; +} +.bg-warning { + background-color: @color-yellow-dark; +} +.bg-danger { + background-color: @color-orange-dark; +} + +/* TEXTS & LINKS ------------------------------------------------------- */ + +@text-muted: @gray; +@link-color: @color-info; +@link-hover-color: @color-primary; + +/* BUTTONS --------------------------------------------------------- */ + +@btn-primary-bg: @color-yellow; +@btn-success-bg: @color-orange; +@btn-info-bg: @color-yellow-dark; +@btn-warning-bg: @color-orange-dark; +@btn-danger-bg: @color-red-dark; + +.btn .fa { + color: white;} + +.btn-default .fa { + color: @gray-dark;} + +/* TRANSPARENT BG --------------------------------------------------- */ +/* Used in snippets Prx Image Color and Prx Image Shade ------------- */ + +.bg-transparent-color { background: @color-orange-dark; opacity: 0.85;} +.bg-transparent-shade { background: black; opacity: 0.5;} + +/* Footer ----------------------------------------------------------- */ + +#wrapwrap footer { + background-color: @color-orange-dark; + color: white; + } +footer ul li a { + color: @color-beach; + } +footer ul li a:hover { + color: @color-yellow; + text-decoration: none; + } +footer h4 { + color: @color-beach; + padding-bottom: 12px; + text-transform: uppercase; + } +footer .fa { + color: @color-beach; + } + + + + diff --git a/addons/theme_default/static/src/scss/option_color_ruby.scss b/addons/theme_default/static/src/scss/option_color_ruby.scss new file mode 100644 index 00000000000..63bca9ecc92 --- /dev/null +++ b/addons/theme_default/static/src/scss/option_color_ruby.scss @@ -0,0 +1,78 @@ +/* GRAYS --------------------------------------------------------- */ + +@gray: lighten(#000, 50%); + +/* COLORS --------------------------------------------------------- */ + +@color-primary: @color-red; +@color-success: @color-red-dark; +@color-info: @color-orange; +@color-warning: @color-purple; +@color-danger: @color-orange-dark; + +/* COLORED BG -------------------------------------------------------- */ + +.bg-primary { + background-color: @color-sand; +} +.bg-success { + background-color: @color-red; +} +.bg-info { + background-color: @color-red-dark; +} +.bg-warning { + background-color: @color-orange; +} +.bg-danger { + background-color: @color-orange-dark; +} + +/* TEXT & LINKS -------------------------------------------------------- */ + +@text-muted: @gray; +@link-color: @color-primary; +@link-hover-color: @color-success; + +/* BUTTONS --------------------------------------------------------- */ + +@btn-primary-bg: @color-red; +@btn-success-bg: @color-orange; +@btn-info-bg: @color-yellow-dark; +@btn-warning-bg: @color-orange-dark; +@btn-danger-bg: @color-red-dark; + +.btn .fa { + color: white;} + +.btn-default .fa { + color: @gray-dark;} + +/* TRANSPARENT BG --------------------------------------------------- */ +/* Used in snippets Prx Image Color and Prx Image Shade ------------- */ + +.bg-transparent-color { background: @color-red-dark; opacity: 0.85;} +.bg-transparent-shade { background: black; opacity: 0.5;} + +/* Footer ----------------------------------------------------------- */ + +#wrapwrap footer { + background-color: @color-burgundy; + color: @gray-lighter; + } +footer ul li a { + color: white; + } +footer ul li a:hover { + color: @color-orange; + text-decoration: none; + } +footer h4 { + color: @color-sand; + padding-bottom: 12px; + text-transform: uppercase; + } +footer .fa { + color: @color-red; + } + diff --git a/addons/theme_default/static/src/scss/option_color_stone.scss b/addons/theme_default/static/src/scss/option_color_stone.scss new file mode 100644 index 00000000000..e3a217f14a2 --- /dev/null +++ b/addons/theme_default/static/src/scss/option_color_stone.scss @@ -0,0 +1,76 @@ +/* COLORS --------------------------------------------------------- */ + +@color-primary: @color-concrete; +@color-success: @color-turquoise; +@color-info: @color-stone; +@color-warning: @color-concrete-dark; +@color-danger: @color-midnight; + +/* COLORED BG -------------------------------------------------------- */ + +.bg-primary { + background-color: @color-clouds; +} +.bg-success { + background-color: @color-silver; +} +.bg-info { + background-color: @color-stone; +} +.bg-warning { + background-color: @color-concrete-dark; +} +.bg-danger { + background-color: @color-asphalt; +} + +/* TEXT & LINKS -------------------------------------------------------- */ + +@text-muted: @color-primary; +@link-color: @color-primary; +@link-hover-color: @color-info; + +/* BUTTONS --------------------------------------------------------- */ + +@btn-primary-bg: @color-concrete; +@btn-success-bg: @color-blue; +@btn-info-bg: @color-asphalt; +@btn-warning-bg: @color-red; +@btn-danger-bg: @color-red-dark; + +.btn .fa { + color: white;} + +.btn-default .fa { + color: @gray-dark;} + +/* TRANSPARENT BG --------------------------------------------------- */ +/* Used in snippets Prx Image Color and Prx Image Shade ------------- */ + +.bg-transparent-color { background: @color-stone; opacity: 0.9;} +.bg-transparent-shade { background: black; opacity: 0.5;} + +/* Footer ----------------------------------------------------------- */ + +#wrapwrap footer { + background-color: @color-concrete-dark; + color: @color-concrete; + } +footer ul li a { + color: @color-clouds; + } +footer ul li a:hover { + color: white; + text-decoration: none; + } +footer h4 { + color: @color-silver; + padding-bottom: 12px; + text-transform: uppercase; + } +footer .fa { + color: @color-clouds; + } + + + diff --git a/addons/theme_default/static/src/scss/option_font.scss b/addons/theme_default/static/src/scss/option_font.scss new file mode 100644 index 00000000000..2ce3b03e62c --- /dev/null +++ b/addons/theme_default/static/src/scss/option_font.scss @@ -0,0 +1,2 @@ +@font-family-sans-serif: Georgia, "Times New Roman", Times, serif; +@font-family-serif: "Helvetica Neue", Helvetica, Arial, sans-serif; diff --git a/addons/theme_default/static/src/scss/option_layout_boxed.scss b/addons/theme_default/static/src/scss/option_layout_boxed.scss new file mode 100644 index 00000000000..4e258175923 --- /dev/null +++ b/addons/theme_default/static/src/scss/option_layout_boxed.scss @@ -0,0 +1,6 @@ +#wrapwrap { + @media (min-width: @screen-sm-min){ + width: 85%; + margin: 0 auto; + } +} |