Skip to content

Instantly share code, notes, and snippets.

@jenweber
Created December 17, 2019 22:47
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save jenweber/797620eb518630f7311b4478ebcddff5 to your computer and use it in GitHub Desktop.
CSS Grid split toolbar
/* some buttons align left, others right, adjusts dynamically! */
.themer--top-edge-container {
display: grid;
position: fixed;
top: var(--ch-spacing);
right: var(--ch-spacing);
left: var(--ch-spacing);
z-index: var(--ch-actions-z-index);
grid-template-columns: auto auto;
}
.themer--top-edge-width-controls {
justify-self: start;
}
.themer--top-edge-pane-controls {
justify-self: end;
}
<header class="themer--top-edge-container">
<div class="themer--top-edge-width-controls">
<button
class="ch-button ch-button--icon responsive {{if this.cssModeToggle.isResponsive "selected"}}"
{{on "click" this.cssModeToggle.useResponsiveWidth}}
aria-label="Show the card in responsive size"
data-test-responsive-btn
>
</button>
<button
class="ch-button ch-button--icon full-width {{if this.cssModeToggle.isResponsive "" "selected"}}"
{{on "click" this.cssModeToggle.useFullWidth}}
aria-label="Show the card in full width size"
data-test-full-width-btn
>
</button>
</div>
<div class="themer--top-edge-pane-controls">
{{#if this.cssModeToggle.visible}}
<button
class="ch-button ch-button--icon eye-on"
aria-label="Hide the CSS editor"
{{on "click" this.cssModeToggle.hideEditor}}
data-test-hide-editor-btn
>
</button>
{{else}}
<button
class="ch-button ch-button--icon eye-off"
aria-label="Show the CSS editor"
{{on "click" this.cssModeToggle.showEditor}}
data-test-show-editor-btn
>
</button>
{{/if}}
<button
class="ch-button ch-button--icon dock-bottom {{if (eq this.cssModeToggle.dockLocation "bottom") "selected"}}"
{{on "click" this.cssModeToggle.dockBottom}}
aria-label="Dock the CSS editor to the bottom"
data-test-dock-bottom
>
</button>
<button
class="ch-button ch-button--icon dock-right {{if (eq this.cssModeToggle.dockLocation "right") "selected"}}"
{{on "click" this.cssModeToggle.dockRight}}
aria-label="Dock the CSS editor to the right"
data-test-dock-right
>
</button>
<button {{on "click" @closeEditor}}
class="ch-button close-editor-btn"
data-test-close-editor
>
Close Editor
</button>
</div>
</header>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment