diff options
Diffstat (limited to 'src/panel.scss')
| -rw-r--r-- | src/panel.scss | 48 |
1 files changed, 45 insertions, 3 deletions
diff --git a/src/panel.scss b/src/panel.scss index 3a814269..a53e47c6 100644 --- a/src/panel.scss +++ b/src/panel.scss @@ -45,8 +45,9 @@ .panel-heading, .panel-footer { --panel-heading-height-padding: 0.6em; + --__panel-heading-gap: 0.5em; --__panel-heading-height: 3.2em; - --__panel-heading-height-inner: calc(var(--__panel-heading-height) - 2 * var(--panel-heading-height-padding)); + --__panel-heading-height-inner: calc(var(--__panel-heading-height) - 2 * var(--panel-heading-height-padding, 0)); position: relative; box-sizing: border-box; @@ -54,10 +55,10 @@ grid-auto-flow: column; grid-template-columns: minmax(50%, 1fr); grid-auto-columns: auto; - grid-column-gap: 0.5em; + grid-column-gap: var(--__panel-heading-gap); flex: none; background-size: cover; - padding: 0.6em; + padding: var(--panel-heading-height-padding); height: var(--__panel-heading-height); line-height: var(--__panel-heading-height-inner); z-index: 4; @@ -147,6 +148,15 @@ color: var(--panelLink, $fallback--link); } + .button-unstyled:hover, + a:hover { + i[class*=icon-], + .svg-inline--fa, + .iconLetter { + color: var(--panelText); + } + } + .faint { background-color: transparent; color: $fallback--faint; @@ -186,6 +196,38 @@ } } } + + .rightside-button { + align-self: stretch; + text-align: center; + width: var(--__panel-heading-height); + height: var(--__panel-heading-height); + margin: calc(-1 * var(--panel-heading-height-padding)) 0; + margin-right: calc(-1 * var(--__panel-heading-gap)); + + > button { + box-sizing: border-box; + padding: calc(1 * var(--panel-heading-height-padding)) 0; + height: 100%; + width: 100%; + text-align: center; + + svg { + font-size: 1.2em; + } + } + } + + .rightside-icon { + align-self: stretch; + text-align: center; + width: var(--__panel-heading-height); + margin-right: calc(-1 * var(--__panel-heading-gap)); + + svg { + font-size: 1.2em; + } + } } .panel-footer { |