@onsvisual/svelte-components 1.0.39 → 1.0.41

package/dist/css/main.css

@@ -1,513 +1,513 @@
-@import url("https://cdn.ons.gov.uk/sdc/design-system/72.10.4/css/main.css");
-@import url("https://cdn.ons.gov.uk/vendor/accessible-autocomplete/3.0.1/accessible-autocomplete.min.css");
-
-/* CSS rules missing from design system */
-.ons-grid--spaced {
-	margin-bottom: -1rem;
-}
-.ons-grid--gutterless {
-	margin-bottom: 0;
-}
-.ons-grid--tight {
-	margin-bottom: -0.5rem;
-}
-.ons-grid--loose {
-	margin-bottom: -2rem;
-}
-.ons-grid--loose .ons-grid__col {
-	padding-left: 2rem;
-}
-.ons-grid--spaced.ons-grid--loose .ons-grid__col {
-	margin-bottom: 2rem;
-}
-
-/* Fixes for unexpected behaviour in design system */
-body {
-	height: unset;
-}
-.ons-grid > * {
-	font-size: 1.125rem;
-}
-.ons-hero {
-	overflow: visible;
-}
-.ons-btn__inner .ons-icon {
-	fill: currentColor;
-}
-
-/* Backfills for legacy website */
-.primary-nav__item:hover > ul,
-.primary-nav__link:focus + ul {
-	top: 100%;
-}
-.primary-nav__link:focus.hide-children + ul {
-	left: -99999px;
-}
-.col-wrap:after,
-.col-wrap:before,
-.col:after,
-.col:before,
-.wrapper:after,
-.wrapper:before {
-	content: "";
-	display: table;
-}
-.col-wrap:after,
-.col:after,
-.wrapper:after {
-	clear: both;
-}
-.col {
-	width: 100%;
-	float: left;
-}
-.language--js__container,
-.secondary-nav {
-	max-width: 55%;
-	float: right;
-}
-.language--js__container .language {
-	font-size: 12px;
-	margin-bottom: 0.25rem;
-}
-.header {
-	padding: 15px 0 9px;
-	position: relative;
-	height: 72px;
-}
-.nav--controls {
-	list-style: none;
-	margin: 0;
-	padding: 0;
-	display: flex;
-	align-items: stretch;
-}
-.nav--controls__item {
-	padding: 0;
-	margin: 0;
-	display: inline-block;
-	width: 50%;
-}
-.nav--controls__menu,
-.nav--controls__search {
-	background-color: #414042;
-	font-size: 17px;
-	padding: 16px;
-	color: #e5e6e7;
-	float: left;
-	text-decoration: none;
-}
-.nav--controls__menu {
-	width: 100%;
-	border-right: 1px solid #323132;
-}
-.nav--controls__search {
-	width: 100%;
-}
-.primary-nav {
-	background-color: #58595b;
-	position: relative;
-}
-.primary-nav__list {
-	list-style: none;
-	margin: 0 auto;
-	font-size: 14px;
-	display: flex;
-	align-items: stretch;
-}
-.primary-nav__item {
-	margin: 0;
-	padding: 0;
-	cursor: pointer;
-	display: inline-block;
-	flex-grow: 1;
-}
-.primary-nav__link {
-	color: #e5e6e7;
-	text-decoration: none;
-	height: 100%;
-}
-.primary-nav__child-list {
-	list-style: none;
-	color: #fff;
-	margin: 0;
-}
-.primary-nav__child-item {
-	display: block;
-	margin: 0;
-	padding: 0;
-}
-.primary-nav__child-link {
-	display: block;
-	color: #fff;
-	text-decoration: none;
-}
-.primary-nav__language {
-	display: block;
-	color: #e5e6e7;
-	overflow: hidden;
-	margin: 0;
-	padding-left: 32px;
-}
-.search__button,
-.search__input {
-	border: none;
-	height: 48px;
-	font-weight: inherit;
-	line-height: 1.5;
-}
-.search__button {
-	font-size: 1.41rem;
-	color: #fff;
-	padding: 0;
-	background-color: #0f8243;
-	position: relative;
-}
-.search__button:focus,
-.search__button:hover {
-	background-color: #0b5d30;
-}
-.search__button:focus {
-	outline: #f93 solid 3px;
-}
-.search__button > * {
-	display: flex;
-	justify-content: center;
-}
-.search__form {
-	font-weight: inherit;
-	line-height: 1.5;
-	width: 100%;
-	color: #e5e6e7;
-	padding: 16px 0;
-	overflow: initial;
-	display: flex;
-}
-.search__input {
-	font-size: 1.41rem;
-	color: #323132;
-	padding: 4px;
-	background: #fff;
-	border-top-left-radius: 2px;
-	border-bottom-left-radius: 2px;
-	flex-grow: 2;
-}
-.search__input:focus {
-	outline: #f93 solid 2px;
-	outline-offset: -2px;
-	z-index: 1;
-	position: relative;
-}
-.search__label {
-	font-weight: inherit;
-	line-height: 1.5;
-	font-size: 1rem;
-	color: #e5e6e7;
-	padding: 12px 16px 12px 0;
-	background-color: rgba(0, 0, 0, 0);
-	position: relative;
-	flex-grow: 1;
-}
-.secondary-nav__item {
-	float: left;
-	margin: 0;
-	padding: 0;
-}
-.secondary-nav__link {
-	padding: 0 8px;
-	border-right: 1px solid #e5e6e7;
-	text-decoration: none;
-}
-.secondary-nav__link:hover {
-	text-decoration: underline;
-}
-.secondary-nav__list {
-	float: right;
-	list-style: none;
-	padding: 0;
-	margin: 0;
-	font-size: 14px;
-	font-weight: 400;
-	line-height: 24px;
-}
-.wrapper {
-	box-sizing: border-box;
-	margin: 0 auto;
-	max-width: 57.445rem;
-	padding: 0 1rem;
-	position: relative;
-	width: 100%;
-}
-.ons-svg-icon--m {
-	height: 1.1rem;
-	width: 1.1rem;
-}
-.logo {
-	display: block;
-}
-@media (min-width: 500px) {
-	.wrapper {
-		padding: 0 1rem;
-	}
-}
-@media print {
-	.header .print--hide,
-	.primary-nav.print--hide,
-	.search.print--hide {
-		display: none;
-	}
-}
-@media (max-width: 739.98px) {
-	.primary-nav__list {
-		padding: 0 0 8px;
-		display: block;
-	}
-	.primary-nav__item {
-		height: 48px;
-		display: block;
-		padding-left: 16px;
-	}
-	.primary-nav__item:hover > ul {
-		width: 100%;
-	}
-	.primary-nav__link {
-		height: 48px;
-		padding: 14px 0 10px 16px;
-	}
-	.primary-nav__child-link:focus,
-	.primary-nav__child-link:hover,
-	.primary-nav__link:hover {
-		color: #fff;
-		text-decoration: underline;
-	}
-	.primary-nav__child-list {
-		background-color: #414042;
-		padding: 0;
-	}
-	.primary-nav__child-link {
-		height: 48px;
-		padding: 14px 0 12px 16px;
-	}
-	.primary-nav__language a.language__link {
-		color: #fff;
-	}
-	.search {
-		background-color: #58595b;
-	}
-	.search__button {
-		width: 20%;
-		font-size: 1.16rem;
-		padding-left: 8px;
-		padding-right: 8px;
-	}
-	.search__form {
-		padding: 24px 0;
-		overflow: hidden;
-	}
-	.js-nav-hidden,
-	.nav-main--hidden,
-	.nav-search--hidden,
-	.search__label,
-	.secondary-nav {
-		display: none;
-	}
-	.hide--sm {
-		display: none !important;
-	}
-	.js-expandable > a > .expansion-indicator {
-		display: initial;
-		visibility: initial;
-	}
-	.js-expandable > a > .expansion-indicator:before {
-		position: absolute;
-		color: #e5e6e7;
-		content: "+";
-		left: 16px;
-	}
-	.js-expandable-active > a > .expansion-indicator:before {
-		content: "-";
-		padding-left: 5px;
-	}
-	.nav--controls__menu:focus,
-	.nav--controls__menu:hover,
-	.nav--controls__search:focus,
-	.nav--controls__search:hover {
-		color: #fff;
-		text-decoration: none;
-	}
-	.logo {
-		height: 48px;
-		padding: 2px 0 6px 0;
-	}
-}
-@media (max-width: 768px) {
-	.language--js__container,
-	.secondary-nav {
-		margin: 0;
-	}
-	.primary-nav__list {
-		justify-content: center;
-		flex-wrap: nowrap;
-	}
-	.primary-nav__item:hover > ul {
-		width: unset;
-	}
-	.search__form {
-		display: flex;
-	}
-}
-@media (min-width: 740px) {
-	.primary-nav__item:hover {
-		background-color: #323132;
-	}
-	.primary-nav__link {
-		display: inline-block;
-		padding: 5px 16px 9px;
-		border-left: 1px solid #323132;
-		font-size: 13px;
-	}
-	.primary-nav__link:focus {
-		border-left: 1px solid #323132;
-		background-color: #323132;
-		color: #fff;
-		text-decoration: none;
-	}
-	.primary-nav__link:focus + ul {
-		background-color: #323132;
-		text-decoration: none;
-		display: block;
-	}
-	.primary-nav__child-list {
-		position: absolute;
-		padding: 0;
-		z-index: 10;
-		display: none;
-		border: 1px solid #323132;
-	}
-	.primary-nav__child-link {
-		padding: 14px 0 10px 16px;
-	}
-	.primary-nav__child-link:focus,
-	.primary-nav__child-link:hover {
-		outline: 0;
-		background-color: #d0d2d3;
-		text-decoration: none;
-		color: #323132;
-	}
-	.search {
-		background-color: #414042;
-		font-size: 1.41rem;
-		height: 80px;
-	}
-	.ons-svg-icon--m {
-		height: 1.2rem;
-		width: 1.2rem;
-	}
-	.col {
-		width: 752px;
-		margin-right: 0;
-	}
-	.col--md-16 {
-		width: 256px;
-		margin: 0;
-	}
-	.col--md-21 {
-		width: 336px;
-		margin: 0;
-	}
-	.col--md-23 {
-		width: 368px;
-		margin: 0;
-	}
-	.col--md-3 {
-		width: 48px;
-		margin: 0;
-	}
-	.col--md-7 {
-		width: 112px;
-		margin: 0;
-	}
-	.col--md-8 {
-		width: 128px;
-		margin: 0;
-	}
-	.col--md-one-third {
-		width: 240px;
-	}
-	.col--md-two-thirds {
-		width: 496px;
-	}
-	.hide--md {
-		display: none !important;
-	}
-	.language--js__container .language {
-		float: right;
-	}
-	.nav--controls {
-		display: none;
-	}
-	.primary-nav {
-		border-top: 1px solid #323132;
-		border-bottom: 1px solid #323132;
-	}
-	.primary-nav__item:nth-child(6) {
-		border-right: 1px solid #323132;
-	}
-	.primary-nav__item:hover > ul {
-		background-color: #323132;
-		color: #fff;
-		text-decoration: none;
-		display: block;
-		width: 32.75%;
-	}
-	.primary-nav__item:focus > a,
-	.primary-nav__item:hover > a {
-		border-left: 1px solid #323132;
-		background-color: #323132;
-		color: #fff;
-		text-decoration: none;
-	}
-	.logo {
-		height: 39px;
-		margin-top: 2px;
-	}
-}
-@media (min-width: 980px) {
-	.primary-nav__link {
-		font-size: 14px;
-	}
-	.col {
-		width: 944px;
-		margin-right: 0;
-	}
-	.col--lg-10 {
-		width: 160px;
-		margin: 0;
-	}
-	.col--lg-20 {
-		width: 320px;
-		margin: 0;
-	}
-	.col--lg-24 {
-		width: 384px;
-		margin: 0;
-	}
-	.col--lg-3 {
-		width: 48px;
-		margin: 0;
-	}
-	.col--lg-32 {
-		width: 512px;
-		margin: 0;
-	}
-	.col--lg-9 {
-		width: 144px;
-		margin: 0;
-	}
-	.col--lg-one-third {
-		width: 304px;
-	}
-	.col--lg-two-thirds {
-		width: 624px;
-	}
-}
+@import url("https://cdn.ons.gov.uk/sdc/design-system/72.10.4/css/main.css");
+@import url("https://cdn.ons.gov.uk/vendor/accessible-autocomplete/3.0.1/accessible-autocomplete.min.css");
+
+/* CSS rules missing from design system */
+.ons-grid--spaced {
+	margin-bottom: -1rem;
+}
+.ons-grid--gutterless {
+	margin-bottom: 0;
+}
+.ons-grid--tight {
+	margin-bottom: -0.5rem;
+}
+.ons-grid--loose {
+	margin-bottom: -2rem;
+}
+.ons-grid--loose .ons-grid__col {
+	padding-left: 2rem;
+}
+.ons-grid--spaced.ons-grid--loose .ons-grid__col {
+	margin-bottom: 2rem;
+}
+
+/* Fixes for unexpected behaviour in design system */
+body {
+	height: unset;
+}
+.ons-grid > * {
+	font-size: 1.125rem;
+}
+.ons-hero {
+	overflow: visible;
+}
+.ons-btn__inner .ons-icon {
+	fill: currentColor;
+}
+
+/* Backfills for legacy website */
+.primary-nav__item:hover > ul,
+.primary-nav__link:focus + ul {
+	top: 100%;
+}
+.primary-nav__link:focus.hide-children + ul {
+	left: -99999px;
+}
+.col-wrap:after,
+.col-wrap:before,
+.col:after,
+.col:before,
+.wrapper:after,
+.wrapper:before {
+	content: "";
+	display: table;
+}
+.col-wrap:after,
+.col:after,
+.wrapper:after {
+	clear: both;
+}
+.col {
+	width: 100%;
+	float: left;
+}
+.language--js__container,
+.secondary-nav {
+	max-width: 55%;
+	float: right;
+}
+.language--js__container .language {
+	font-size: 12px;
+	margin-bottom: 0.25rem;
+}
+.header {
+	padding: 15px 0 9px;
+	position: relative;
+	height: 72px;
+}
+.nav--controls {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	display: flex;
+	align-items: stretch;
+}
+.nav--controls__item {
+	padding: 0;
+	margin: 0;
+	display: inline-block;
+	width: 50%;
+}
+.nav--controls__menu,
+.nav--controls__search {
+	background-color: #414042;
+	font-size: 17px;
+	padding: 16px;
+	color: #e5e6e7;
+	float: left;
+	text-decoration: none;
+}
+.nav--controls__menu {
+	width: 100%;
+	border-right: 1px solid #323132;
+}
+.nav--controls__search {
+	width: 100%;
+}
+.primary-nav {
+	background-color: #58595b;
+	position: relative;
+}
+.primary-nav__list {
+	list-style: none;
+	margin: 0 auto;
+	font-size: 14px;
+	display: flex;
+	align-items: stretch;
+}
+.primary-nav__item {
+	margin: 0;
+	padding: 0;
+	cursor: pointer;
+	display: inline-block;
+	flex-grow: 1;
+}
+.primary-nav__link {
+	color: #e5e6e7;
+	text-decoration: none;
+	height: 100%;
+}
+.primary-nav__child-list {
+	list-style: none;
+	color: #fff;
+	margin: 0;
+}
+.primary-nav__child-item {
+	display: block;
+	margin: 0;
+	padding: 0;
+}
+.primary-nav__child-link {
+	display: block;
+	color: #fff;
+	text-decoration: none;
+}
+.primary-nav__language {
+	display: block;
+	color: #e5e6e7;
+	overflow: hidden;
+	margin: 0;
+	padding-left: 32px;
+}
+.search__button,
+.search__input {
+	border: none;
+	height: 48px;
+	font-weight: inherit;
+	line-height: 1.5;
+}
+.search__button {
+	font-size: 1.41rem;
+	color: #fff;
+	padding: 0;
+	background-color: #0f8243;
+	position: relative;
+}
+.search__button:focus,
+.search__button:hover {
+	background-color: #0b5d30;
+}
+.search__button:focus {
+	outline: #f93 solid 3px;
+}
+.search__button > * {
+	display: flex;
+	justify-content: center;
+}
+.search__form {
+	font-weight: inherit;
+	line-height: 1.5;
+	width: 100%;
+	color: #e5e6e7;
+	padding: 16px 0;
+	overflow: initial;
+	display: flex;
+}
+.search__input {
+	font-size: 1.41rem;
+	color: #323132;
+	padding: 4px;
+	background: #fff;
+	border-top-left-radius: 2px;
+	border-bottom-left-radius: 2px;
+	flex-grow: 2;
+}
+.search__input:focus {
+	outline: #f93 solid 2px;
+	outline-offset: -2px;
+	z-index: 1;
+	position: relative;
+}
+.search__label {
+	font-weight: inherit;
+	line-height: 1.5;
+	font-size: 1rem;
+	color: #e5e6e7;
+	padding: 12px 16px 12px 0;
+	background-color: rgba(0, 0, 0, 0);
+	position: relative;
+	flex-grow: 1;
+}
+.secondary-nav__item {
+	float: left;
+	margin: 0;
+	padding: 0;
+}
+.secondary-nav__link {
+	padding: 0 8px;
+	border-right: 1px solid #e5e6e7;
+	text-decoration: none;
+}
+.secondary-nav__link:hover {
+	text-decoration: underline;
+}
+.secondary-nav__list {
+	float: right;
+	list-style: none;
+	padding: 0;
+	margin: 0;
+	font-size: 14px;
+	font-weight: 400;
+	line-height: 24px;
+}
+.wrapper {
+	box-sizing: border-box;
+	margin: 0 auto;
+	max-width: 57.445rem;
+	padding: 0 1rem;
+	position: relative;
+	width: 100%;
+}
+.ons-svg-icon--m {
+	height: 1.1rem;
+	width: 1.1rem;
+}
+.logo {
+	display: block;
+}
+@media (min-width: 500px) {
+	.wrapper {
+		padding: 0 1rem;
+	}
+}
+@media print {
+	.header .print--hide,
+	.primary-nav.print--hide,
+	.search.print--hide {
+		display: none;
+	}
+}
+@media (max-width: 739.98px) {
+	.primary-nav__list {
+		padding: 0 0 8px;
+		display: block;
+	}
+	.primary-nav__item {
+		height: 48px;
+		display: block;
+		padding-left: 16px;
+	}
+	.primary-nav__item:hover > ul {
+		width: 100%;
+	}
+	.primary-nav__link {
+		height: 48px;
+		padding: 14px 0 10px 16px;
+	}
+	.primary-nav__child-link:focus,
+	.primary-nav__child-link:hover,
+	.primary-nav__link:hover {
+		color: #fff;
+		text-decoration: underline;
+	}
+	.primary-nav__child-list {
+		background-color: #414042;
+		padding: 0;
+	}
+	.primary-nav__child-link {
+		height: 48px;
+		padding: 14px 0 12px 16px;
+	}
+	.primary-nav__language a.language__link {
+		color: #fff;
+	}
+	.search {
+		background-color: #58595b;
+	}
+	.search__button {
+		width: 20%;
+		font-size: 1.16rem;
+		padding-left: 8px;
+		padding-right: 8px;
+	}
+	.search__form {
+		padding: 24px 0;
+		overflow: hidden;
+	}
+	.js-nav-hidden,
+	.nav-main--hidden,
+	.nav-search--hidden,
+	.search__label,
+	.secondary-nav {
+		display: none;
+	}
+	.hide--sm {
+		display: none !important;
+	}
+	.js-expandable > a > .expansion-indicator {
+		display: initial;
+		visibility: initial;
+	}
+	.js-expandable > a > .expansion-indicator:before {
+		position: absolute;
+		color: #e5e6e7;
+		content: "+";
+		left: 16px;
+	}
+	.js-expandable-active > a > .expansion-indicator:before {
+		content: "-";
+		padding-left: 5px;
+	}
+	.nav--controls__menu:focus,
+	.nav--controls__menu:hover,
+	.nav--controls__search:focus,
+	.nav--controls__search:hover {
+		color: #fff;
+		text-decoration: none;
+	}
+	.logo {
+		height: 48px;
+		padding: 2px 0 6px 0;
+	}
+}
+@media (max-width: 768px) {
+	.language--js__container,
+	.secondary-nav {
+		margin: 0;
+	}
+	.primary-nav__list {
+		justify-content: center;
+		flex-wrap: nowrap;
+	}
+	.primary-nav__item:hover > ul {
+		width: unset;
+	}
+	.search__form {
+		display: flex;
+	}
+}
+@media (min-width: 740px) {
+	.primary-nav__item:hover {
+		background-color: #323132;
+	}
+	.primary-nav__link {
+		display: inline-block;
+		padding: 5px 16px 9px;
+		border-left: 1px solid #323132;
+		font-size: 13px;
+	}
+	.primary-nav__link:focus {
+		border-left: 1px solid #323132;
+		background-color: #323132;
+		color: #fff;
+		text-decoration: none;
+	}
+	.primary-nav__link:focus + ul {
+		background-color: #323132;
+		text-decoration: none;
+		display: block;
+	}
+	.primary-nav__child-list {
+		position: absolute;
+		padding: 0;
+		z-index: 10;
+		display: none;
+		border: 1px solid #323132;
+	}
+	.primary-nav__child-link {
+		padding: 14px 0 10px 16px;
+	}
+	.primary-nav__child-link:focus,
+	.primary-nav__child-link:hover {
+		outline: 0;
+		background-color: #d0d2d3;
+		text-decoration: none;
+		color: #323132;
+	}
+	.search {
+		background-color: #414042;
+		font-size: 1.41rem;
+		height: 80px;
+	}
+	.ons-svg-icon--m {
+		height: 1.2rem;
+		width: 1.2rem;
+	}
+	.col {
+		width: 752px;
+		margin-right: 0;
+	}
+	.col--md-16 {
+		width: 256px;
+		margin: 0;
+	}
+	.col--md-21 {
+		width: 336px;
+		margin: 0;
+	}
+	.col--md-23 {
+		width: 368px;
+		margin: 0;
+	}
+	.col--md-3 {
+		width: 48px;
+		margin: 0;
+	}
+	.col--md-7 {
+		width: 112px;
+		margin: 0;
+	}
+	.col--md-8 {
+		width: 128px;
+		margin: 0;
+	}
+	.col--md-one-third {
+		width: 240px;
+	}
+	.col--md-two-thirds {
+		width: 496px;
+	}
+	.hide--md {
+		display: none !important;
+	}
+	.language--js__container .language {
+		float: right;
+	}
+	.nav--controls {
+		display: none;
+	}
+	.primary-nav {
+		border-top: 1px solid #323132;
+		border-bottom: 1px solid #323132;
+	}
+	.primary-nav__item:nth-child(6) {
+		border-right: 1px solid #323132;
+	}
+	.primary-nav__item:hover > ul {
+		background-color: #323132;
+		color: #fff;
+		text-decoration: none;
+		display: block;
+		width: 32.75%;
+	}
+	.primary-nav__item:focus > a,
+	.primary-nav__item:hover > a {
+		border-left: 1px solid #323132;
+		background-color: #323132;
+		color: #fff;
+		text-decoration: none;
+	}
+	.logo {
+		height: 39px;
+		margin-top: 2px;
+	}
+}
+@media (min-width: 980px) {
+	.primary-nav__link {
+		font-size: 14px;
+	}
+	.col {
+		width: 944px;
+		margin-right: 0;
+	}
+	.col--lg-10 {
+		width: 160px;
+		margin: 0;
+	}
+	.col--lg-20 {
+		width: 320px;
+		margin: 0;
+	}
+	.col--lg-24 {
+		width: 384px;
+		margin: 0;
+	}
+	.col--lg-3 {
+		width: 48px;
+		margin: 0;
+	}
+	.col--lg-32 {
+		width: 512px;
+		margin: 0;
+	}
+	.col--lg-9 {
+		width: 144px;
+		margin: 0;
+	}
+	.col--lg-one-third {
+		width: 304px;
+	}
+	.col--lg-two-thirds {
+		width: 624px;
+	}
+}