github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 17:59:23 -04:00
Code Issues Projects Releases Packages Wiki Activity

Apply elastic.co look and feel to UI Framework docs site. (#11174)

Browse source
This commit is contained in:
CJ Cenizal 2017-04-11 17:25:23 -07:00 • committed by GitHub
parent 9910770513
commit 49255e04a9
9 changed files with 85 additions and 94 deletions
Download patch file Download diff file Expand all files Collapse all files

18
ui_framework/doc_site/src/components/guide_code_viewer/_guide_code_viewer.scss
View file

@ -4,11 +4,12 @@
right: 0;
bottom: 0;
width: $guideCodeViewerWidth;
padding: 40px 20px;
padding: 6px 0 40px;
background-color: white;
transform: translateX($guideCodeViewerWidth);
transition: transform $guideCodeViewerTransition;
overflow: auto;
border-left: 1px solid #d6d6d6;
@include scrollbar;
@ -22,31 +23,30 @@
}
.guideCodeViewer__header {
padding-bottom: 10px;
padding: 0 20px 6px;
line-height: $guideLineHeight;
border-bottom: 1px solid #d6d6d6;
font-size: 18px;
font-size: 14px;
font-weight: 700;
margin-bottom: 10px;
}
.guideCodeViewer__closeButton {
position: absolute;
top: 5px;
right: 5px;
top: 0;
right: 10px;
cursor: pointer;
padding: 10px;
border-radius: 3px;
color: #6b7490;
color: $guideTextColor;
&:hover {
color: #2b52cc;
color: $guideLinkHoverColor;
}
}
.guideCodeViewer__title {
padding-bottom: 6px;
padding: 0 20px 6px;
border-bottom: 1px solid #d6d6d6;
line-height: $guideLineHeight;
font-size: 14px;

25
ui_framework/doc_site/src/components/guide_nav/_guide_nav.scss
View file

@ -7,16 +7,16 @@
left: 0;
right: 0;
height: $guideNavHeight;
background-color: #e8488b;
color: #ffffff;
box-shadow:
inset 0 -20px 18px rgba(#5a1029, 0.2),
inset 0 -5px 4px rgba(#5a1029, 0.3);
transition: height 0.3s ease;
border-bottom: 1px solid #CCCCCC;
color: $guideTextColor;
background-color: $guidePanelBackgroundColor;
transition: height 0.3s ease, box-shadow 0.3s linear;
overflow: hidden;
box-shadow: 0 0 0 rgba(black, 0.3);
&.is-guide-nav-open {
height: 100%;
box-shadow: 0 40px 200px rgba(black, 0.05);
}
}
@ -36,17 +36,17 @@
&.is-menu-button-pinned,
&:hover {
background-color: rgba(black, 0.15);
background-color: rgba(black, 0.05);
}
&:active {
background-color: rgba(black, 0.2);
box-shadow: inset 0 2px 8px rgba(black, 0.2);
box-shadow: inset 0 2px 8px rgba(black, 0.1);
}
}
.guideNav__title {
color: white;
color: $guideTextColor;
text-decoration: none;
font-size: 18px;
}
@ -61,7 +61,7 @@
@include scrollbar;
display: flex;
overflow: auto;
min-height: calc(100vh - 100px);
min-height: calc(100vh - #{$guideNavHeight});
}
.guideNavItems {
@ -83,15 +83,14 @@
.guideNavItem {
min-width: 200px;
color: white;
color: $guideTextColor;
text-decoration: none;
font-size: 20px;
line-height: 20px;
padding: 8px 20px;
margin-left: 5px;
border-radius: 3px;
&:hover {
background-color: rgba(black, 0.15);
color: $guideLinkHoverColor;
}
}

12
ui_framework/doc_site/src/components/guide_page/_guide_page.scss
View file

@ -1,4 +1,3 @@
@import "../../variables";
.guidePage {
@ -6,12 +5,15 @@
}
.guidePageBody {
$topPadding: 40px;
$topPadding: 31px;
background-color: $guidePanelBackgroundColor;
border: 1px solid #CCCCCC;
border-radius: 4px;
flex: 1 1 auto;
padding: $topPadding 80px 0 120px + $guideSideNavWidth;
padding: 40px 60px;
margin: 10px 10px 10px 20px + $guideSideNavWidth;
@include whenNarrowerThan($normalBreakpoint) {
padding: $topPadding 20px 0 20px + $guideSideNavSmallWidth;
margin: 10px 10px 10px 20px + $guideSideNavSmallWidth;
}
}

18
ui_framework/doc_site/src/components/guide_page_side_nav/_guide_page_side_nav.scss
View file

@ -1,29 +1,25 @@
.guidePageSideNav {
position: fixed;
top: 100px;
left: 0;
bottom: 0;
top: 70px;
left: 10px;
bottom: 10px;
width: $guideSideNavWidth;
padding: 0 0 30px 80px;
overflow: auto;
background-color: #ffffff;
z-index: 100;
padding: 12px 20px;
@include scrollbar;
@include whenNarrowerThan($normalBreakpoint) {
padding: 0 0 30px 20px;
width: $guideSideNavSmallWidth;
}
}
.guidePageSideNav__title {
padding-bottom: 10px;
margin-bottom: 10px;
margin-bottom: 7px;
font-size: 22px;
line-height: $guideLineHeight;
border-bottom: 1px solid #d6d6d6;
opacity: 0.8;
}
@ -39,10 +35,10 @@
.guidePageSideNavMenu__itemLink {
cursor: pointer;
color: #6b7490;
color: $guideTextColor;
text-decoration: none;
&:hover {
color: #2b52cc;
color: $guideLinkHoverColor;
}
}

23
ui_framework/doc_site/src/components/guide_section/_guide_section.scss
View file

@ -1,6 +1,3 @@
@import "../../variables";
.guideSection {
margin-bottom: 40px;
}
@ -9,9 +6,8 @@
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 10px;
padding-bottom: 2px;
line-height: $guideLineHeight;
border-bottom: 1px solid #d6d6d6;
}
.guideSection__title {
@ -20,23 +16,18 @@
}
.guideSection__sourceButton {
appearance: none;
border: none;
line-height: 10px;
padding: 4px 10px;
background-color: #19a8e0;
color: white;
color: $guideLinkHoverColor;
background-color: #fff;
border: 1px solid $guideLinkHoverColor;
border-radius: 3px;
cursor: pointer;
&:hover {
box-shadow:
inset 0 1px 0 rgba(#95e1ff, 1),
0 2px 4px rgba(black, 0.2);
}
&:hover,
&:active {
box-shadow:
inset 0 20px 20px rgba(black, 0.1),
inset 0 2px 8px rgba(black, 0.2);
background-color: #e6f7fc;
}
}

36
ui_framework/doc_site/src/main.scss
View file

@ -1,5 +1,6 @@
@import "../../dist/ui_framework.css";
@import "./views/app";
@import "./variables";
@import "./views/home/home_view";
@import "./components/guide_components";
* {
@ -16,7 +17,38 @@ body {
* on styles inherited from body.
*/
body {
background: #ffffff;
background-color: $guideBaseBackgroundColor;
line-height: 40px; /* 1 */
margin: 0;
}
.guide {
display: flex;
height: 100%;
}
.guideContent {
flex: 1 1 auto;
padding-top: $guideNavHeight;
transition: padding-right $guideCodeViewerTransition;
&.is-code-viewer-open {
padding-right: $guideCodeViewerWidth;
@include whenNarrowerThan($normalBreakpoint) {
padding-right: $guideCodeViewerSmallWidth;
}
}
}
.guideWarning {
border-left: 5px solid #e8488b;
margin-top: 19px;
padding: 0 14px;
line-height: 21px;
color: #e8488b;
}
.guideBreak {
border: none;
}

11
ui_framework/doc_site/src/variables.scss
View file

@ -1,12 +1,17 @@
$guideLineHeight: 24px;
$guideNavHeight: 60px;
$guideSideNavWidth: 400px;
$guideSideNavSmallWidth: 220px;
$guideCodeViewerWidth: 700px;
$guideCodeViewerSmallWidth: 580px;
$guideCodeViewerWidth: 660px;
$guideCodeViewerSmallWidth: 520px;
$guideCodeViewerTransition: 0.2s ease;
// Colors
$guideBaseBackgroundColor: #f7f7f7;
$guidePanelBackgroundColor: #ffffff;
$guideTextColor: #444;
$guideLinkHoverColor: #00a9e5;
$normalBreakpoint: 1900px;
@mixin whenNarrowerThan($browserWidth) {

34
ui_framework/doc_site/src/views/_app.scss
View file

@ -1,34 +0,0 @@
@import "../variables";
@import "./home/home_view";
.guide {
display: flex;
height: 100%;
}
.guideContent {
flex: 1 1 auto;
padding-top: $guideNavHeight;
transition: padding-right $guideCodeViewerTransition;
&.is-code-viewer-open {
padding-right: $guideCodeViewerWidth - 20px;
@include whenNarrowerThan($normalBreakpoint) {
padding-right: $guideCodeViewerSmallWidth - 20px;
}
}
}
.guideWarning {
border-left: 5px solid #e8488b;
margin-top: 19px;
padding: 0 14px;
line-height: 21px;
color: #e8488b;
}
.guideBreak {
border: none;
}

2
ui_framework/doc_site/src/views/home/_home_view.scss
View file

@ -11,7 +11,7 @@
max-width: 600px;
max-height: 500px;
padding: 60px;
margin-bottom: 20px;
margin: 20px;
border-radius: 3px;
background-color: #e8e8e8;
line-height: $guideLineHeight;