@madie/madie-design-system 1.2.39 → 1.2.41

package/styles/qppds/components/_pagination.scss

@@ -2,226 +2,226 @@
 // stylelint-disable selector-no-qualifying-type
 
 .qpp-c-pagination {
-  margin: $spacing-8 0;
-  font-family: $font-rubik;
-  display: flex;
-  justify-content: center;
+	margin: $spacing-8 0;
+	font-family: $font-rubik;
+	display: flex;
+	justify-content: center;
 }
 
 .qpp-c-pagination svg {
-  margin-bottom: -0.1em !important;
-  margin-top: -0.1em !important;
-  height: 1em !important;
-  width: 1em !important;
+	margin-bottom: -0.1em !important;
+	margin-top: -0.1em !important;
+	height: 1em !important;
+	width: 1em !important;
 }
 
 .qpp-c-pagination button,
 .qppds .qpp-c-pagination button {
-  background-color: $white;
-  border-radius: rem(3px);
-  padding: rem(2px);
+	background-color: $white;
+	border-radius: rem(3px);
+	padding: rem(2px);
 
-  &:focus {
-    border: rem(1px) solid $blue-70;
-    border-radius: rem(3px);
-    box-shadow: 0 0 0 rem(4px) $blue-10;
-    outline: none;
-  }
+	&:focus {
+		border: rem(1px) solid $blue-70;
+		border-radius: rem(3px);
+		box-shadow: 0 0 0 rem(4px) $blue-10;
+		outline: none;
+	}
 }
 
 .qpp-c-pagination a,
 .qppds .qpp-c-pagination a {
-  text-decoration: none;
-  padding: rem(2px);
+	text-decoration: none;
+	padding: rem(2px);
 
-  &:focus {
-    @include link-focus;
-    padding: rem(2px);
-    margin-left: 0;
-    margin-right: 0;
-    color: $blue-60;
-  }
+	&:focus {
+		@include link-focus;
+		padding: rem(2px);
+		margin-left: 0;
+		margin-right: 0;
+		color: $blue-60;
+	}
 
-  &:hover {
-    color: $blue-60;
-  }
+	&:hover {
+		color: $blue-60;
+	}
 }
 
 .qpp-c-pagination__list {
-  margin-top: 0;
-  margin-bottom: 0;
-  list-style-type: none;
-  padding-left: 0;
+	margin-top: 0;
+	margin-bottom: 0;
+	list-style-type: none;
+	padding-left: 0;
 
-  align-items: center;
-  display: flex;
-  flex-flow: row nowrap;
-  justify-content: center;
-  width: auto;
+	align-items: center;
+	display: flex;
+	flex-flow: row nowrap;
+	justify-content: center;
+	width: auto;
 
-  > li {
-    margin-bottom: 0;
-  }
+	> li {
+		margin-bottom: 0;
+	}
 }
 
 // Pagination nav items
 // 1. Prevents chromium browsers from adding additional vertical whitespace
 .qpp-c-pagination__item {
-  display: inline-flex; // 1
-  height: $spacing-40;
-  justify-content: center;
-  line-height: 1;
-  margin-left: $spacing-8 / 2;
-  margin-right: $spacing-8 / 2;
-  min-width: $spacing-40;
-  max-width: $spacing-40;
-
-  @include at-media(sm) {
-    flex: 1 0 auto; // flex: 1 won't work in IE11
-  }
-
-  > a,
-  > button {
-    &:disabled {
-      background-color: $gray-10;
-      color: $gray-60;
-    }
-  }
+	display: inline-flex; // 1
+	height: $spacing-40;
+	justify-content: center;
+	line-height: 1;
+	margin-left: $spacing-8 / 2;
+	margin-right: $spacing-8 / 2;
+	min-width: $spacing-40;
+	max-width: $spacing-40;
+
+	@include at-media(sm) {
+		flex: 1 0 auto; // flex: 1 won't work in IE11
+	}
+
+	> a,
+	> button {
+		&:disabled {
+			background-color: $gray-10;
+			color: $gray-60;
+		}
+	}
 }
 
 // Don't show previous and next at mobile.
 // Functionality exists with page buttons.
 .qpp-c-pagination__arrow {
-  display: none;
-  max-width: unset;
-  @include at-media(sm) {
-    display: inherit;
-  }
+	display: none;
+	max-width: unset;
+	@include at-media(sm) {
+		display: inherit;
+	}
 }
 
 .qpp-c-pagination__link {
-  align-items: center;
-  color: $blue-60;
-  display: inline-flex;
-  text-decoration: none;
+	align-items: center;
+	color: $blue-60;
+	display: inline-flex;
+	text-decoration: none;
 
-  &[disabled] {
-    opacity: 0.4 !important;
-    pointer-events: none;
-  }
+	&[disabled] {
+		opacity: 0.4 !important;
+		pointer-events: none;
+	}
 
-  &:hover,
-  &:focus,
-  &:active {
-    text-decoration: underline !important;
-  }
+	&:hover,
+	&:focus,
+	&:active {
+		text-decoration: underline !important;
+	}
 
-  &:visited {
-    color: $blue-60;
-  }
+	&:visited {
+		color: $blue-60;
+	}
 }
 
 .qpp-c-pagination__button {
-  align-items: center;
-  border-color: $gray-10;
-  border-radius: rem(3px);
-  border-style: solid;
-  border-width: rem(1px);
-  color: $blue-60;
-  display: inline-flex;
-  justify-content: center;
-  padding: $spacing-16;
-  text-decoration: none;
-  width: 100%;
-
-  &:hover,
-  &.qpp-c-button--hover {
-    background-color: $gray-04;
-  }
-
-  &:active,
-  &.qpp-c-button--active {
-    background-color: darken($gray-04, 3%);
-  }
+	align-items: center;
+	border-color: $gray-10;
+	border-radius: rem(3px);
+	border-style: solid;
+	border-width: rem(1px);
+	color: $blue-60;
+	display: inline-flex;
+	justify-content: center;
+	padding: $spacing-16;
+	text-decoration: none;
+	width: 100%;
+
+	&:hover,
+	&.qpp-c-button--hover {
+		background-color: $gray-04;
+	}
+
+	&:active,
+	&.qpp-c-button--active {
+		background-color: darken($gray-04, 3%);
+	}
 }
 
 .qppds .qpp-c-pagination__link,
 .qppds .qpp-c-pagination__button {
-  color: $blue-60;
+	color: $blue-60;
 }
 
 .qpp-c-pagination .qpp-c-pagination__current,
 .qppds .qpp-c-pagination .qpp-c-pagination__current {
-  background-color: $blue-60;
-  border-color: transparent;
-  color: $white;
+	background-color: $blue-60;
+	border-color: transparent;
+	color: $white;
 
-  &:hover,
-  &:focus,
-  &:active {
-    background-color: $blue-60;
-    color: $white;
-  }
+	&:hover,
+	&:focus,
+	&:active {
+		background-color: $blue-60;
+		color: $white;
+	}
 }
 
 .qpp-c-pagination__overflow {
-  align-items: center;
-  align-self: stretch;
-  display: inherit;
-  user-select: none;
-  padding: $spacing-16;
-  opacity: 0.5;
-  color: $blue-60;
+	align-items: center;
+	align-self: stretch;
+	display: inherit;
+	user-select: none;
+	padding: $spacing-16;
+	opacity: 0.5;
+	color: $blue-60;
 }
 
 .qpp-c-pagination__previous {
-  @include at-media(sm) {
-    margin-right: $spacing-40 / 2;
-  }
-  border: rem(1px) solid transparent;
-  svg {
-    margin-right: rem(6px) !important;
-    margin-left: 0 !important;
-  }
+	@include at-media(sm) {
+		margin-right: $spacing-40 / 2;
+	}
+	border: rem(1px) solid transparent;
+	svg {
+		margin-right: rem(6px) !important;
+		margin-left: 0 !important;
+	}
 }
 
 .qpp-c-pagination button.qpp-c-pagination__previous {
-  &:focus {
-    border: rem(1px) solid $blue-70;
-    margin-right: $spacing-40 / 2;
-  }
+	&:focus {
+		border: rem(1px) solid $blue-70;
+		margin-right: $spacing-40 / 2;
+	}
 }
 
 .qpp-c-pagination__item a.qpp-c-pagination__previous {
-  &:focus {
-    border: rem(1px) solid $blue-70;
-    margin-right: ($spacing-40 / 2);
-    margin-left: 0;
-  }
+	&:focus {
+		border: rem(1px) solid $blue-70;
+		margin-right: ($spacing-40 / 2);
+		margin-left: 0;
+	}
 }
 
 .qpp-c-pagination__next {
-  @include at-media(sm) {
-    margin-left: $spacing-40 / 2;
-  }
-  border: rem(1px) solid transparent;
-  svg {
-    margin-left: rem(6px) !important;
-    margin-right: 0 !important;
-  }
+	@include at-media(sm) {
+		margin-left: $spacing-40 / 2;
+	}
+	border: rem(1px) solid transparent;
+	svg {
+		margin-left: rem(6px) !important;
+		margin-right: 0 !important;
+	}
 }
 
 .qpp-c-pagination button.qpp-c-pagination__next {
-  border: 1px solid transparent;
-  &:focus {
-    border: rem(1px) solid $blue-70;
-  }
+	border: 1px solid transparent;
+	&:focus {
+		border: rem(1px) solid $blue-70;
+	}
 }
 
 .qpp-c-pagination__item a.qpp-c-pagination__next {
-  &:focus {
-    border: rem(1px) solid $blue-70;
-    margin-left: $spacing-40 / 2;
-    margin-right: 0;
-  }
+	&:focus {
+		border: rem(1px) solid $blue-70;
+		margin-left: $spacing-40 / 2;
+		margin-right: 0;
+	}
 }

package/styles/qppds/components/_search.scss

@@ -1,112 +1,112 @@
-@import '../settings/index';
+@import "../settings/index";
 
 @mixin search-icon {
-  background: transparent;
-  border: rem(1px) solid transparent;
-  position: absolute;
-  margin: rem(4px);
-  padding: rem(5px);
-  line-height: 0;
-  color: $gray-80;
-  border-radius: 50%;
-
-  > svg {
-    margin-top: 0;
-    margin-bottom: 0;
-    width: rem(20px);
-    height: rem(20px);
-  }
+	background: transparent;
+	border: rem(1px) solid transparent;
+	position: absolute;
+	margin: rem(4px);
+	padding: rem(5px);
+	line-height: 0;
+	color: $gray-80;
+	border-radius: 50%;
+
+	> svg {
+		margin-top: 0;
+		margin-bottom: 0;
+		width: rem(20px);
+		height: rem(20px);
+	}
 }
 
 @mixin search-icon-button {
-  @include search-icon;
-
-  &:disabled {
-    color: $gray-70;
-  }
-
-  &:hover {
-    color: $gray-80;
-    background-color: rgba(0, 0, 0, 0.05);
-  }
-
-  &:active {
-    background-color: rgba(0, 0, 0, 0.1);
-  }
-
-  &:focus {
-    @include focus-ring;
-    box-shadow: 0 0 0 3px $blue-10;
-    border-radius: 50%;
-    color: $gray-80;
-  }
+	@include search-icon;
+
+	&:disabled {
+		color: $gray-70;
+	}
+
+	&:hover {
+		color: $gray-80;
+		background-color: rgba(0, 0, 0, 0.05);
+	}
+
+	&:active {
+		background-color: rgba(0, 0, 0, 0.1);
+	}
+
+	&:focus {
+		@include focus-ring;
+		box-shadow: 0 0 0 3px $blue-10;
+		border-radius: 50%;
+		color: $gray-80;
+	}
 }
 
 .qpp-c-search {
-  position: relative;
-
-  .qpp-c-search__submit {
-    display: inline-block;
-    margin-top: 0;
-  }
-
-  .qpp-c-text-input {
-    display: inline-block;
-    padding-left: $spacing-40;
-    margin-right: $spacing-12;
-
-    &:placeholder-shown ~ button,
-    &:placeholder-shown ~ .qpp-c-search__icon {
-      color: $gray-70;
-    }
-
-    &:placeholder-shown ~ .qpp-c-search__clear {
-      display: none;
-    }
-
-    &::-webkit-search-cancel-button {
-      display: none;
-      appearance: none;
-      height: 16px;
-      width: 16px;
-      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-x'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
-    }
-
-    &::-ms-clear {
-      display: none;
-    }
-  }
-
-  .qpp-c-search__icon {
-    @include search-icon;
-    display: inline-block;
-    top: 0;
-    left: 0;
-  }
-
-  .qpp-c-search__wrap {
-    position: relative;
-    display: inline-block;
-    margin-right: $spacing-12;
-
-    .qpp-c-text-input {
-      display: inline-block;
-      margin-right: 0;
-    }
-  }
+	position: relative;
+
+	.qpp-c-search__submit {
+		display: inline-block;
+		margin-top: 0;
+	}
+
+	.qpp-c-text-input {
+		display: inline-block;
+		padding-left: $spacing-40;
+		margin-right: $spacing-12;
+
+		&:placeholder-shown ~ button,
+		&:placeholder-shown ~ .qpp-c-search__icon {
+			color: $gray-70;
+		}
+
+		&:placeholder-shown ~ .qpp-c-search__clear {
+			display: none;
+		}
+
+		&::-webkit-search-cancel-button {
+			display: none;
+			appearance: none;
+			height: 16px;
+			width: 16px;
+			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-x'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
+		}
+
+		&::-ms-clear {
+			display: none;
+		}
+	}
+
+	.qpp-c-search__icon {
+		@include search-icon;
+		display: inline-block;
+		top: 0;
+		left: 0;
+	}
+
+	.qpp-c-search__wrap {
+		position: relative;
+		display: inline-block;
+		margin-right: $spacing-12;
+
+		.qpp-c-text-input {
+			display: inline-block;
+			margin-right: 0;
+		}
+	}
 }
 
 .qpp-c-search.qpp-c-search--compact {
-  .qpp-c-search__submit {
-    @include search-icon-button;
-    top: 0;
-    right: 0;
-  }
-
-  .qpp-c-text-input {
-    display: inline-block;
-    padding-left: $spacing-16;
-    padding-right: $spacing-40;
-    margin-right: 0;
-  }
+	.qpp-c-search__submit {
+		@include search-icon-button;
+		top: 0;
+		right: 0;
+	}
+
+	.qpp-c-text-input {
+		display: inline-block;
+		padding-left: $spacing-16;
+		padding-right: $spacing-40;
+		margin-right: 0;
+	}
 }

package/styles/qppds/components/_sidebar.scss

@@ -1,9 +1,9 @@
 // Import the sidebar styles
-@import '../settings/index';
-@import 'sidebar/animations';
-@import 'sidebar/sidebar';
-@import 'sidebar/links';
-@import 'sidebar/details';
-@import 'sidebar/sidebar-animation';
-@import 'sidebar/project-specific/wi';
-@import 'sidebar/sidebar-tooltip';
+@import "../settings/index";
+@import "sidebar/animations";
+@import "sidebar/sidebar";
+@import "sidebar/links";
+@import "sidebar/details";
+@import "sidebar/sidebar-animation";
+@import "sidebar/project-specific/wi";
+@import "sidebar/sidebar-tooltip";