@use "sass:color"; @use "defaults"; // {{< expand "Label" "icon" >}} .gdoc-expand { margin: defaults.$padding-16 0; border: defaults.$border-1 solid var(--accent-color); border-radius: defaults.$border-radius; overflow: hidden; &__head { background: var(--accent-color-lite); padding: defaults.$padding-8 defaults.$padding-16; cursor: pointer; } &__content { display: none; padding: 0 defaults.$padding-16; } &__control:checked + &__content { display: block; } .gdoc-page__anchor { display: none; } } // {{< tabs >}} .gdoc-tabs { margin: defaults.$padding-16 0; border: defaults.$border-1 solid var(--accent-color); border-radius: defaults.$border-radius; overflow: hidden; display: flex; flex-wrap: wrap; &__label { display: inline-block; padding: defaults.$padding-8 defaults.$padding-16; border-bottom: defaults.$border-1 transparent; cursor: pointer; } &__content { order: 999; //Move content blocks to the end width: 100%; border-top: defaults.$border-1 solid var(--accent-color-lite); padding: 0 defaults.$padding-16; display: none; } &__control:checked + &__label { border-bottom: defaults.$border-2 solid var(--link-color); } &__control:checked + &__label + &__content { display: block; } .gdoc-page__anchor { display: none; } } // {{< columns >}} .gdoc-columns { margin: defaults.$padding-16 0; &--regular > :first-child { flex: 1; } &--small > :first-child { flex: 0.35; min-width: defaults.$body-min-width * 0.35; } &--large > :first-child { flex: 1.65; min-width: defaults.$body-min-width * 1.65; } &__content { flex: 1 1; min-width: defaults.$body-min-width * 0.66; box-shadow: 0 15px 60px var(--accent-color); padding: $padding-32; border-radius: 12px; } &__content:hover { box-shadow: 0 15px 60px var(--accent-color-light); } .gdoc-page__anchor { display: none; } } // {{< button >}} .gdoc-button { $root: &; margin: defaults.$padding-16 0; display: inline-block; background: var(--accent-color-lite); border: defaults.$border-1 solid var(--accent-color); border-radius: defaults.$border-radius; cursor: pointer; &__link { display: inline-block; color: inherit !important; text-decoration: none !important; } &:hover { background: var(--button-background); border-color: var(--button-border-color); color: defaults.$gray-100; } &--regular { font-size: defaults.$font-size-base; #{$root}__link { padding: defaults.$padding-4 defaults.$padding-8; } } &--large { font-size: defaults.$font-size-20; #{$root}__link { padding: defaults.$padding-8 defaults.$padding-16; } } } // {{< hint >}} .gdoc-hint { @each $name, $color in defaults.$hint-colors { &.#{$name} { border-left-color: $color; background-color: color.scale($color, $lightness: 95%, $saturation: -30%); color: defaults.$body-font-color; padding: 0; code, pre { background-color: color.scale($color, $lightness: 80%, $saturation: -75%); color: defaults.$code-font-color; } } } &__title { padding: defaults.$padding-4 defaults.$padding-16; background-color: color.scale(defaults.$gray-600, $alpha: -95%); font-weight: bold; color: color.scale(defaults.$body-font-color, $alpha: -15%); i.fa::after { content: attr(title); font-style: normal; padding-left: defaults.$padding-24; } i.fa { color: defaults.$black; background-size: auto 90%; background-repeat: no-repeat; filter: invert(30%); margin-left: -5px; } @each $name, $icon in defaults.$hint-icons { i.fa.#{$name} { background-image: url(img/geekdoc-stack.svg##{$icon}); } } .gdoc-icon { width: defaults.$font-size-24; height: defaults.$font-size-24; margin-left: -5px; } } &__text { padding: defaults.$padding-4 defaults.$padding-16; } .gdoc-page__anchor { display: none; } } // {{< mermaid >}} .gdoc-mermaid { font-family: var(--body-font-family); // Fix height of mermaid SVG elements (see https://github.com/mermaid-js/mermaid/issues/2481) > svg { height: 100%; padding: defaults.$padding-8; } } // {{< propertylist >}} .gdoc-props { &__title, &__default { padding: 0; margin: 0; font-family: var(--code-font-family); } &__meta { gap: 0.5em; line-height: normal; margin-bottom: defaults.$padding-4; &:hover .gdoc-page__anchor svg.gdoc-icon { color: var(--control-icons); } } @each $name, $color in defaults.$hint-colors { &__tag.#{$name} { border-color: color.scale($color, $lightness: 90%, $saturation: -30%); background-color: color.scale($color, $lightness: 95%, $saturation: -30%); } } &__tag { font-size: defaults.$font-size-14; font-weight: normal; background-color: defaults.$gray-100; border: defaults.$border-1 solid defaults.$gray-200; border-radius: defaults.$border-radius; padding: defaults.$padding-2 defaults.$padding-4; color: defaults.$body-font-color; } &__default { font-size: defaults.$font-size-14; } } // {{% progress %}} .gdoc-progress { margin-bottom: defaults.$padding-16; &__label { padding: defaults.$padding-4 0; &--name { font-weight: bold; } } &__wrap { background-color: var(--accent-color-lite); border-radius: 1em; box-shadow: inset 0 0 0 defaults.$border-1 var(--accent-color); } &__bar { height: 1em; border-radius: 1em; background-image: linear-gradient( -45deg, rgba(255, 255, 255, 0.125) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.125) 50%, rgba(255, 255, 255, 0.125) 75%, transparent 75%, transparent ); background-size: 2.5em 2.5em; background-color: defaults.$main-color !important; } }