Home less to sass (2) (#22160)
This commit is contained in:
parent
8718d1ee4d
commit
3175253056
257
packages/kbn-ui-framework/dist/ui_framework.css
vendored
257
packages/kbn-ui-framework/dist/ui_framework.css
vendored
File diff suppressed because it is too large
Load diff
|
@ -42,3 +42,10 @@
|
|||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
// KuiButtonGroup doesn't pass down className, so can't create custom classname
|
||||
// So this little gem was being applied in Home/components/tutorial
|
||||
.eui-textCenter > .kuiButtonGroup,
|
||||
.text-center > .kuiButtonGroup {
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
|
@ -104,7 +104,7 @@
|
|||
color: $euiColorDarkShade;
|
||||
transition: color $euiAnimSpeedFast $euiAnimSlightResistance;
|
||||
flex: 1 1 auto;
|
||||
@include truncate;
|
||||
@include euiTextTruncate;
|
||||
|
||||
// flexbox fix for IE10
|
||||
// http://stackoverflow.com/questions/22008135/internet-explorer-10-does-not-apply-flexbox-on-inline-elements
|
||||
|
|
13
src/core_plugins/kibana/public/home/_home.scss
Normal file
13
src/core_plugins/kibana/public/home/_home.scss
Normal file
|
@ -0,0 +1,13 @@
|
|||
home-app {
|
||||
background-color: $euiColorLightestShade;
|
||||
}
|
||||
|
||||
.homPage {
|
||||
min-height: 100vh;
|
||||
max-width: 1200px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.homSampleDataSetCard {
|
||||
flex-grow: 0; // IE FIX
|
||||
}
|
2
src/core_plugins/kibana/public/home/_index.scss
Normal file
2
src/core_plugins/kibana/public/home/_index.scss
Normal file
|
@ -0,0 +1,2 @@
|
|||
@import './home';
|
||||
@import './components/index';
|
|
@ -52,11 +52,11 @@ exports[`apmUiEnabled 1`] = `
|
|||
grow={true}
|
||||
>
|
||||
<EuiCard
|
||||
className="addDataCard"
|
||||
className="homAddData__card"
|
||||
description="APM automatically collects in-depth performance metrics and errors from inside your applications."
|
||||
footer={
|
||||
<EuiButton
|
||||
className="addDataButton"
|
||||
className="homAddData__button"
|
||||
color="primary"
|
||||
fill={false}
|
||||
href="#/home/tutorial/apm"
|
||||
|
@ -68,7 +68,7 @@ exports[`apmUiEnabled 1`] = `
|
|||
}
|
||||
icon={
|
||||
<EuiIcon
|
||||
className="addDataIcon"
|
||||
className="homAddData__icon"
|
||||
size="m"
|
||||
type="apmApp"
|
||||
/>
|
||||
|
@ -84,11 +84,11 @@ exports[`apmUiEnabled 1`] = `
|
|||
grow={true}
|
||||
>
|
||||
<EuiCard
|
||||
className="addDataCard"
|
||||
className="homAddData__card"
|
||||
description="Ingest logs from popular data sources and easily visualize in preconfigured dashboards."
|
||||
footer={
|
||||
<EuiButton
|
||||
className="addDataButton"
|
||||
className="homAddData__button"
|
||||
color="primary"
|
||||
fill={false}
|
||||
href="#/home/tutorial_directory/logging"
|
||||
|
@ -100,7 +100,7 @@ exports[`apmUiEnabled 1`] = `
|
|||
}
|
||||
icon={
|
||||
<EuiIcon
|
||||
className="addDataIcon"
|
||||
className="homAddData__icon"
|
||||
size="m"
|
||||
type="loggingApp"
|
||||
/>
|
||||
|
@ -116,11 +116,11 @@ exports[`apmUiEnabled 1`] = `
|
|||
grow={true}
|
||||
>
|
||||
<EuiCard
|
||||
className="addDataCard"
|
||||
className="homAddData__card"
|
||||
description="Collect metrics from the operating system and services running on your servers."
|
||||
footer={
|
||||
<EuiButton
|
||||
className="addDataButton"
|
||||
className="homAddData__button"
|
||||
color="primary"
|
||||
fill={false}
|
||||
href="#/home/tutorial_directory/metrics"
|
||||
|
@ -132,7 +132,7 @@ exports[`apmUiEnabled 1`] = `
|
|||
}
|
||||
icon={
|
||||
<EuiIcon
|
||||
className="addDataIcon"
|
||||
className="homAddData__icon"
|
||||
size="m"
|
||||
type="monitoringApp"
|
||||
/>
|
||||
|
@ -148,11 +148,11 @@ exports[`apmUiEnabled 1`] = `
|
|||
grow={true}
|
||||
>
|
||||
<EuiCard
|
||||
className="addDataCard"
|
||||
className="homAddData__card"
|
||||
description="Centralize security events for interactive investigation in ready-to-go visualizations."
|
||||
footer={
|
||||
<EuiButton
|
||||
className="addDataButton"
|
||||
className="homAddData__button"
|
||||
color="primary"
|
||||
fill={false}
|
||||
href="#/home/tutorial_directory/security"
|
||||
|
@ -164,7 +164,7 @@ exports[`apmUiEnabled 1`] = `
|
|||
}
|
||||
icon={
|
||||
<EuiIcon
|
||||
className="addDataIcon"
|
||||
className="homAddData__icon"
|
||||
size="m"
|
||||
type="securityApp"
|
||||
/>
|
||||
|
@ -190,7 +190,7 @@ exports[`apmUiEnabled 1`] = `
|
|||
wrap={false}
|
||||
>
|
||||
<EuiFlexItem
|
||||
className="addDataFooterItem"
|
||||
className="homAddData__footerItem"
|
||||
component="div"
|
||||
grow={true}
|
||||
>
|
||||
|
@ -221,7 +221,7 @@ exports[`apmUiEnabled 1`] = `
|
|||
</EuiText>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem
|
||||
className="addDataFooterItem"
|
||||
className="homAddData__footerItem"
|
||||
component="div"
|
||||
grow={true}
|
||||
>
|
||||
|
@ -307,11 +307,11 @@ exports[`isNewKibanaInstance 1`] = `
|
|||
grow={true}
|
||||
>
|
||||
<EuiCard
|
||||
className="addDataCard"
|
||||
className="homAddData__card"
|
||||
description="Ingest logs from popular data sources and easily visualize in preconfigured dashboards."
|
||||
footer={
|
||||
<EuiButton
|
||||
className="addDataButton"
|
||||
className="homAddData__button"
|
||||
color="primary"
|
||||
fill={false}
|
||||
href="#/home/tutorial_directory/logging"
|
||||
|
@ -323,7 +323,7 @@ exports[`isNewKibanaInstance 1`] = `
|
|||
}
|
||||
icon={
|
||||
<EuiIcon
|
||||
className="addDataIcon"
|
||||
className="homAddData__icon"
|
||||
size="m"
|
||||
type="loggingApp"
|
||||
/>
|
||||
|
@ -339,11 +339,11 @@ exports[`isNewKibanaInstance 1`] = `
|
|||
grow={true}
|
||||
>
|
||||
<EuiCard
|
||||
className="addDataCard"
|
||||
className="homAddData__card"
|
||||
description="Collect metrics from the operating system and services running on your servers."
|
||||
footer={
|
||||
<EuiButton
|
||||
className="addDataButton"
|
||||
className="homAddData__button"
|
||||
color="primary"
|
||||
fill={false}
|
||||
href="#/home/tutorial_directory/metrics"
|
||||
|
@ -355,7 +355,7 @@ exports[`isNewKibanaInstance 1`] = `
|
|||
}
|
||||
icon={
|
||||
<EuiIcon
|
||||
className="addDataIcon"
|
||||
className="homAddData__icon"
|
||||
size="m"
|
||||
type="monitoringApp"
|
||||
/>
|
||||
|
@ -371,11 +371,11 @@ exports[`isNewKibanaInstance 1`] = `
|
|||
grow={true}
|
||||
>
|
||||
<EuiCard
|
||||
className="addDataCard"
|
||||
className="homAddData__card"
|
||||
description="Centralize security events for interactive investigation in ready-to-go visualizations."
|
||||
footer={
|
||||
<EuiButton
|
||||
className="addDataButton"
|
||||
className="homAddData__button"
|
||||
color="primary"
|
||||
fill={false}
|
||||
href="#/home/tutorial_directory/security"
|
||||
|
@ -387,7 +387,7 @@ exports[`isNewKibanaInstance 1`] = `
|
|||
}
|
||||
icon={
|
||||
<EuiIcon
|
||||
className="addDataIcon"
|
||||
className="homAddData__icon"
|
||||
size="m"
|
||||
type="securityApp"
|
||||
/>
|
||||
|
@ -413,7 +413,7 @@ exports[`isNewKibanaInstance 1`] = `
|
|||
wrap={false}
|
||||
>
|
||||
<EuiFlexItem
|
||||
className="addDataFooterItem addDataFooterItem_highlight"
|
||||
className="homAddData__footerItem homAddData__footerItem--highlight"
|
||||
component="div"
|
||||
grow={true}
|
||||
>
|
||||
|
@ -444,7 +444,7 @@ exports[`isNewKibanaInstance 1`] = `
|
|||
</EuiText>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem
|
||||
className="addDataFooterItem addDataFooterItem_highlight"
|
||||
className="homAddData__footerItem homAddData__footerItem--highlight"
|
||||
component="div"
|
||||
grow={true}
|
||||
>
|
||||
|
@ -530,11 +530,11 @@ exports[`render 1`] = `
|
|||
grow={true}
|
||||
>
|
||||
<EuiCard
|
||||
className="addDataCard"
|
||||
className="homAddData__card"
|
||||
description="Ingest logs from popular data sources and easily visualize in preconfigured dashboards."
|
||||
footer={
|
||||
<EuiButton
|
||||
className="addDataButton"
|
||||
className="homAddData__button"
|
||||
color="primary"
|
||||
fill={false}
|
||||
href="#/home/tutorial_directory/logging"
|
||||
|
@ -546,7 +546,7 @@ exports[`render 1`] = `
|
|||
}
|
||||
icon={
|
||||
<EuiIcon
|
||||
className="addDataIcon"
|
||||
className="homAddData__icon"
|
||||
size="m"
|
||||
type="loggingApp"
|
||||
/>
|
||||
|
@ -562,11 +562,11 @@ exports[`render 1`] = `
|
|||
grow={true}
|
||||
>
|
||||
<EuiCard
|
||||
className="addDataCard"
|
||||
className="homAddData__card"
|
||||
description="Collect metrics from the operating system and services running on your servers."
|
||||
footer={
|
||||
<EuiButton
|
||||
className="addDataButton"
|
||||
className="homAddData__button"
|
||||
color="primary"
|
||||
fill={false}
|
||||
href="#/home/tutorial_directory/metrics"
|
||||
|
@ -578,7 +578,7 @@ exports[`render 1`] = `
|
|||
}
|
||||
icon={
|
||||
<EuiIcon
|
||||
className="addDataIcon"
|
||||
className="homAddData__icon"
|
||||
size="m"
|
||||
type="monitoringApp"
|
||||
/>
|
||||
|
@ -594,11 +594,11 @@ exports[`render 1`] = `
|
|||
grow={true}
|
||||
>
|
||||
<EuiCard
|
||||
className="addDataCard"
|
||||
className="homAddData__card"
|
||||
description="Centralize security events for interactive investigation in ready-to-go visualizations."
|
||||
footer={
|
||||
<EuiButton
|
||||
className="addDataButton"
|
||||
className="homAddData__button"
|
||||
color="primary"
|
||||
fill={false}
|
||||
href="#/home/tutorial_directory/security"
|
||||
|
@ -610,7 +610,7 @@ exports[`render 1`] = `
|
|||
}
|
||||
icon={
|
||||
<EuiIcon
|
||||
className="addDataIcon"
|
||||
className="homAddData__icon"
|
||||
size="m"
|
||||
type="securityApp"
|
||||
/>
|
||||
|
@ -636,7 +636,7 @@ exports[`render 1`] = `
|
|||
wrap={false}
|
||||
>
|
||||
<EuiFlexItem
|
||||
className="addDataFooterItem"
|
||||
className="homAddData__footerItem"
|
||||
component="div"
|
||||
grow={true}
|
||||
>
|
||||
|
@ -667,7 +667,7 @@ exports[`render 1`] = `
|
|||
</EuiText>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem
|
||||
className="addDataFooterItem"
|
||||
className="homAddData__footerItem"
|
||||
component="div"
|
||||
grow={true}
|
||||
>
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
exports[`home directories should not render directory entry when showOnHomePage is false 1`] = `
|
||||
<EuiPage
|
||||
className="home"
|
||||
className="homPage"
|
||||
restrictWidth={false}
|
||||
>
|
||||
<EuiPageBody
|
||||
|
@ -120,7 +120,7 @@ exports[`home directories should not render directory entry when showOnHomePage
|
|||
|
||||
exports[`home directories should render ADMIN directory entry in "Manage" panel 1`] = `
|
||||
<EuiPage
|
||||
className="home"
|
||||
className="homPage"
|
||||
restrictWidth={false}
|
||||
>
|
||||
<EuiPageBody
|
||||
|
@ -257,7 +257,7 @@ exports[`home directories should render ADMIN directory entry in "Manage" panel
|
|||
|
||||
exports[`home directories should render DATA directory entry in "Explore Data" panel 1`] = `
|
||||
<EuiPage
|
||||
className="home"
|
||||
className="homPage"
|
||||
restrictWidth={false}
|
||||
>
|
||||
<EuiPageBody
|
||||
|
@ -394,7 +394,7 @@ exports[`home directories should render DATA directory entry in "Explore Data" p
|
|||
|
||||
exports[`home isNewKibanaInstance should safely handle execeptions 1`] = `
|
||||
<EuiPage
|
||||
className="home"
|
||||
className="homPage"
|
||||
restrictWidth={false}
|
||||
>
|
||||
<EuiPageBody
|
||||
|
@ -512,7 +512,7 @@ exports[`home isNewKibanaInstance should safely handle execeptions 1`] = `
|
|||
|
||||
exports[`home isNewKibanaInstance should set isNewKibanaInstance to false when there are index patterns 1`] = `
|
||||
<EuiPage
|
||||
className="home"
|
||||
className="homPage"
|
||||
restrictWidth={false}
|
||||
>
|
||||
<EuiPageBody
|
||||
|
@ -630,7 +630,7 @@ exports[`home isNewKibanaInstance should set isNewKibanaInstance to false when t
|
|||
|
||||
exports[`home isNewKibanaInstance should set isNewKibanaInstance to true when there are no index patterns 1`] = `
|
||||
<EuiPage
|
||||
className="home"
|
||||
className="homPage"
|
||||
restrictWidth={false}
|
||||
>
|
||||
<EuiPageBody
|
||||
|
@ -748,7 +748,7 @@ exports[`home isNewKibanaInstance should set isNewKibanaInstance to true when th
|
|||
|
||||
exports[`home should not contain RecentlyAccessed panel when there is no recentlyAccessed history 1`] = `
|
||||
<EuiPage
|
||||
className="home"
|
||||
className="homPage"
|
||||
restrictWidth={false}
|
||||
>
|
||||
<EuiPageBody
|
||||
|
@ -866,7 +866,7 @@ exports[`home should not contain RecentlyAccessed panel when there is no recentl
|
|||
|
||||
exports[`home should render home component 1`] = `
|
||||
<EuiPage
|
||||
className="home"
|
||||
className="homPage"
|
||||
restrictWidth={false}
|
||||
>
|
||||
<EuiPageBody
|
||||
|
@ -1000,7 +1000,7 @@ exports[`home should render home component 1`] = `
|
|||
|
||||
exports[`home welcome should show the normal home page if loading fails 1`] = `
|
||||
<EuiPage
|
||||
className="home"
|
||||
className="homPage"
|
||||
restrictWidth={false}
|
||||
>
|
||||
<EuiPageBody
|
||||
|
@ -1118,7 +1118,7 @@ exports[`home welcome should show the normal home page if loading fails 1`] = `
|
|||
|
||||
exports[`home welcome should show the normal home page if welcome screen is disabled locally 1`] = `
|
||||
<EuiPage
|
||||
className="home"
|
||||
className="homPage"
|
||||
restrictWidth={false}
|
||||
>
|
||||
<EuiPageBody
|
||||
|
@ -1243,7 +1243,7 @@ exports[`home welcome should show the welcome screen if enabled, and there are n
|
|||
|
||||
exports[`home welcome stores skip welcome setting if skipped 1`] = `
|
||||
<EuiPage
|
||||
className="home"
|
||||
className="homPage"
|
||||
restrictWidth={false}
|
||||
>
|
||||
<EuiPageBody
|
||||
|
|
|
@ -31,7 +31,7 @@ exports[`render 1`] = `
|
|||
wrap={true}
|
||||
>
|
||||
<EuiFlexItem
|
||||
className="recentlyAccessedFlexItem"
|
||||
className="homRecentlyAccessed__flexItem"
|
||||
component="div"
|
||||
grow={false}
|
||||
>
|
||||
|
@ -48,7 +48,7 @@ exports[`render 1`] = `
|
|||
key="0"
|
||||
>
|
||||
<EuiFlexItem
|
||||
className="recentlyAccessedItem"
|
||||
className="homRecentlyAccessed__item"
|
||||
component="div"
|
||||
grow={false}
|
||||
style={
|
||||
|
@ -58,11 +58,12 @@ exports[`render 1`] = `
|
|||
}
|
||||
>
|
||||
<EuiToolTip
|
||||
anchorClassName="homRecentlyAccessed__anchor"
|
||||
content="label0"
|
||||
position="bottom"
|
||||
>
|
||||
<EuiLink
|
||||
className="recentlyAccessedLongLink"
|
||||
className="homRecentlyAccessed__longLink"
|
||||
color="primary"
|
||||
href="link0"
|
||||
type="button"
|
||||
|
@ -76,7 +77,7 @@ exports[`render 1`] = `
|
|||
key="1"
|
||||
>
|
||||
<EuiFlexItem
|
||||
className="recentlyAccessedSeparator"
|
||||
className="homRecentlyAccessed__separator"
|
||||
component="div"
|
||||
grow={false}
|
||||
>
|
||||
|
@ -91,7 +92,7 @@ exports[`render 1`] = `
|
|||
</EuiText>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem
|
||||
className="recentlyAccessedItem"
|
||||
className="homRecentlyAccessed__item"
|
||||
component="div"
|
||||
grow={false}
|
||||
style={
|
||||
|
@ -101,11 +102,12 @@ exports[`render 1`] = `
|
|||
}
|
||||
>
|
||||
<EuiToolTip
|
||||
anchorClassName="homRecentlyAccessed__anchor"
|
||||
content="label1"
|
||||
position="bottom"
|
||||
>
|
||||
<EuiLink
|
||||
className="recentlyAccessedLongLink"
|
||||
className="homRecentlyAccessed__longLink"
|
||||
color="primary"
|
||||
href="link1"
|
||||
type="button"
|
||||
|
|
|
@ -0,0 +1,20 @@
|
|||
.homAddData__card {
|
||||
width: 250px;
|
||||
min-width: 200px;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.homAddData__icon {
|
||||
width: $euiSizeXL * 2;
|
||||
height: $euiSizeXL * 2;
|
||||
}
|
||||
|
||||
.homAddData__footerItem--highlight {
|
||||
background-color: tintOrShade($euiColorPrimary, 90%, 70%);
|
||||
padding: $euiSize;
|
||||
}
|
||||
|
||||
.homAddData__footerItem {
|
||||
text-align: center;
|
||||
}
|
14
src/core_plugins/kibana/public/home/components/_index.scss
Normal file
14
src/core_plugins/kibana/public/home/components/_index.scss
Normal file
|
@ -0,0 +1,14 @@
|
|||
// Prefix all styles with "hom" to avoid conflicts.
|
||||
// Examples
|
||||
// homChart
|
||||
// homChart__legend
|
||||
// homChart__legend--small
|
||||
// homChart__legend-isLoading
|
||||
|
||||
@import 'add_data';
|
||||
@import 'recently_accessed';
|
||||
@import 'synopsis';
|
||||
@import 'welcome';
|
||||
|
||||
@import 'tutorial/tutorial';
|
||||
@import 'tutorial/radio_button_group';
|
|
@ -0,0 +1,29 @@
|
|||
@include euiBreakpoint('xs', 's') {
|
||||
.homRecentlyAccessed__separator {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.homRecentlyAccessed__item {
|
||||
overflow: hidden;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.homRecentlyAccessed__anchor {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.homRecentlyAccessed__longLink {
|
||||
@include euiTextTruncate;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.homRecentlyAccessed__flexItem {
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
.homRecentlyAccessed__dropdownLink,
|
||||
.homRecentlyAccessed__dropdownLabel {
|
||||
white-space: nowrap;
|
||||
}
|
|
@ -0,0 +1,27 @@
|
|||
// SASSTODO: Move out of being specifically in home
|
||||
// ML uses these classes as well
|
||||
.synopsis {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
|
||||
.synopsisTitle {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.synopsisTitle {
|
||||
font-size: $euiSize;
|
||||
font-weight: normal;
|
||||
color: $euiColorPrimary;
|
||||
}
|
||||
|
||||
.synopsisIcon {
|
||||
padding-top: $euiSizeS;
|
||||
}
|
68
src/core_plugins/kibana/public/home/components/_welcome.scss
Normal file
68
src/core_plugins/kibana/public/home/components/_welcome.scss
Normal file
|
@ -0,0 +1,68 @@
|
|||
|
||||
.homWelcome {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: $euiZLevel9 + 1000;
|
||||
background: inherit;
|
||||
background-image: linear-gradient(0deg, $euiColorLightestShade 0%, $euiColorEmptyShade 100%);
|
||||
opacity: 0;
|
||||
overflow: auto;
|
||||
animation: homWelcome_FadeIn $euiAnimSpeedExtraSlow $euiAnimSlightResistance 0s forwards;
|
||||
}
|
||||
|
||||
.homWelcome::before {
|
||||
// SASSTODO: webpack pipeline isn't setup to handle image urls in SASS yet
|
||||
// content: url(../assets/bg_top_branded.svg);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.homWelcome::after {
|
||||
// SASSTODO: webpack pipeline isn't setup to handle image urls in SASS yet
|
||||
// content: url(../assets/bg_bottom_branded.svg);
|
||||
position: fixed;
|
||||
bottom: -2px; // Hides an odd space at the bottom of the svg
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.homWelcome__header {
|
||||
position: relative;
|
||||
padding: $euiSizeXL;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.homWelcome__logo {
|
||||
margin-bottom: $euiSizeXL;
|
||||
@include kibanaCircleLogo;
|
||||
@include euiBottomShadowMedium;
|
||||
}
|
||||
|
||||
.homWelcome__footerAction {
|
||||
margin-right: $euiSizeS;
|
||||
}
|
||||
|
||||
.homWelcome__content {
|
||||
position: relative;
|
||||
margin: auto;
|
||||
max-width: 512px;
|
||||
padding-left: $euiSizeXL;
|
||||
padding-right: $euiSizeXL;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
@keyframes homWelcome_FadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(200px), scale(0.75);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0), scale(1);
|
||||
}
|
||||
}
|
|
@ -17,7 +17,6 @@
|
|||
* under the License.
|
||||
*/
|
||||
|
||||
import './add_data.less';
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import classNames from 'classnames';
|
||||
|
@ -42,13 +41,13 @@ export function AddData({ apmUiEnabled, isNewKibanaInstance }) {
|
|||
const getApmCard = () => (
|
||||
<EuiFlexItem>
|
||||
<EuiCard
|
||||
className="addDataCard"
|
||||
icon={<EuiIcon className="addDataIcon" type="apmApp" />}
|
||||
className="homAddData__card"
|
||||
icon={<EuiIcon className="homAddData__icon" type="apmApp" />}
|
||||
title="APM"
|
||||
description="APM automatically collects in-depth performance metrics and errors from inside your applications."
|
||||
footer={
|
||||
<EuiButton
|
||||
className="addDataButton"
|
||||
className="homAddData__button"
|
||||
href="#/home/tutorial/apm"
|
||||
>
|
||||
Add APM
|
||||
|
@ -65,13 +64,13 @@ export function AddData({ apmUiEnabled, isNewKibanaInstance }) {
|
|||
|
||||
<EuiFlexItem>
|
||||
<EuiCard
|
||||
className="addDataCard"
|
||||
icon={<EuiIcon className="addDataIcon" type="loggingApp" />}
|
||||
className="homAddData__card"
|
||||
icon={<EuiIcon className="homAddData__icon" type="loggingApp" />}
|
||||
title="Logging"
|
||||
description="Ingest logs from popular data sources and easily visualize in preconfigured dashboards."
|
||||
footer={
|
||||
<EuiButton
|
||||
className="addDataButton"
|
||||
className="homAddData__button"
|
||||
href="#/home/tutorial_directory/logging"
|
||||
>
|
||||
Add log data
|
||||
|
@ -82,13 +81,13 @@ export function AddData({ apmUiEnabled, isNewKibanaInstance }) {
|
|||
|
||||
<EuiFlexItem>
|
||||
<EuiCard
|
||||
className="addDataCard"
|
||||
icon={<EuiIcon className="addDataIcon" type="monitoringApp" />}
|
||||
className="homAddData__card"
|
||||
icon={<EuiIcon className="homAddData__icon" type="monitoringApp" />}
|
||||
title="Metrics"
|
||||
description="Collect metrics from the operating system and services running on your servers."
|
||||
footer={
|
||||
<EuiButton
|
||||
className="addDataButton"
|
||||
className="homAddData__button"
|
||||
href="#/home/tutorial_directory/metrics"
|
||||
>
|
||||
Add metric data
|
||||
|
@ -99,13 +98,13 @@ export function AddData({ apmUiEnabled, isNewKibanaInstance }) {
|
|||
|
||||
<EuiFlexItem>
|
||||
<EuiCard
|
||||
className="addDataCard"
|
||||
icon={<EuiIcon className="addDataIcon" type="securityApp" />}
|
||||
className="homAddData__card"
|
||||
icon={<EuiIcon className="homAddData__icon" type="securityApp" />}
|
||||
title="Security Analytics"
|
||||
description="Centralize security events for interactive investigation in ready-to-go visualizations."
|
||||
footer={
|
||||
<EuiButton
|
||||
className="addDataButton"
|
||||
className="homAddData__button"
|
||||
href="#/home/tutorial_directory/security"
|
||||
>
|
||||
Add security events
|
||||
|
@ -117,7 +116,7 @@ export function AddData({ apmUiEnabled, isNewKibanaInstance }) {
|
|||
);
|
||||
};
|
||||
|
||||
const footerItemClasses = classNames('addDataFooterItem', { 'addDataFooterItem_highlight': isNewKibanaInstance });
|
||||
const footerItemClasses = classNames('homAddData__footerItem', { 'homAddData__footerItem--highlight': isNewKibanaInstance });
|
||||
|
||||
return (
|
||||
<EuiPanel paddingSize="l">
|
||||
|
|
|
@ -1,25 +0,0 @@
|
|||
.addDataCard {
|
||||
width: 250px;
|
||||
min-width: 200px;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.addDataIcon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.addDataButton {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.addDataFooterItem_highlight {
|
||||
background-color: #e6f2f6;
|
||||
padding-top: 16px;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
.addDataFooterItem {
|
||||
text-align: center;
|
||||
}
|
|
@ -76,7 +76,6 @@ export class FeatureDirectory extends React.Component {
|
|||
renderTabs = () => {
|
||||
return this.tabs.map((tab, index) => (
|
||||
<EuiTab
|
||||
className="homeDirectoryTab"
|
||||
onClick={() => this.onSelectedTabChanged(tab.id)}
|
||||
isSelected={tab.id === this.state.selectedTabId}
|
||||
key={index}
|
||||
|
@ -114,7 +113,7 @@ export class FeatureDirectory extends React.Component {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<EuiPage className="home">
|
||||
<EuiPage className="homPage">
|
||||
<EuiPageBody>
|
||||
<EuiTitle size="l">
|
||||
<h1>
|
||||
|
|
|
@ -141,7 +141,7 @@ export class Home extends Component {
|
|||
}
|
||||
|
||||
return (
|
||||
<EuiPage className="home">
|
||||
<EuiPage className="homPage">
|
||||
<EuiPageBody>
|
||||
{recentlyAccessedPanel}
|
||||
|
||||
|
|
|
@ -17,7 +17,6 @@
|
|||
* under the License.
|
||||
*/
|
||||
|
||||
import './recently_accessed.less';
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
|
@ -74,7 +73,7 @@ export class RecentlyAccessed extends Component {
|
|||
data-test-subj={`moreRecentlyAccessedItem${this.props.recentlyAccessed[i].id}`}
|
||||
>
|
||||
<EuiLink
|
||||
className="recentlyAccessedDropwdownLink"
|
||||
className="homRecentlyAccessed__dropdownLink"
|
||||
href={this.props.recentlyAccessed[i].link}
|
||||
>
|
||||
{this.props.recentlyAccessed[i].label}
|
||||
|
@ -90,7 +89,7 @@ export class RecentlyAccessed extends Component {
|
|||
data-test-subj="openMoreRecentlyAccessedPopover"
|
||||
>
|
||||
<EuiTextColor
|
||||
className="recentlyAccessedDropdownLabel"
|
||||
className="homRecentlyAccessed__dropdownLabel"
|
||||
color="subdued"
|
||||
>
|
||||
{`${dropdownLinks.length} more`}
|
||||
|
@ -127,7 +126,7 @@ export class RecentlyAccessed extends Component {
|
|||
let separator;
|
||||
if (includeSeparator) {
|
||||
separator = (
|
||||
<EuiFlexItem grow={false} className="recentlyAccessedSeparator">
|
||||
<EuiFlexItem grow={false} className="homRecentlyAccessed__separator">
|
||||
<EuiText>
|
||||
<EuiIcon
|
||||
type="dot"
|
||||
|
@ -147,16 +146,17 @@ export class RecentlyAccessed extends Component {
|
|||
<React.Fragment key={recentlyAccessedItem.id}>
|
||||
{separator}
|
||||
<EuiFlexItem
|
||||
className="recentlyAccessedItem"
|
||||
className="homRecentlyAccessed__item"
|
||||
style={style}
|
||||
grow={false}
|
||||
>
|
||||
<EuiToolTip
|
||||
anchorClassName="homRecentlyAccessed__anchor"
|
||||
position="bottom"
|
||||
content={recentlyAccessedItem.label}
|
||||
>
|
||||
<EuiLink
|
||||
className="recentlyAccessedLongLink"
|
||||
className="homRecentlyAccessed__longLink"
|
||||
href={recentlyAccessedItem.link}
|
||||
>
|
||||
{recentlyAccessedItem.label}
|
||||
|
@ -205,7 +205,7 @@ export class RecentlyAccessed extends Component {
|
|||
<EuiSpacer size="s"/>
|
||||
|
||||
<EuiFlexGroup justifyContent="spaceBetween" alignItems="flexEnd" wrap>
|
||||
<EuiFlexItem grow={false} className="recentlyAccessedFlexItem">
|
||||
<EuiFlexItem grow={false} className="homRecentlyAccessed__flexItem">
|
||||
<EuiFlexGroup>
|
||||
{this.renderRecentlyAccessed()}
|
||||
</EuiFlexGroup>
|
||||
|
|
|
@ -1,35 +0,0 @@
|
|||
@media only screen and (max-width: 768px) {
|
||||
.recentlyAccessedSeparator {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.recentlyAccessedItem {
|
||||
overflow: hidden;
|
||||
max-width: 300px;
|
||||
|
||||
.euiToolTipAnchor {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.recentlyAccessedLongLink {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.recentlyAccessedFlexItem {
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
.recentlyAccessedDropwdownLink {
|
||||
white-space: nowrap;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.recentlyAccessedDropdownLabel {
|
||||
white-space: nowrap;
|
||||
}
|
|
@ -145,7 +145,7 @@ export class SampleDataSetCard extends React.Component {
|
|||
render() {
|
||||
return (
|
||||
<EuiCard
|
||||
className="sampleDataSetCard"
|
||||
className="homSampleDataSetCard"
|
||||
image={this.props.previewUrl}
|
||||
title={this.props.name}
|
||||
description={this.props.description}
|
||||
|
|
|
@ -17,7 +17,6 @@
|
|||
* under the License.
|
||||
*/
|
||||
|
||||
import './synopsis.less';
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import {
|
||||
|
|
|
@ -1,36 +0,0 @@
|
|||
@import (reference) "~ui/styles/variables.less";
|
||||
|
||||
.synopsis {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.synopsis:hover {
|
||||
text-decoration: none;
|
||||
.synopsisTitle {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.synopsis:focus {
|
||||
text-decoration: none;
|
||||
|
||||
.synopsisPanel {
|
||||
border: solid 1px @globalColorBlue;
|
||||
}
|
||||
|
||||
.synopsisBody {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.synopsisTitle {
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
color: @globalColorBlue;
|
||||
}
|
||||
|
||||
.synopsisIcon {
|
||||
padding-top: 8px;
|
||||
}
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
exports[`should render content with markdown 1`] = `
|
||||
<Markdown
|
||||
className="euiText euiTextColor--subdued tutorialContent"
|
||||
className="euiText"
|
||||
markdown="I am *some* [content](https://en.wikipedia.org/wiki/Content) with \`markdown\`"
|
||||
openLinksInNewTab={true}
|
||||
whiteListedRules={
|
||||
|
|
|
@ -36,6 +36,7 @@ exports[`props exportedFieldsUrl 1`] = `
|
|||
>
|
||||
<h2>
|
||||
Great tutorial
|
||||
|
||||
</h2>
|
||||
</EuiTitle>
|
||||
</EuiFlexItem>
|
||||
|
@ -113,6 +114,7 @@ exports[`props iconType 1`] = `
|
|||
>
|
||||
<h2>
|
||||
Great tutorial
|
||||
|
||||
</h2>
|
||||
</EuiTitle>
|
||||
</EuiFlexItem>
|
||||
|
@ -164,18 +166,13 @@ exports[`props isBeta 1`] = `
|
|||
>
|
||||
<h2>
|
||||
Great tutorial
|
||||
</h2>
|
||||
</EuiTitle>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem
|
||||
component="div"
|
||||
grow={false}
|
||||
>
|
||||
|
||||
<EuiBetaBadge
|
||||
className="tutorialIntroBadge"
|
||||
label="BETA"
|
||||
label="Beta"
|
||||
tooltipPosition="top"
|
||||
/>
|
||||
</h2>
|
||||
</EuiTitle>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
<Content
|
||||
|
@ -225,6 +222,7 @@ exports[`props previewUrl 1`] = `
|
|||
>
|
||||
<h2>
|
||||
Great tutorial
|
||||
|
||||
</h2>
|
||||
</EuiTitle>
|
||||
</EuiFlexItem>
|
||||
|
@ -285,6 +283,7 @@ exports[`render 1`] = `
|
|||
>
|
||||
<h2>
|
||||
Great tutorial
|
||||
|
||||
</h2>
|
||||
</EuiTitle>
|
||||
</EuiFlexItem>
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
exports[`isCloudEnabled is false should not render instruction toggle when ON_PREM_ELASTIC_CLOUD instructions are not provided 1`] = `
|
||||
<EuiPage
|
||||
className="home"
|
||||
className="homPage"
|
||||
restrictWidth={false}
|
||||
>
|
||||
<EuiPageBody
|
||||
|
@ -38,7 +38,7 @@ exports[`isCloudEnabled is false should not render instruction toggle when ON_PR
|
|||
size="l"
|
||||
/>
|
||||
<div
|
||||
className="text-center"
|
||||
className="eui-textCenter"
|
||||
/>
|
||||
<EuiSpacer
|
||||
size="l"
|
||||
|
@ -78,7 +78,7 @@ exports[`isCloudEnabled is false should not render instruction toggle when ON_PR
|
|||
|
||||
exports[`isCloudEnabled is false should render ON_PREM instructions with instruction toggle 1`] = `
|
||||
<EuiPage
|
||||
className="home"
|
||||
className="homPage"
|
||||
restrictWidth={false}
|
||||
>
|
||||
<EuiPageBody
|
||||
|
@ -115,7 +115,7 @@ exports[`isCloudEnabled is false should render ON_PREM instructions with instruc
|
|||
size="l"
|
||||
/>
|
||||
<div
|
||||
className="text-center"
|
||||
className="eui-textCenter"
|
||||
>
|
||||
<RadioButtonGroup
|
||||
buttons={
|
||||
|
@ -173,7 +173,7 @@ exports[`isCloudEnabled is false should render ON_PREM instructions with instruc
|
|||
|
||||
exports[`should render ELASTIC_CLOUD instructions when isCloudEnabled is true 1`] = `
|
||||
<EuiPage
|
||||
className="home"
|
||||
className="homPage"
|
||||
restrictWidth={false}
|
||||
>
|
||||
<EuiPageBody
|
||||
|
@ -210,7 +210,7 @@ exports[`should render ELASTIC_CLOUD instructions when isCloudEnabled is true 1`
|
|||
size="l"
|
||||
/>
|
||||
<div
|
||||
className="text-center"
|
||||
className="eui-textCenter"
|
||||
/>
|
||||
<EuiSpacer
|
||||
size="l"
|
||||
|
|
|
@ -0,0 +1,10 @@
|
|||
|
||||
// remove space between buttons
|
||||
.homRadioButtonGroup__button {
|
||||
margin-left: 0px !important;
|
||||
|
||||
// give primary button same border as secondary button so they are even heights when placed side-by-side
|
||||
&.kuiButton--primary {
|
||||
border: solid 1px $euiColorPrimary;
|
||||
}
|
||||
}
|
|
@ -0,0 +1,4 @@
|
|||
.homTutorial__notFoundPanel {
|
||||
background: $euiColorEmptyShade;
|
||||
padding: $euiSizeL;
|
||||
}
|
|
@ -26,7 +26,7 @@ const whiteListedRules = ['backticks', 'emphasis', 'link', 'list'];
|
|||
export function Content({ text }) {
|
||||
return (
|
||||
<Markdown
|
||||
className="euiText euiTextColor--subdued tutorialContent"
|
||||
className="euiText"
|
||||
markdown={text}
|
||||
openLinksInNewTab={true}
|
||||
whiteListedRules={whiteListedRules}
|
||||
|
|
|
@ -81,7 +81,7 @@ export function Instruction({ commands, paramValues, textPost, textPre, replaceT
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="instruction">
|
||||
<div>
|
||||
|
||||
<EuiFlexGroup justifyContent="spaceBetween" alignItems="flexEnd">
|
||||
<EuiFlexItem grow={false}>
|
||||
|
|
|
@ -73,9 +73,7 @@ export function Introduction({ description, previewUrl, title, exportedFieldsUrl
|
|||
let betaBadge;
|
||||
if (isBeta) {
|
||||
betaBadge = (
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiBetaBadge className="tutorialIntroBadge" label="BETA" />
|
||||
</EuiFlexItem>
|
||||
<EuiBetaBadge label="Beta" />
|
||||
);
|
||||
}
|
||||
return (
|
||||
|
@ -90,11 +88,11 @@ export function Introduction({ description, previewUrl, title, exportedFieldsUrl
|
|||
<EuiFlexItem grow={false}>
|
||||
<EuiTitle size="l">
|
||||
<h2>
|
||||
{title}
|
||||
{title}
|
||||
{betaBadge}
|
||||
</h2>
|
||||
</EuiTitle>
|
||||
</EuiFlexItem>
|
||||
{betaBadge}
|
||||
</EuiFlexGroup>
|
||||
|
||||
<Content text={description} />
|
||||
|
|
|
@ -17,7 +17,6 @@
|
|||
* under the License.
|
||||
*/
|
||||
|
||||
import './radio_button_group.less';
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import {
|
||||
|
@ -59,7 +58,7 @@ export class RadioButtonGroup extends React.Component {
|
|||
}
|
||||
return (
|
||||
<KuiButton
|
||||
className="kuiRadioButton"
|
||||
className="homRadioButtonGroup__button"
|
||||
buttonType={buttonType}
|
||||
onClick={handleOnClick}
|
||||
key={index}
|
||||
|
@ -74,7 +73,6 @@ export class RadioButtonGroup extends React.Component {
|
|||
render = () => {
|
||||
return (
|
||||
<KuiButtonGroup
|
||||
className="radioButtonGroup"
|
||||
isUnited
|
||||
>
|
||||
{this.renderButtons()}
|
||||
|
|
|
@ -1,10 +0,0 @@
|
|||
|
||||
// remove space between buttons
|
||||
.kuiRadioButton {
|
||||
margin-left: 0px !important;
|
||||
}
|
||||
|
||||
// give primary button same border as secondary button so they are even heights when placed side-by-side
|
||||
.kuiRadioButton.kuiButton--primary {
|
||||
border: solid 1px #0079a5;
|
||||
}
|
|
@ -17,7 +17,6 @@
|
|||
* under the License.
|
||||
*/
|
||||
|
||||
import './tutorial.less';
|
||||
import _ from 'lodash';
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
@ -281,7 +280,7 @@ export class Tutorial extends React.Component {
|
|||
let content;
|
||||
if (this.state.notFound) {
|
||||
content = (
|
||||
<div className="homePanel">
|
||||
<div className="homTutorial__notFoundPanel">
|
||||
<EuiText>
|
||||
<p>
|
||||
Unable to find tutorial {this.props.tutorialId}
|
||||
|
@ -315,7 +314,7 @@ export class Tutorial extends React.Component {
|
|||
/>
|
||||
|
||||
<EuiSpacer />
|
||||
<div className="text-center">
|
||||
<div className="eui-textCenter">
|
||||
{this.renderInstructionSetsToggle()}
|
||||
</div>
|
||||
|
||||
|
@ -329,7 +328,7 @@ export class Tutorial extends React.Component {
|
|||
);
|
||||
}
|
||||
return (
|
||||
<EuiPage className="home">
|
||||
<EuiPage className="homPage">
|
||||
<EuiPageBody>
|
||||
|
||||
<div>
|
||||
|
|
|
@ -1,8 +0,0 @@
|
|||
.text-center > .kuiButtonGroup {
|
||||
display: inline-block !important;
|
||||
}
|
||||
|
||||
.homePanel {
|
||||
background: white;
|
||||
padding: 24px;
|
||||
}
|
|
@ -149,7 +149,6 @@ export class TutorialDirectory extends React.Component {
|
|||
renderTabs = () => {
|
||||
return this.tabs.map((tab, index) => (
|
||||
<EuiTab
|
||||
className="homeDirectoryTab"
|
||||
onClick={() => this.onSelectedTabChanged(tab.id)}
|
||||
isSelected={tab.id === this.state.selectedTabId}
|
||||
key={index}
|
||||
|
@ -214,7 +213,7 @@ export class TutorialDirectory extends React.Component {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<EuiPage className="home">
|
||||
<EuiPage className="homPage">
|
||||
<EuiPageBody>
|
||||
|
||||
<a className="kuiLink" href="#/home">Home</a>
|
||||
|
|
|
@ -41,7 +41,7 @@ import {
|
|||
* Shows a full-screen welcome page that gives helpful quick links to beginners.
|
||||
*/
|
||||
export class Welcome extends React.Component {
|
||||
hideOnEsc = (e) => {
|
||||
hideOnEsc = e => {
|
||||
if (e.key === 'Escape') {
|
||||
this.props.onSkip();
|
||||
}
|
||||
|
@ -59,21 +59,23 @@ export class Welcome extends React.Component {
|
|||
const { urlBasePath, onSkip } = this.props;
|
||||
|
||||
return (
|
||||
<div className="home-welcome">
|
||||
<header className="home-welcome-header">
|
||||
<div className="home-welcome-content eui-textCenter">
|
||||
<div className="homWelcome">
|
||||
<header className="homWelcome__header">
|
||||
<div className="homWelcome__content eui-textCenter">
|
||||
<EuiSpacer size="xxl" />
|
||||
<span className="home-welcome-logo">
|
||||
<span className="homWelcome__logo">
|
||||
<EuiIcon type="logoKibana" size="xxl" />
|
||||
</span>
|
||||
<EuiTitle size="l" className="home-welcome-title">
|
||||
<EuiTitle size="l" className="homWelcome__title">
|
||||
<h1>Welcome to Kibana</h1>
|
||||
</EuiTitle>
|
||||
<EuiText size="s" className="welcome-subtitle">Your window into the Elastic Stack</EuiText>
|
||||
<EuiText size="s" color="subdued" className="homWelcome__subtitle">
|
||||
<p>Your window into the Elastic Stack</p>
|
||||
</EuiText>
|
||||
<EuiSpacer size="xl" />
|
||||
</div>
|
||||
</header>
|
||||
<div className="home-welcome-content home-welcome-body">
|
||||
<div className="homWelcome__content homWelcome-body">
|
||||
<EuiFlexGroup gutterSize="l">
|
||||
<EuiFlexItem>
|
||||
<EuiCard
|
||||
|
@ -82,24 +84,24 @@ export class Welcome extends React.Component {
|
|||
title="Let's get started"
|
||||
description="We noticed that you don't have any data in your cluster.
|
||||
You can try our sample data and dashboards or jump in with your own data."
|
||||
footer={(
|
||||
footer={
|
||||
<footer>
|
||||
<EuiButton
|
||||
fill
|
||||
className="home-welcome-footer-action"
|
||||
className="homWelcome__footerAction"
|
||||
href="#/home/tutorial_directory/sampleData"
|
||||
>
|
||||
Try our sample data
|
||||
</EuiButton>
|
||||
<EuiButtonEmpty
|
||||
className="home-welcome-footer-action"
|
||||
className="homWelcome__footerAction"
|
||||
onClick={onSkip}
|
||||
data-test-subj="skipWelcomeScreen"
|
||||
>
|
||||
Explore on my own
|
||||
</EuiButtonEmpty>
|
||||
</footer>
|
||||
)}
|
||||
}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
|
|
|
@ -1,108 +1,7 @@
|
|||
@import (reference) "~ui/styles/variables.less";
|
||||
|
||||
home-app {
|
||||
background-color: @globalColorLightestGray;
|
||||
}
|
||||
|
||||
.home {
|
||||
min-height: 100vh;
|
||||
max-width: 1200px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.homeDirectory {
|
||||
background: @white;
|
||||
margin: 0;
|
||||
border-left: 1px solid @globalColorLightGray;
|
||||
border-right: 1px solid @globalColorLightGray;
|
||||
border-bottom: 1px solid @globalColorLightGray;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.homeDirectoryTab {
|
||||
background-color: @globalColorLightestGray;
|
||||
}
|
||||
|
||||
.sampleDataSetCard {
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.home-welcome {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 100000;
|
||||
background: inherit;
|
||||
// When sassified, should pull in EUI colors: $euiColorLightestShade, $euiColorEmptyShade
|
||||
background-image: linear-gradient(0deg, @globalColorLightestGray 0%, white 100%);
|
||||
color: inherit;
|
||||
opacity: 0;
|
||||
overflow: auto;
|
||||
animation: homeFadeIn 0.5s ease-in 0s forwards;
|
||||
}
|
||||
|
||||
.home-welcome::before {
|
||||
.homWelcome::before {
|
||||
content: url(../assets/bg_top_branded.svg);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.home-welcome::after {
|
||||
.homWelcome::after {
|
||||
content: url(../assets/bg_bottom_branded.svg);
|
||||
position: fixed;
|
||||
bottom: -2px; // Hides an odd space at the bottom of the svg
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.home-welcome-header {
|
||||
position: relative;
|
||||
padding: 32px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.home-welcome-logo {
|
||||
display: inline-block;
|
||||
margin-bottom: 24px;
|
||||
background-color: white;
|
||||
border-radius: 100%;
|
||||
padding: 16px;
|
||||
box-shadow: 0 4px 16px -6px rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
|
||||
.home-welcome-title {
|
||||
color: inherit;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.home-welcome-footer-action {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.welcome-subtitle {
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.home-welcome-content {
|
||||
position: relative;
|
||||
margin: auto;
|
||||
max-width: 512px;
|
||||
padding-left: 32px;
|
||||
padding-right: 32px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
@keyframes homeFadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(200px), scale(0.75);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0), scale(1);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,7 +1,10 @@
|
|||
@import '../../../../src/ui/public/styles/styling_constants';
|
||||
|
||||
// Discover styles
|
||||
@import 'discover/index';
|
||||
@import './discover/index';
|
||||
|
||||
// Home styles
|
||||
@import './home/index';
|
||||
|
||||
// Dashboard styles
|
||||
// MUST STAY AT THE BOTTOM BECAUSE OF DARK THEME IMPORTS
|
||||
|
|
|
@ -6,8 +6,16 @@
|
|||
@import '../../../../node_modules/@elastic/eui/src/global_styling/mixins/index';
|
||||
|
||||
// EUI TODO: Add this
|
||||
@mixin truncate($style: ellipsis) {
|
||||
white-space: nowrap;
|
||||
text-overflow: $style;
|
||||
overflow: hidden;
|
||||
@mixin kibanaCircleLogo() {
|
||||
display: inline-block;
|
||||
@include size($euiSizeXXL * 2);
|
||||
line-height: $euiSizeXXL * 2;
|
||||
text-align: center;
|
||||
background-color: $euiColorEmptyShade;
|
||||
border-radius: 100%;
|
||||
padding: $euiSize;
|
||||
|
||||
.euiIcon {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue