diff --git a/ui/app/styles/app.scss b/ui/app/styles/app.scss index 444a30182..952709aee 100644 --- a/ui/app/styles/app.scss +++ b/ui/app/styles/app.scss @@ -1,5 +1,8 @@ -@import "./core"; -@import "./components"; -@import "./charts"; +@import './core'; +@import './components'; +@import './charts'; -@import "ember-power-select"; +@import 'ember-power-select'; + +// Only necessary in dev +@import './styleguide.scss'; diff --git a/ui/app/styles/styleguide.scss b/ui/app/styles/styleguide.scss new file mode 100644 index 000000000..f77df0655 --- /dev/null +++ b/ui/app/styles/styleguide.scss @@ -0,0 +1,44 @@ +#styleguide { + .mock-content { + display: flex; + height: 250px; + + .mock-image, + .mock-copy { + height: 100%; + width: 100%; + margin: 1em; + } + + .mock-image { + background: linear-gradient( + to top right, + transparent 0%, + transparent 49%, + $grey-blue 49%, + $grey-blue 51%, + transparent 51%, + transparent 100% + ), + linear-gradient( + to bottom right, + transparent 0%, + transparent 49%, + $grey-blue 49%, + $grey-blue 51%, + transparent 51%, + transparent 100% + ); + } + + .mock-copy { + background: repeating-linear-gradient( + to bottom, + $grey-blue, + $grey-blue 5px, + transparent 5px, + transparent 14px + ); + } + } +}