Reorganize documentation styles so they all live in doc_site/componen…

…ts directory. (elastic#12809) - Remove global styles, e.g. body and html element selectors.
cjcenizal · Aug 8, 2017 · c642a73 · c642a73
1 parent 9245488
commit c642a73
Show file tree

Hide file tree

Showing 5 changed files with 149 additions and 162 deletions.
diff --git a/ui_framework/doc_site/build/index.html b/ui_framework/doc_site/build/index.html
@@ -6,7 +6,7 @@
  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" type="text/css">
  <script src="https://use.fontawesome.com/a9649923ac.js"></script>
  </head>
- <body>
+ <body class="guideBody">
  <div id="guide" style="height: 100%"></div>
  <script src="bundle.js"></script>
  </body>

diff --git a/ui_framework/doc_site/src/components/guide/_guide.scss b/ui_framework/doc_site/src/components/guide/_guide.scss
@@ -0,0 +1,99 @@
+.guideBody {
+ height: 100%;
+ background-color: #000000;
+ margin: 0;
+ min-width: $guideMinWidth;
+}
+
+/**
+ * 1. Expand container to fit the page if the content is shorter than the page, or expand with the
+ * content if it's taller than the page.
+ */
+.guide {
+ display: flex;
+ min-height: 100%; /* 1 */
+}
+
+.guideContent {
+ display: flex;
+ flex-direction: column;
+ flex: 1 1 auto;
+ padding-top: $guideNavHeight;
+ background-color: $guideBaseBackgroundColor;
+ transition:
+ padding-right $guideCodeViewerTransition,
+ opacity $guideCodeViewerTransition;
+
+ &.is-code-viewer-open {
+ padding-right: $guideCodeViewerWidth;
+
+ @include whenNarrowerThan($guideNormalBreakpoint) {
+ padding-right: $guideCodeViewerSmallWidth;
+ }
+ }
+
+ .is-guide-nav-open + & {
+ opacity: 0.7;
+ }
+}
+
+@media only screen and (max-width: 1300px) {
+ .guideHomePage {
+ justify-content: flex-start !important;
+
+ .guideContentPage__content {
+ margin-left: 250px;
+ }
+ }
+}
+
+.guideContentPage {
+ position: relative;
+ display: flex;
+ justify-content: center;
+ flex: 1 0 auto;
+ background-color: #ffffff;
+}
+
+ .guideContentPage__hint {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ max-width: 260px;
+ max-height: 500px;
+ padding: 30px;
+ margin: 20px;
+ border-radius: 4px;
+ background-color: #e8e8e8;
+ line-height: $guideLineHeight;
+ }
+
+ .guideContentPage__content {
+ width: 100%;
+ max-width: 800px;
+ padding: 30px 60px;
+ }
+
+.guideHintArrow {
+ position: absolute;
+ top: -15px;
+ left: 12px;
+ background-image: url("images/hint-arrow.svg");
+ width: 26px;
+ height: 40px;
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+
+.guideWarning {
+ border-left: 5px solid #e8488b;
+ margin-top: 19px;
+ padding: 0 14px;
+ line-height: 21px;
+ color: #e8488b;
+}
+
+.guideBreak {
+ border: none;
+}
diff --git a/ui_framework/doc_site/src/components/guide_components.scss b/ui_framework/doc_site/src/components/guide_components.scss
@@ -1,5 +1,54 @@
 $guideVerticalRhythm: 20px;
+$guideLineHeight: 24px;
+$guideNavHeight: 60px;
+$guideSideNavWidth: 400px;
+$guideSideNavSmallWidth: 220px;
+$guideCodeViewerWidth: 660px;
+$guideCodeViewerSmallWidth: 520px;
+$guideCodeViewerTransition: 0.2s ease;
 
+// Colors
+$guideBaseBackgroundColor: #f7f7f7;
+$guidePanelBackgroundColor: #ffffff;
+$guideTextColor: #444;
+$guideLinkColor: #00a9e5;
+$guideLinkHoverColor: #00a9e5;
+
+// Breakpoints
+$guideMinWidth: 840px;
+$guideNormalBreakpoint: 1900px;
+
+@mixin whenNarrowerThan($browserWidth) {
+ @media only screen and (max-width: #{$browserWidth}) {
+ @content;
+ }
+}
+
+@mixin whenWiderThan($browserWidth) {
+ @media only screen and (min-width: #{$browserWidth}) {
+ @content;
+ }
+}
+
+@mixin scrollbar($color: rgba(#454D58, 0.4)) {
+ &::-webkit-scrollbar {
+ width: 16px;
+ height: 16px;
+ }
+
+ &::-webkit-scrollbar-thumb {
+ background-color: $color;
+ border: 6px solid transparent;
+ background-clip: content-box;
+ }
+
+ &::-webkit-scrollbar-track {
+ background-color: transparent;
+ }
+}
+
+
+@import "guide/guide";
 @import "guide_code/guide_code";
 @import "guide_code_viewer/guide_code_viewer";
 @import "guide_demo/guide_demo";

diff --git a/ui_framework/doc_site/src/main.scss b/ui_framework/doc_site/src/main.scss
@@ -1,116 +1,2 @@
 @import "../../dist/ui_framework.css";
-@import "./variables";
 @import "./components/guide_components";
-
-* {
- box-sizing: border-box;
-}
-
-html,
-body {
- height: 100%;
-}
-
-/**
- * 1. Insane line-height makes it easier to notice when components are relying
- * on styles inherited from body.
- */
-body {
- background-color: #000000;
- line-height: 40px; /* 1 */
- margin: 0;
- min-width: $guideMinWidth;
-}
-
-/**
- * 1. Expand container to fit the page if the content is shorter than the page, or expand with the
- * content if it's taller than the page.
- */
-.guide {
- display: flex;
- min-height: 100%; /* 1 */
-}
-
-.guideContent {
- display: flex;
- flex-direction: column;
- flex: 1 1 auto;
- padding-top: $guideNavHeight;
- background-color: $guideBaseBackgroundColor;
- transition:
- padding-right $guideCodeViewerTransition,
- opacity $guideCodeViewerTransition;
-
- &.is-code-viewer-open {
- padding-right: $guideCodeViewerWidth;
-
- @include whenNarrowerThan($guideNormalBreakpoint) {
- padding-right: $guideCodeViewerSmallWidth;
- }
- }
-
- .is-guide-nav-open + & {
- opacity: 0.7;
- }
-}
-
-@media only screen and (max-width: 1300px) {
- .guideHomePage {
- justify-content: flex-start !important;
-
- .guideContentPage__content {
- margin-left: 250px;
- }
- }
-}
-
-.guideContentPage {
- position: relative;
- display: flex;
- justify-content: center;
- flex: 1 0 auto;
- background-color: #ffffff;
-}
-
- .guideContentPage__hint {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- max-width: 260px;
- max-height: 500px;
- padding: 30px;
- margin: 20px;
- border-radius: 4px;
- background-color: #e8e8e8;
- line-height: $guideLineHeight;
- }
-
- .guideContentPage__content {
- width: 100%;
- max-width: 800px;
- padding: 30px 60px;
- }
-
-.guideHintArrow {
- position: absolute;
- top: -15px;
- left: 12px;
- background-image: url("images/hint-arrow.svg");
- width: 26px;
- height: 40px;
- background-repeat: no-repeat;
- background-size: contain;
-}
-
-.guideWarning {
- border-left: 5px solid #e8488b;
- margin-top: 19px;
- padding: 0 14px;
- line-height: 21px;
- color: #e8488b;
-}
-
-.guideBreak {
- border: none;
-}
diff --git a/ui_framework/doc_site/src/variables.scss b/ui_framework/doc_site/src/variables.scss