consul/ui/packages/consul-ui/app/components/skip-links/layout.scss

%skip-links {
  display: flex;
  flex-direction: column;
  position: absolute;
  z-index: 10;
  left: 50%;
  padding: 20px;
  top: -100px;
  transform: translateX(-50%);
}
%skip-links div,
%skip-links button,
%skip-links a {
  display: block;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
}
%skip-links:focus-within {
  top: 0px;
}
ui: Sidebar navigation / redesign (#9553) * CSS for moving from a horizontal main menu to a side/vertical one * Add <App /> Component and rearrange <HashcorpConsul /> to use it 1. HashicorpConsul now uses <App /> 2. <App /> is now translated and adds 'skip to main content' functionality 3. Adds ember-in-viewport addon in order to visibly hide main navigation items in order to take them out of focus/tabbing 4. Slight amends to the dom service while I was there 2021-01-26 17:40:33 +00:00			`%skip-links {`
			`display: flex;`
			`flex-direction: column;`
			`position: absolute;`
ui: Move control of login modal to use JS rather than HTML (label/id) (#9883) * Add before and after skip links portals * Move EmptyState and ErrorState to use a @login action/function * Move page title setting to the Route component * Add Routes and Outlets everywhere, and use those to access login modal * Add some aria-labels to the modals * Docs * Remove the label/input now we no longer need it, fixup pageobject * Add basic modal docs * Switch out old toggle names for ids * Wrap nspace Route template in a Route component * type > class 2021-04-06 13:40:40 +01:00			`z-index: 10;`
ui: Sidebar navigation / redesign (#9553) * CSS for moving from a horizontal main menu to a side/vertical one * Add <App /> Component and rearrange <HashcorpConsul /> to use it 1. HashicorpConsul now uses <App /> 2. <App /> is now translated and adds 'skip to main content' functionality 3. Adds ember-in-viewport addon in order to visibly hide main navigation items in order to take them out of focus/tabbing 4. Slight amends to the dom service while I was there 2021-01-26 17:40:33 +00:00			`left: 50%;`
			`padding: 20px;`
			`top: -100px;`
			`transform: translateX(-50%);`
			`}`
ui: Move control of login modal to use JS rather than HTML (label/id) (#9883) * Add before and after skip links portals * Move EmptyState and ErrorState to use a @login action/function * Move page title setting to the Route component * Add Routes and Outlets everywhere, and use those to access login modal * Add some aria-labels to the modals * Docs * Remove the label/input now we no longer need it, fixup pageobject * Add basic modal docs * Switch out old toggle names for ids * Wrap nspace Route template in a Route component * type > class 2021-04-06 13:40:40 +01:00			`%skip-links div,`
			`%skip-links button,`
			`%skip-links a {`
			`display: block;`
			`width: 100%;`
			`text-align: center;`
			`box-sizing: border-box;`
			`}`
ui: Sidebar navigation / redesign (#9553) * CSS for moving from a horizontal main menu to a side/vertical one * Add <App /> Component and rearrange <HashcorpConsul /> to use it 1. HashicorpConsul now uses <App /> 2. <App /> is now translated and adds 'skip to main content' functionality 3. Adds ember-in-viewport addon in order to visibly hide main navigation items in order to take them out of focus/tabbing 4. Slight amends to the dom service while I was there 2021-01-26 17:40:33 +00:00			`%skip-links:focus-within {`
			`top: 0px;`
			`}`