.corpus-layout margin-bottom: space-x(1) &__title display: flex align-items: center &__text font-size: $h3-font-size font-family: $headings-font-family &__line // (?) see "_list.sass" > ".table-header-rename__line" for more infos border-bottom: 1px solid $gray-200 border-top: none // (?) strange behavior where browser engine add it by itself height: 0 flex-grow: 1 margin-left: space-x(4) margin-right: space-x(4) &__expand margin-left: space-x(4) &__edition-block border-bottom: 1px solid $gray-200 // using <table-header-rename-edition> padding to prettify the overall UI // (+ <form-group> padding) margin-bottom: calc( #{$card-spacer-y} + #{ space-x(0.75) } ) &__code-section margin-top: space-x(1) &__folders margin-top: space-x(6) // @TODO: switch <tile-menu> component using a <popover> for a reworked // <context-menu> (easier to use). <popover> has far too many issues, // such as the below micro-managing .tile-menu__popover position: relative width: 200px ////////////////////////////////////////////////////// .corpus-code-layout position: relative &__toolbar display: flex align-items: center justify-content: space-between border-bottom: 1px solid $border-color padding: $card-spacer-y $card-spacer-x background-color: $body-bg position: sticky top: $topbar-height z-index: z-index('corpus-code', 'toolbar') // @XXX: reset "main-page__main-route" wrapper margin margin-left: space-x(-4) margin-right: space-x(-4) margin-top: space-x(-3) &__fields margin-top: space-x(3) z-index: z-index('corpus-code', 'content') .code-section-item // accentuate disabled icon effect .card-header .b-icon-button--disabled opacity: 0.2 // using "bootstrap" Element change to alter the caret icon [aria-expanded="true"] transform: rotate(180deg)