diff options
author | Achilleas Pipinellis <axilleas@axilleas.me> | 2017-08-12 16:47:56 +0300 |
---|---|---|
committer | Achilleas Pipinellis <axilleas@axilleas.me> | 2017-08-12 16:54:51 +0300 |
commit | 2c7d159f0e08a8dd7ec3d259a1e3140506b6e46e (patch) | |
tree | 5277ed2c18b74de0e12ef047f8760afb64ca7fef /content | |
parent | 524709e9faa0664c9696a7125edd61f73cc3d7ea (diff) |
Split ToC and variables scss
Diffstat (limited to 'content')
-rw-r--r-- | content/assets/stylesheets/_variables.scss | 230 | ||||
-rw-r--r-- | content/assets/stylesheets/footer.scss | 179 | ||||
-rw-r--r-- | content/assets/stylesheets/stylesheet.scss | 191 | ||||
-rw-r--r-- | content/assets/stylesheets/toc.scss | 146 |
4 files changed, 378 insertions, 368 deletions
diff --git a/content/assets/stylesheets/_variables.scss b/content/assets/stylesheets/_variables.scss new file mode 100644 index 00000000..7acfc416 --- /dev/null +++ b/content/assets/stylesheets/_variables.scss @@ -0,0 +1,230 @@ +// Breakpoints +$mobile-width: 800px; + +// Border radius +$border-radius: 3px; + +// Fonts +$mono-font-family: "Menlo", "Liberation Mono", "Consolas", "DejaVu Sans Mono", "Ubuntu Mono", "Courier New", "Andale Mono", "Lucida Console", monospace; +$sans-font-family: "Source Sans Pro", sans-serif; + +// Link colors +$link-color: #3084bb; +$link-color-hover: #20597e; +$link-code-color: rgb(55, 119, 176); + +// Inline code colors +$code-color: #c7254e; +$code-background-color: #f9f2f4; + +// Home page colors +$landing-background: #f9f9f9; +$landing-header-background: #34373c; +$topic-border: rgb(215, 215, 215); +$topic-ce-header-color: rgb(1, 120, 85); +$topic-ee-header-color: rgb(9, 96, 153); +$topic-omnibus-header-color: rgb(107, 79, 187); +$topic-runner-header-color: rgb(203, 88, 15); + +// Other colors +$toc-bg-color: rgba(244, 247, 248, .7); +$toc-border: rgb(229, 229, 229); +$border-color: #e5e5e5; +$border-color-light: #f0f0f0; +$table-border-color: $border-color; +$thead-border-color: rgba(170, 170, 170, .5); +$hr-border-color: $border-color; +$blockquote-border-color: rgb(0, 188, 242); +$blockquote-background-color: rgb(239, 246, 251); +$pre-background-color: rgba(238, 238, 238, .35); +$body-color: rgba(0, 0, 0, .85); +$body-background-color: rgb(249, 249, 249); +$main-background-color: rgb(255, 255, 255); +$search-border: rgba(0, 0, 0, .25); +$h-border-bottom: rgba(125, 134, 140, .2); +$h1-border-bottom: rgb(241, 139, 33); +$main-box-shadow: rgba(0, 0, 0, .1); +$white: #fff; +$black: #333; + +// Footer variables + +$color-white: #fff; +$color-white-alt: #d9ccff; +$color-transparent: rgba(0, 0, 0, 0); + +$color-dark: #000; + +$color-gray: #777; +$color-gray-medium: #ddd; +$color-gray-light: #aaa; +$color-gray-extra-light: #e7e7e7; + +$color-green: #18be97; + +$color-red: #f00; + +$color-primary: #548; +$color-primary-alt: #6b4fbb; +$color-secondary: #e14329; +$color-secondary-alt: #fba225; +$color-subfooter-bg: rgb(85, 68, 136); + +$color-primary-medium: #503991; + +$divider-color: #d3d3d3; + +$link-color: #55acee; +$link-code-color: rgb(55, 119, 176); + +$border-color: #dfdfdf; + +$header-text-light-color: #a69ebd; + +$team-content-color: #999; +$member-name-color: #333; +$member-shadow-color: #ccc; +$member-social-color: #ccc; + +$blog-color-text: #222; +$blog-color-note: #666; +$blog-color-heading: #fff; +$blog-color-purple: rgb(107, 79, 187); +$blog-color-mk-border: #ccc; +$blog-color-date: #888; +$blog-color-overlay-border: #eee; +$blog-color-border-shadow: rgba(0, 0, 0, .1); +$blog-color-image-from: rgba(0, 0, 0, 0); +$blog-color-image-to: rgba(0, 0, 0, .8); +$blog-color-ipanel-heading: rgba(221, 221, 221, .5); +$blog-color-legacy-image-from: rgba(85, 68, 136, .8); +$blog-color-legacy-image-to: rgba(72, 135, 197, .92); + +// legacy blog variables that were used by other pages + +$blog-date-color: #999; +$blog-text-color: #444; +$blog-notes-color: #606060; +$blog-image-color-to: #4887c5; +$blog-divider-color: #128bee; +$blog-table-background: #faf9f9; +$blog-table-background-hover: #f4f8fe; +$blog-table-border: #efeff1; + +$release-manager-list-bg: #403366; +$release-manager-table-border: #584985; +$release-manager-table-header-color: #9583c9; +$release-manager-current-table-data-color: #ff9; + +$mvp-list-bg: #403366; +$mvp-table-border: #584985; +$mvp-table-header-color: #9583c9; + +$landing-community-bg: #34373c; +$landing-organization-color: #d7d7d7; + +$downloads-btn-color: #7769a0; +$downloads-btn-hover-color: #403366; +$downloads-code-color: #403366; +$downloads-step-link-color: #ffb800; +$downloads-step-color: #e3dcf7; + +$contact-color: #bbb4cf; +$contact-btn-bg: #887ab6; + +$consultancy-bg-color: #272120; + +$gs-btn-bg: #129bee; +$gs-btn-hover-bg: #6144b8; + +$applications-title-color: #373737; +$applications-app-shadow-color: #e0e0e0; + +$link-box-color: #333; +$link-box-border-color: #7863b6; +$link-box-hover-bg: #f4f0ff; + +$pricing-primary: #129bee; +$subscription-header-bg: #444; +$subs-header-color: #242424; +$subs-header-sub-color: #979797; +$subs-header-hr-color: #d4d4d4; +$pricing-header-color-to: #4887c5; +$pricing-gray-bg: #fafafa; + +$blueish-gray: #a1a1a2; + +$dropdown-text-color: #626262; +$dropdown-caret-color: #c4c4c4; +$dropdown-border-color: #eaeaea; +$dropdown-focus-color: #c4c4c4; +$dropdown-hover-color: #f7faff; + +$dropdown-filter-border-color: rgba(0, 0, 0, .1); +$dropdown-fa-color: #c7c7c7; +$dropdown-fa-focus-color: #555; + +$formula-variable-bg: #f9f9f9; +$formula-text-color: #9d9d9d; +$formula-value-color: #444; + +// Bootstrap overrides +$breadcrumb-separator: ">"; +$breadcrumb-bg: darken($color-white, 2%); + +$container-large-desktop: 1200px; + +$body-bg: #f9f9f9; + +$font-family-sans-serif: "Source Sans Pro", sans-serif; +$font-family-serif: "Roboto Slab", serif; + +$border-radius-large: 3px; + +$grid-float-breakpoint: 992px; +$screen-sm-min: 768px; + +$navbar-default-bg: #fff; +$navbar-default-toggle-icon-bar-bg: $color-primary; +$navbar-default-link-color: #8c929d; +$navbar-default-link-hover-color: $color-primary; +$navbar-default-link-active-color: $color-primary; +$navbar-default-link-active-bg: transparent; +$navbar-default-border: #d7d7d7; + +$dropdown-bg: #019875; +$dropdown-link-color: #fff; +$dropdown-link-hover-color: #18be97; + +$search-input-font-color: #333; +$search-border-color: #bcbcbc; + +$reseller-divider-color: $navbar-default-border; +$reseller-hero-bg-color: #35393d; +$reseller-hero-content-color: #969696; +$reseller-category-active-background-color: rgba(255, 255, 255, .4); + +$applications-search-box-shadow-color: rgba($color-dark, .5); + +$features-gradient-end: rgba(148, 149, 150, 1); +$features-gradient-begin: rgba(0, 0, 0, .91); +$features-semi-transparent-white: rgba(255, 255, 255, .15); +$features-semi-transparent-gray: rgba(180, 180, 180, .15); +$features-semi-transparent-gray-link: rgba(180, 180, 180, .50); +$features-semi-transparent-black: rgba(12, 12, 12, .47); +$features-semi-transparent-purple: rgba(107, 79, 187, .50); +$features-barely-transparent-white: rgba(255, 255, 255, .5); +$features-gray-light-barely-transparent: rgba(170, 170, 170, .5); +$features-gallery-background-gradient-begin: #6b4fbb; +$features-gallery-background-gradient-middle: #5942a0; +$features-gallery-background-gradient-end: #42327a; +$features-gallery-alt-description-black: rgba(0, 0, 0, .7); + +$ee-standalone-primary-background-gradient: linear-gradient(to right, $color-primary-alt 0%, $features-gallery-background-gradient-middle 40%, $features-gallery-background-gradient-end 100%); +$ee-standalone-hero-background-top: rgba(52, 55, 60, .85); +$ee-standalone-hero-background-gradient: linear-gradient(to bottom, $ee-standalone-hero-background-top, $landing-community-bg 85%); + +$facebook-bg: #3b5998; +$twitter-bg: #55acee; +$google-bg: #dd4b39; +$linkedin-bg: #007bb5; diff --git a/content/assets/stylesheets/footer.scss b/content/assets/stylesheets/footer.scss index d2ec1d5e..c11f9f1c 100644 --- a/content/assets/stylesheets/footer.scss +++ b/content/assets/stylesheets/footer.scss @@ -2,185 +2,8 @@ version: 3 --- -$color-white: #fff; -$color-white-alt: #d9ccff; -$color-transparent: rgba(0, 0, 0, 0); +@import "variables"; -$color-dark: #000; - -$color-gray: #777; -$color-gray-medium: #ddd; -$color-gray-light: #aaa; -$color-gray-extra-light: #e7e7e7; - -$color-green: #18be97; - -$color-red: #f00; - -$color-primary: #548; -$color-primary-alt: #6b4fbb; -$color-secondary: #e14329; -$color-secondary-alt: #fba225; -$color-subfooter-bg: rgb(85, 68, 136); - -$color-primary-medium: #503991; - -$divider-color: #d3d3d3; - -$link-color: #55acee; -$link-code-color: rgb(55, 119, 176); - -$border-color: #dfdfdf; - -$header-text-light-color: #a69ebd; - -$team-content-color: #999; -$member-name-color: #333; -$member-shadow-color: #ccc; -$member-social-color: #ccc; - -$blog-color-text: #222; -$blog-color-note: #666; -$blog-color-heading: #fff; -$blog-color-purple: rgb(107, 79, 187); -$blog-color-mk-border: #ccc; -$blog-color-date: #888; -$blog-color-overlay-border: #eee; -$blog-color-border-shadow: rgba(0, 0, 0, .1); -$blog-color-image-from: rgba(0, 0, 0, 0); -$blog-color-image-to: rgba(0, 0, 0, .8); -$blog-color-ipanel-heading: rgba(221, 221, 221, .5); -$blog-color-legacy-image-from: rgba(85, 68, 136, .8); -$blog-color-legacy-image-to: rgba(72, 135, 197, .92); - -// legacy blog variables that were used by other pages - -$blog-date-color: #999; -$blog-text-color: #444; -$blog-notes-color: #606060; -$blog-image-color-to: #4887c5; -$blog-divider-color: #128bee; -$blog-table-background: #faf9f9; -$blog-table-background-hover: #f4f8fe; -$blog-table-border: #efeff1; - -$release-manager-list-bg: #403366; -$release-manager-table-border: #584985; -$release-manager-table-header-color: #9583c9; -$release-manager-current-table-data-color: #ff9; - -$mvp-list-bg: #403366; -$mvp-table-border: #584985; -$mvp-table-header-color: #9583c9; - -$landing-community-bg: #34373c; -$landing-organization-color: #d7d7d7; - -$downloads-btn-color: #7769a0; -$downloads-btn-hover-color: #403366; -$downloads-code-color: #403366; -$downloads-step-link-color: #ffb800; -$downloads-step-color: #e3dcf7; - -$contact-color: #bbb4cf; -$contact-btn-bg: #887ab6; - -$consultancy-bg-color: #272120; - -$gs-btn-bg: #129bee; -$gs-btn-hover-bg: #6144b8; - -$applications-title-color: #373737; -$applications-app-shadow-color: #e0e0e0; - -$link-box-color: #333; -$link-box-border-color: #7863b6; -$link-box-hover-bg: #f4f0ff; - -$pricing-primary: #129bee; -$subscription-header-bg: #444; -$subs-header-color: #242424; -$subs-header-sub-color: #979797; -$subs-header-hr-color: #d4d4d4; -$pricing-header-color-to: #4887c5; -$pricing-gray-bg: #fafafa; - -$blueish-gray: #a1a1a2; - -$dropdown-text-color: #626262; -$dropdown-caret-color: #c4c4c4; -$dropdown-border-color: #eaeaea; -$dropdown-focus-color: #c4c4c4; -$dropdown-hover-color: #f7faff; - -$dropdown-filter-border-color: rgba(0, 0, 0, .1); -$dropdown-fa-color: #c7c7c7; -$dropdown-fa-focus-color: #555; - -$formula-variable-bg: #f9f9f9; -$formula-text-color: #9d9d9d; -$formula-value-color: #444; - -// Bootstrap overrides -$breadcrumb-separator: ">"; -$breadcrumb-bg: darken($color-white, 2%); - -$container-large-desktop: 1200px; - -$body-bg: #f9f9f9; - -$font-family-sans-serif: "Source Sans Pro", sans-serif; -$font-family-serif: "Roboto Slab", serif; - -$border-radius-large: 3px; - -$grid-float-breakpoint: 992px; -$screen-sm-min: 768px; - -$navbar-default-bg: #fff; -$navbar-default-toggle-icon-bar-bg: $color-primary; -$navbar-default-link-color: #8c929d; -$navbar-default-link-hover-color: $color-primary; -$navbar-default-link-active-color: $color-primary; -$navbar-default-link-active-bg: transparent; -$navbar-default-border: #d7d7d7; - -$dropdown-bg: #019875; -$dropdown-link-color: #fff; -$dropdown-link-hover-color: #18be97; - -$search-input-font-color: #333; -$search-border-color: #bcbcbc; - -$reseller-divider-color: $navbar-default-border; -$reseller-hero-bg-color: #35393d; -$reseller-hero-content-color: #969696; -$reseller-category-active-background-color: rgba(255, 255, 255, .4); - -$applications-search-box-shadow-color: rgba($color-dark, .5); - -$features-gradient-end: rgba(148, 149, 150, 1); -$features-gradient-begin: rgba(0, 0, 0, .91); -$features-semi-transparent-white: rgba(255, 255, 255, .15); -$features-semi-transparent-gray: rgba(180, 180, 180, .15); -$features-semi-transparent-gray-link: rgba(180, 180, 180, .50); -$features-semi-transparent-black: rgba(12, 12, 12, .47); -$features-semi-transparent-purple: rgba(107, 79, 187, .50); -$features-barely-transparent-white: rgba(255, 255, 255, .5); -$features-gray-light-barely-transparent: rgba(170, 170, 170, .5); -$features-gallery-background-gradient-begin: #6b4fbb; -$features-gallery-background-gradient-middle: #5942a0; -$features-gallery-background-gradient-end: #42327a; -$features-gallery-alt-description-black: rgba(0, 0, 0, .7); - -$ee-standalone-primary-background-gradient: linear-gradient(to right, $color-primary-alt 0%, $features-gallery-background-gradient-middle 40%, $features-gallery-background-gradient-end 100%); -$ee-standalone-hero-background-top: rgba(52, 55, 60, .85); -$ee-standalone-hero-background-gradient: linear-gradient(to bottom, $ee-standalone-hero-background-top, $landing-community-bg 85%); - -$facebook-bg: #3b5998; -$twitter-bg: #55acee; -$google-bg: #dd4b39; -$linkedin-bg: #007bb5; .footer { position: relative; padding-top: 50px; diff --git a/content/assets/stylesheets/stylesheet.scss b/content/assets/stylesheets/stylesheet.scss index 5b23ed43..53a062a0 100644 --- a/content/assets/stylesheets/stylesheet.scss +++ b/content/assets/stylesheets/stylesheet.scss @@ -2,54 +2,7 @@ version: 16 --- -// Breakpoints -$mobile-width: 800px; - -// Border radius -$border-radius: 3px; - -// Fonts -$mono-font-family: "Menlo", "Liberation Mono", "Consolas", "DejaVu Sans Mono", "Ubuntu Mono", "Courier New", "Andale Mono", "Lucida Console", monospace; -$sans-font-family: "Source Sans Pro", sans-serif; - -// Link colors -$link-color: #3084bb; -$link-color-hover: #20597e; -$link-code-color: rgb(55, 119, 176); - -// Inline code colors -$code-color: #c7254e; -$code-background-color: #f9f2f4; - -// Home page colors -$landing-background: #f9f9f9; -$landing-header-background: #34373c; -$topic-border: rgb(215, 215, 215); -$topic-ce-header-color: rgb(1, 120, 85); -$topic-ee-header-color: rgb(9, 96, 153); -$topic-omnibus-header-color: rgb(107, 79, 187); -$topic-runner-header-color: rgb(203, 88, 15); - -// Other colors -$toc-bg-color: rgba(244, 247, 248, .7); -$toc-border: rgb(229, 229, 229); -$border-color: #e5e5e5; -$border-color-light: #f0f0f0; -$table-border-color: $border-color; -$thead-border-color: rgba(170, 170, 170, .5); -$hr-border-color: $border-color; -$blockquote-border-color: rgb(0, 188, 242); -$blockquote-background-color: rgb(239, 246, 251); -$pre-background-color: rgba(238, 238, 238, .35); -$body-color: rgba(0, 0, 0, .85); -$body-background-color: rgb(249, 249, 249); -$main-background-color: rgb(255, 255, 255); -$search-border: rgba(0, 0, 0, .25); -$h-border-bottom: rgba(125, 134, 140, .2); -$h1-border-bottom: rgb(241, 139, 33); -$main-box-shadow: rgba(0, 0, 0, .1); -$white: #fff; -$black: #333; +@import "variables"; *, *::before, *::after { box-sizing: border-box; @@ -424,148 +377,6 @@ h6 { } } -// ToC styles -.breadcrumbs + ul, .doc-nav > ul, .quick-nav ul { - padding: 20px; - background: $body-background-color; - - li { - padding: 4px 0; - list-style: none; - - &::before { - content: "›\00a0"; - } - - ul { - padding-top: 5px; - } - } -} - -.doc-nav, .quick-nav { - h4 { - padding-bottom: 5px; - border-bottom: solid 1px $h1-border-bottom; - } -} - -.clear { - clear: both; -} - -// not wide enough to show quick nav and toc -@media(max-width:1099px) { - .doc-nav { - margin: 0 auto; - padding: 40px 40px 0; - background: $white; - width: inherit; - max-width: 900px; - } - - .doc-nav > ul { - border-bottom: 2px solid $thead-border-color; - border-top: 2px solid $thead-border-color; - margin: 0; - } - - .main.class { - float: none; - width: inherit; - margin: 0 auto; - max-width: 900px; - } - - .quick-nav { - display: none; - } -} - - -// wide enough to show toc but not quick nav -@media(min-width:1100px) { - .header { - position: fixed; - top: 0; - left: 0; - z-index: 1; - } - - .main.class { - padding-top: 53px; - } - - .doc-nav { - position: fixed; - top: 0; - right: 0; - padding-top: 55px; - overflow-y: scroll; - height: 100%; - } - - .doc-nav ul ul { - padding-left: 25px; - } - - .doc-nav > ul .quick-nav ul { - margin: 0; - } - - .doc-nav, .quick-nav { - width: 25%; - } -} -@media(min-width:1100px) and (max-width:1600px) { - .quick-nav { - display: none; - } - - .doc-nav { - width: 30%; - max-width: 30%; - } - - .main.class.has-toc { - width: 70%; - max-width: 70%; - float: left; - } -} - - -// wide enough to show quick nav and toc -@media(min-width:1601px) { - .main.class.has-toc { - width: 50%; - margin-left: 25%; - max-width: 50%; - } - - .quick-nav { - position: fixed; - top: 0; - padding-top: 55px; - left: 0; - overflow-y: scroll; - height: 100%; - } - - .quick-nav ul ul { - padding-bottom: 0; - } - - .quick-nav h4 { - margin-top: 25px; - } - - .quick-nav h4:first-child { - margin-top: 10px; - } - -} - // Permalinks on header elements. .anchor { display: inline-block; diff --git a/content/assets/stylesheets/toc.scss b/content/assets/stylesheets/toc.scss new file mode 100644 index 00000000..69b5b0d4 --- /dev/null +++ b/content/assets/stylesheets/toc.scss @@ -0,0 +1,146 @@ +--- +version: 1 +--- + +@import "variables"; + +// ToC styles +.breadcrumbs + ul, .doc-nav > ul, .quick-nav ul { + padding: 20px; + background: $body-background-color; + + li { + padding: 4px 0; + list-style: none; + + &::before { + content: "›\00a0"; + } + + ul { + padding-top: 5px; + } + } +} + +.doc-nav, .quick-nav { + h4 { + padding-bottom: 5px; + border-bottom: solid 1px $h1-border-bottom; + } +} + +.clear { + clear: both; +} + +// not wide enough to show quick nav and toc +@media(max-width:1099px) { + .doc-nav { + margin: 0 auto; + padding: 40px 40px 0; + background: $white; + width: inherit; + max-width: 900px; + } + + .doc-nav > ul { + border-bottom: 2px solid $thead-border-color; + border-top: 2px solid $thead-border-color; + margin: 0; + } + + .main.class { + float: none; + width: inherit; + margin: 0 auto; + max-width: 900px; + } + + .quick-nav { + display: none; + } +} + + +// wide enough to show toc but not quick nav +@media(min-width:1100px) { + .header { + position: fixed; + top: 0; + left: 0; + z-index: 1; + } + + .main.class { + padding-top: 53px; + } + + .doc-nav { + position: fixed; + top: 0; + right: 0; + padding-top: 55px; + overflow-y: scroll; + height: 100%; + } + + .doc-nav ul ul { + padding-left: 25px; + } + + .doc-nav > ul .quick-nav ul { + margin: 0; + } + + .doc-nav, .quick-nav { + width: 25%; + } +} +@media(min-width:1100px) and (max-width:1600px) { + .quick-nav { + display: none; + } + + .doc-nav { + width: 30%; + max-width: 30%; + } + + .main.class.has-toc { + width: 70%; + max-width: 70%; + float: left; + } +} + + +// wide enough to show quick nav and toc +@media(min-width:1601px) { + .main.class.has-toc { + width: 50%; + margin-left: 25%; + max-width: 50%; + } + + .quick-nav { + position: fixed; + top: 0; + padding-top: 55px; + left: 0; + overflow-y: scroll; + height: 100%; + } + + .quick-nav ul ul { + padding-bottom: 0; + } + + .quick-nav h4 { + margin-top: 25px; + } + + .quick-nav h4:first-child { + margin-top: 10px; + } +} |