open-consul/ui/packages/consul-ui/app/styles/debug.scss

276 lines
5.4 KiB
SCSS

@import './app';
@import './base/icons/debug';
@import 'prism-coldark-dark';
// temporary component debugging setup
@import 'consul-ui/components/main-nav-vertical/debug';
@import 'consul-ui/components/badge/debug';
@import 'consul-ui/components/csv-list/debug';
@import 'consul-ui/components/horizontal-kv-list/debug';
@import 'consul-ui/components/icon-definition/debug';
@import 'consul-ui/components/inline-alert/debug';
@import 'consul-ui/components/definition-table/debug';
%debug-grid {
display: flex;
flex-wrap: wrap;
}
%debug-grid li {
margin-right: 20px;
margin-bottom: 20px;
}
%debug-grid figure {
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
width: 140px;
}
%debug-grid figcaption {
@extend %p3;
text-align: center;
}
[id^='docfy-demo-preview-color'] ul,
[id^='docfy-demo-preview-typography'] ul,
[id^='docfy-demo-preview-icons'] ul {
@extend %debug-grid;
}
[id^='docfy-demo-preview-typography'] figure,
[id^='docfy-demo-preview-icons'] figure {
border: var(--decor-border-100);
border-color: rgb(var(--tone-gray-300));
height: 80px;
}
[id^='docfy-demo-preview-icons'] figure::before {
position: relative;
top: 20px;
}
[id^='docfy-demo-preview-color'] figure {
height: 40px;
}
#docfy-demo-preview-color0 {
@extend %theme-light;
background-color: rgb(var(--white));
}
#docfy-demo-preview-color1 {
background-color: rgb(var(--black));
@extend %theme-dark;
}
[id^='docfy-demo-preview-typography'] {
.debug-h000 {
@extend %h000;
}
.debug-h100 {
@extend %h100;
}
.debug-h200 {
@extend %h200;
}
.debug-h300 {
@extend %h300;
}
.debug-h400 {
@extend %h400;
}
.debug-h500 {
@extend %h500;
}
.debug-h600 {
@extend %h600;
}
.debug-p {
@extend %p;
}
.debug-p1 {
@extend %p1;
}
.debug-p2 {
@extend %p2;
}
.debug-p3 {
@extend %p3;
}
}
html.is-debug body > .brand-loader {
display: none !important;
}
html.is-debug [class*='partition-'] {
display: block !important;
}
html:not(.with-data-source) .data-source-debug {
display: none;
}
html:not(.with-data-source) .data-source-debug {
display: none;
}
%debug-box {
color: red;
background-color: rgb(255 255 255 / 70%);
position: absolute;
/* hi */
z-index: 100000;
}
html.with-href-to [href^='console://']::before {
@extend %p3;
@extend %debug-box;
content: attr(href);
display: inline;
}
html.with-route-announcer .route-title {
@extend %unvisually-hidden;
}
.data-source-debug {
@extend %debug-box;
}
.data-source-debug input:checked + pre code::after {
content: attr(data-json);
display: block;
}
.data-source-debug input {
display: none;
}
.docs {
& {
background-color: rgb(var(--tone-gray-000));
}
.tabular-collection,
.list-collection {
height: 300px !important;
}
[role='banner'] nav:first-of-type {
& {
padding-top: 0 !important;
height: calc(100vh - var(--chrome-height, 47px));
}
ul {
margin-bottom: 100px;
padding-top: 0 !important;
}
li.consul-components a::before,
li.components a::before {
@extend %with-logo-glimmer-color-icon, %as-pseudo;
margin-right: 5px;
}
li.consul-components.css-component a::before,
li.components.css-component a::before {
@extend %with-logo-glimmer-color-icon, %as-pseudo;
}
li.consul-components.ember-component a::before,
li.components.ember-component a::before {
@extend %with-logo-ember-circle-color-icon, %as-pseudo;
}
}
main {
& {
margin-bottom: 2rem;
}
> ol,
> ul {
list-style-position: outside;
margin-bottom: 1rem;
margin-left: 2rem;
}
> ul {
list-style-type: disc;
}
> h1,
> h2,
> h3,
> h4 {
margin-bottom: 1em;
}
> h1 {
padding-top: 20px;
@extend %h100;
}
> h2 {
@extend %h200;
}
> h3 {
@extend %h300;
}
> h4 {
@extend %h400;
}
> p {
@extend %p1;
}
> table {
margin-bottom: 3em;
}
> table td {
font-weight: normal !important;
cursor: default !important;
}
> table td code {
@extend %inline-code;
vertical-align: bottom;
}
> table tr:hover {
box-shadow: none;
}
> ol code,
> ul code {
@extend %inline-code;
}
}
.docfy-demo {
& {
margin-bottom: 1rem;
position: relative;
}
&__example {
& {
border-top: 1px solid;
border-left: 1px solid;
border-right: 1px solid;
border-color: rgb(var(--tone-gray-200));
padding: 1rem;
margin-bottom: 0;
}
ol,
ul {
margin-bottom: 0;
}
figure {
margin-bottom: 0.5rem;
}
figcaption {
margin-bottom: 0.5rem;
color: rgb(var(--tone-gray-400));
font-style: italic;
}
figcaption code {
@extend %inline-code;
}
pre code {
@extend %block-code;
}
figure > [type='text'] {
border: 1px solid rgb(var(--tone-gray-999));
width: 100%;
padding: 0.5rem;
}
figure > select {
border: 1px solid rgb(var(--tone-gray-999));
padding: 0.5rem;
}
}
// &__snippets__tabs__button {
// display: none;
// }
&__snippet {
pre {
margin: 0 !important;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
}
}
}