+
Try our sample data
Explore on my own
- )}
+ }
/>
diff --git a/src/core_plugins/kibana/public/home/home.less b/src/core_plugins/kibana/public/home/home.less
index f2c4764a2b58..6333478ecd5c 100644
--- a/src/core_plugins/kibana/public/home/home.less
+++ b/src/core_plugins/kibana/public/home/home.less
@@ -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);
- }
}
diff --git a/src/core_plugins/kibana/public/index.scss b/src/core_plugins/kibana/public/index.scss
index 5ae30066a8df..202284ae2835 100644
--- a/src/core_plugins/kibana/public/index.scss
+++ b/src/core_plugins/kibana/public/index.scss
@@ -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
diff --git a/src/ui/public/styles/_styling_constants.scss b/src/ui/public/styles/_styling_constants.scss
index b86af2288e26..066890e9a1c1 100644
--- a/src/ui/public/styles/_styling_constants.scss
+++ b/src/ui/public/styles/_styling_constants.scss
@@ -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;
+ }
}