app/assets/stylesheets/components/dropdown.scss

%dropdown,
.dropdown {

  position: relative;

  &-toggle {

    color: $link-colour;
    position: relative;
    cursor: pointer;
    outline-offset: 2px;

    &:hover {
      color: $link-hover-colour;
      text-decoration: underline;
    }

  }

  a {

    display: block;
    margin-top: 7px;
    padding-left: 20px;

    &:hover {
      text-decoration: underline;
    }

  }

}
Add progressive enhancement to service switcher - by default, the menu is open - if Javascript is enabled/loaded, the links are hidden, and visual cues (▶) to show that it can be opened are added - clicking it opens and closes it 2016-01-11 16:23:34 +00:00			`%dropdown,`
			`.dropdown {`

			`position: relative;`

Use HTML5 details element for the service switcher The previous service switcher was built purely in Javascript, which meant that, for the purposes of progressive enhancement, it had to load in the open state. Setting it to the closed state with Javascript happened a fraction of a second after page load. This caused an unpleasant flicker as the whole page shifted up and down as it loaded. This commit changes the switcher to use the native HTML5 `details` and `summary` elements[1]. This commit adds a polyfill from GOV.UK Elements for browsers which don’t support `details`/`summary`. 1. http://html5doctor.com/the-details-and-summary-elements/ 2016-01-19 11:37:26 +00:00			`&-toggle {`
Add progressive enhancement to service switcher - by default, the menu is open - if Javascript is enabled/loaded, the links are hidden, and visual cues (▶) to show that it can be opened are added - clicking it opens and closes it 2016-01-11 16:23:34 +00:00
			`color: $link-colour;`
			`position: relative;`
			`cursor: pointer;`
Use HTML5 details element for the service switcher The previous service switcher was built purely in Javascript, which meant that, for the purposes of progressive enhancement, it had to load in the open state. Setting it to the closed state with Javascript happened a fraction of a second after page load. This caused an unpleasant flicker as the whole page shifted up and down as it loaded. This commit changes the switcher to use the native HTML5 `details` and `summary` elements[1]. This commit adds a polyfill from GOV.UK Elements for browsers which don’t support `details`/`summary`. 1. http://html5doctor.com/the-details-and-summary-elements/ 2016-01-19 11:37:26 +00:00			`outline-offset: 2px;`
Add progressive enhancement to service switcher - by default, the menu is open - if Javascript is enabled/loaded, the links are hidden, and visual cues (▶) to show that it can be opened are added - clicking it opens and closes it 2016-01-11 16:23:34 +00:00
			`&:hover {`
			`color: $link-hover-colour;`
			`text-decoration: underline;`
			`}`

			`}`

			`a {`

			`display: block;`
Even out spacing in navigation 2016-01-18 14:31:27 +00:00			`margin-top: 7px;`
Use HTML5 details element for the service switcher The previous service switcher was built purely in Javascript, which meant that, for the purposes of progressive enhancement, it had to load in the open state. Setting it to the closed state with Javascript happened a fraction of a second after page load. This caused an unpleasant flicker as the whole page shifted up and down as it loaded. This commit changes the switcher to use the native HTML5 `details` and `summary` elements[1]. This commit adds a polyfill from GOV.UK Elements for browsers which don’t support `details`/`summary`. 1. http://html5doctor.com/the-details-and-summary-elements/ 2016-01-19 11:37:26 +00:00			`padding-left: 20px;`
Add progressive enhancement to service switcher - by default, the menu is open - if Javascript is enabled/loaded, the links are hidden, and visual cues (▶) to show that it can be opened are added - clicking it opens and closes it 2016-01-11 16:23:34 +00:00
Use HTML5 details element for the service switcher The previous service switcher was built purely in Javascript, which meant that, for the purposes of progressive enhancement, it had to load in the open state. Setting it to the closed state with Javascript happened a fraction of a second after page load. This caused an unpleasant flicker as the whole page shifted up and down as it loaded. This commit changes the switcher to use the native HTML5 `details` and `summary` elements[1]. This commit adds a polyfill from GOV.UK Elements for browsers which don’t support `details`/`summary`. 1. http://html5doctor.com/the-details-and-summary-elements/ 2016-01-19 11:37:26 +00:00			`&:hover {`
			`text-decoration: underline;`
Add progressive enhancement to service switcher - by default, the menu is open - if Javascript is enabled/loaded, the links are hidden, and visual cues (▶) to show that it can be opened are added - clicking it opens and closes it 2016-01-11 16:23:34 +00:00			`}`

			`}`

			`}`