@madie/madie-design-system 1.2.39 → 1.2.41

package/styles/qppds/components/_link.scss

@@ -1,54 +1,54 @@
 @import "../settings/index";
 
 .qpp-c-link {
-  color: $blue-60;
-  text-decoration: underline;
-
-  &:hover,
-  &.qpp-c-link--hover {
-    color: $blue-70;
-    text-decoration: none;
-  }
-
-  &:focus,
-  &.qpp-c-link--focus {
-    color: $blue-70;
-    @include link-focus;
-  }
+	color: $blue-60;
+	text-decoration: underline;
+
+	&:hover,
+	&.qpp-c-link--hover {
+		color: $blue-70;
+		text-decoration: none;
+	}
+
+	&:focus,
+	&.qpp-c-link--focus {
+		color: $blue-70;
+		@include link-focus;
+	}
 }
 
 .qppds a {
-  color: $blue-70;
-  text-decoration: underline;
+	color: $blue-70;
+	text-decoration: underline;
 
-  &:hover {
-    text-decoration: none;
-  }
+	&:hover {
+		text-decoration: none;
+	}
 
-  &:focus {
-    @include link-focus;
-  }
+	&:focus {
+		@include link-focus;
+	}
 }
 
 .qppds {
-  .qpp-dark-background {
-    a {
-      color: $white;
-    }
-  }
+	.qpp-dark-background {
+		a {
+			color: $white;
+		}
+	}
 }
 
 .qppds.qpp-dark-background {
-  a {
-    color: $white;
-  }
+	a {
+		color: $white;
+	}
 }
 
 .qppds a:not(.qpp-c-button):not(.qpp-c-tabs__item) > svg,
 .qpp-c-link:not(.qpp-c-button):not(.qpp-c-tabs__item) > svg {
-  @include inline-icon;
-  margin-top: -0.3em;
-  margin-left: rem(6px);
-  width: 1.2em;
-  height: 1.2em;
+	@include inline-icon;
+	margin-top: -0.3em;
+	margin-left: rem(6px);
+	width: 1.2em;
+	height: 1.2em;
 }

package/styles/qppds/components/_madie-alert.scss

@@ -1,74 +1,83 @@
 // alert vars
-$gold-20: #FFC438;
-$performance-blue: #1D6987;
-$red-50: #D92F2F;
-$green-30: #7CB342;
+$gold-20: #ffc438;
+$performance-blue: #1d6987;
+$red-50: #d92f2f;
+$green-30: #7cb342;
 
 .madie-alert {
-    border: solid 1px #fff;
-    border-left-width: 4px;
-    min-height: 54px;
-    padding: 0 8px;
-    color: #333;
-    font-family: Rubik, sans-serif;
-    font-weight: 400;
-    font-size: 14px;
-    display: flex;
-    flex-direction: row;
-    flex-grow: 1;
-    align-items: center;
-    background-color: #FFF;
-    position: relative;
-    &.inactive {
-        display: none;
-    } 
-    > svg {
-        margin-right: 8px;
-    }
-    &.warning {
-        border-color: $gold-20;
-    &:before {
-        background-color: $gold-20;
-    }
-        > svg {
-            color: #DF711C;
-        }
-    }
-    &.info {
-        border-color: $performance-blue;
-        &:before {
-            background-color: $performance-blue;
-        }
-        > svg {
-            color: #125496;
-        }
-    }
-    &.error {
-        border-color: $red-50;
-        &:before {
-            background-color: $red-50;
-        }
-        > svg {
-            color: #AE1C1C;
-        }
-    }
-    &.success {
-        border-color: $green-30;
-        &:before {
-            background-color: $green-30;
-        }
-        > svg {
-            color: #4D7E23;
-        }
-    }
-    #content {
-        > ol, > ul, > li, > p, > a, > h1, > h2, > h3, > h4, > h5 {
-            margin: 0;
-            > li {
-                // get rid of the unnecessary natural list gaps
-                line-height: 1;
-                margin: 0;
-            }
-        }
-    }
-}
+	border: solid 1px #fff;
+	border-left-width: 4px;
+	min-height: 54px;
+	padding: 0 8px;
+	color: #333;
+	font-family: Rubik, sans-serif;
+	font-weight: 400;
+	font-size: 14px;
+	display: flex;
+	flex-direction: row;
+	flex-grow: 1;
+	align-items: center;
+	background-color: #fff;
+	position: relative;
+	&.inactive {
+		display: none;
+	}
+	> svg {
+		margin-right: 8px;
+	}
+	&.warning {
+		border-color: $gold-20;
+		&:before {
+			background-color: $gold-20;
+		}
+		> svg {
+			color: #df711c;
+		}
+	}
+	&.info {
+		border-color: $performance-blue;
+		&:before {
+			background-color: $performance-blue;
+		}
+		> svg {
+			color: #125496;
+		}
+	}
+	&.error {
+		border-color: $red-50;
+		&:before {
+			background-color: $red-50;
+		}
+		> svg {
+			color: #ae1c1c;
+		}
+	}
+	&.success {
+		border-color: $green-30;
+		&:before {
+			background-color: $green-30;
+		}
+		> svg {
+			color: #4d7e23;
+		}
+	}
+	#content {
+		> ol,
+		> ul,
+		> li,
+		> p,
+		> a,
+		> h1,
+		> h2,
+		> h3,
+		> h4,
+		> h5 {
+			margin: 0;
+			> li {
+				// get rid of the unnecessary natural list gaps
+				line-height: 1;
+				margin: 0;
+			}
+		}
+	}
+}

package/styles/qppds/components/_madie-confirm-dialog.scss

@@ -1,35 +1,34 @@
 #confirm-dialog-body {
-    font-family: Rubik, sans-serif;
-    display: flex;
-    flex-direction: column;
-  
-    .dialog-warning-body {
-      font-size: 16px;
-      line-height: 19px;
-  
-      p {
-        margin-bottom: 18px;
-      }
-  
-      .strong {
-        font-weight: 500;
-      }
-    }
-  
-    .dialog-warning-action {
-      font-size: 14px;
-      line-height: 26px;
-      font-weight: 400;
-      color: #d92f2f;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      margin-left: -3px;
-  
-      > p {
-        margin-left: 8px;
-        margin-bottom: 0;
-      }
-    }
-  }
-  
+	font-family: Rubik, sans-serif;
+	display: flex;
+	flex-direction: column;
+
+	.dialog-warning-body {
+		font-size: 16px;
+		line-height: 19px;
+
+		p {
+			margin-bottom: 18px;
+		}
+
+		.strong {
+			font-weight: 500;
+		}
+	}
+
+	.dialog-warning-action {
+		font-size: 14px;
+		line-height: 26px;
+		font-weight: 400;
+		color: #d92f2f;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		margin-left: -3px;
+
+		> p {
+			margin-left: 8px;
+			margin-bottom: 0;
+		}
+	}
+}

package/styles/qppds/components/_madie-delete-dialog.scss

@@ -1,34 +1,34 @@
 #delete-dialog-body {
-    font-family: Rubik, sans-serif;
-    display: flex;
-    flex-direction: column;
-  
-    .dialog-warning-body {
-      font-size: 16px;
-      line-height: 19px;
-  
-      p {
-        margin-bottom: 18px;
-      }
-  
-      .strong {
-        font-weight: 500;
-      }
-    }
-  
-    .dialog-warning-action {
-      font-size: 14px;
-      line-height: 26px;
-      font-weight: 400;
-      color: #d92f2f;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      margin-left: -3px;
-  
-      > p {
-        margin-left: 8px;
-        margin-bottom: 0;
-      }
-    }
-  }
+	font-family: Rubik, sans-serif;
+	display: flex;
+	flex-direction: column;
+
+	.dialog-warning-body {
+		font-size: 16px;
+		line-height: 19px;
+
+		p {
+			margin-bottom: 18px;
+		}
+
+		.strong {
+			font-weight: 500;
+		}
+	}
+
+	.dialog-warning-action {
+		font-size: 14px;
+		line-height: 26px;
+		font-weight: 400;
+		color: #d92f2f;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		margin-left: -3px;
+
+		> p {
+			margin-left: 8px;
+			margin-bottom: 0;
+		}
+	}
+}

package/styles/qppds/components/_madie-discard-dialog.scss

@@ -1,34 +1,34 @@
 #discard-changes-dialog-body {
-  font-family: Rubik, sans-serif;
-  display: flex;
-  flex-direction: column;
+	font-family: Rubik, sans-serif;
+	display: flex;
+	flex-direction: column;
 
-  .dialog-warning-body {
-    font-size: 16px;
-    line-height: 19px;
+	.dialog-warning-body {
+		font-size: 16px;
+		line-height: 19px;
 
-    p {
-      margin-bottom: 18px;
-    }
+		p {
+			margin-bottom: 18px;
+		}
 
-    .strong {
-      font-weight: 500;
-    }
-  }
+		.strong {
+			font-weight: 500;
+		}
+	}
 
-  .dialog-warning-action {
-    font-size: 14px;
-    line-height: 26px;
-    font-weight: 400;
-    color: #d92f2f;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    margin-left: -3px;
+	.dialog-warning-action {
+		font-size: 14px;
+		line-height: 26px;
+		font-weight: 400;
+		color: #d92f2f;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		margin-left: -3px;
 
-    > p {
-      margin-left: 8px;
-      margin-bottom: 0;
-    }
-  }
+		> p {
+			margin-left: 8px;
+			margin-bottom: 0;
+		}
+	}
 }

package/styles/qppds/components/_madie-tooltip.scss

@@ -1,63 +1,62 @@
-@import '../settings/index';
+@import "../settings/index";
 
 .madie-tooltip-button {
-    padding: 0;
-    background-color: transparent;
-    border:none;
-    display: flex;
-    flex-direction: row;
-    height: 14px;
-    align-self: flex-end;
-    margin-right: 1px;
-    margin-left: 4px;
-    margin-bottom: -1px;
-    position: relative;
-    overflow: visible;
-
-    &:focus {
-        outline-color: $cyan-50
-    }
-
-    > svg {
-        display: flex;
-        align-self: center;
-    }
-
-    > .madie-tooltip {
-        z-index: 1000;
-        border-radius: 4px;
-        color: #fff;
-        background: $grey-80;
-        max-width: 250px;
-        min-width: 250px;
-        width: max-content;
-        padding: 8px 16px;
-        position: absolute;
-        top: 24px;
-        overflow: visible;
-        left: -125px;
-
-        &.hidden {
-            visibility: hidden;
-        }
-
-        > p {
-            font-size: 14px;
-            font-style: normal;
-            font-weight: 400;
-            margin: 0;
-        }
-
-        &:after {
-            content: "";
-            position: absolute;
-            top: -8px;
-            height: 16px;
-            width: 16px;
-            background-color: $grey-80;
-            rotate: 45deg;
-            left: calc(50% - 1px)
-        }
-    }
+	padding: 0;
+	background-color: transparent;
+	border: none;
+	display: flex;
+	flex-direction: row;
+	height: 14px;
+	align-self: flex-end;
+	margin-right: 1px;
+	margin-left: 4px;
+	margin-bottom: -1px;
+	position: relative;
+	overflow: visible;
+
+	&:focus {
+		outline-color: $cyan-50;
+	}
+
+	> svg {
+		display: flex;
+		align-self: center;
+	}
+
+	> .madie-tooltip {
+		z-index: 1000;
+		border-radius: 4px;
+		color: #fff;
+		background: $grey-80;
+		max-width: 250px;
+		min-width: 250px;
+		width: max-content;
+		padding: 8px 16px;
+		position: absolute;
+		top: 24px;
+		overflow: visible;
+		left: -125px;
+
+		&.hidden {
+			visibility: hidden;
+		}
+
+		> p {
+			font-size: 14px;
+			font-style: normal;
+			font-weight: 400;
+			margin: 0;
+		}
+
+		&:after {
+			content: "";
+			position: absolute;
+			top: -8px;
+			height: 16px;
+			width: 16px;
+			background-color: $grey-80;
+			rotate: 45deg;
+			left: calc(50% - 1px);
+		}
+	}
 }
-