Merge pull request #572 from nla/ph-ctpl-242

CTPL-242: New NLA branding
nla · Nov 26, 2024 · cb19b08 · cb19b08
2 parents 7da8dda + 4006687
commit cb19b08
Show file tree

Hide file tree

Showing 33 changed files with 1,815 additions and 410 deletions.
diff --git a/app/assets/images/nla-stacked-logo-black.svg b/app/assets/images/nla-stacked-logo-black.svg
diff --git a/app/assets/images/nla_logo.svg b/app/assets/images/nla_logo.svg
diff --git a/app/assets/stylesheets/nla/_alert.scss b/app/assets/stylesheets/nla/_alert.scss
@@ -0,0 +1,68 @@
+@charset "UTF-8";
+@import "variables";
+@import "nla-custom-bootstrap";
+
+.alert {
+	border-width: 0;
+	border-left-style: solid;
+	border-left-width: 0.25rem;
+	color: $grey-700;
+	padding-left: 3rem;
+	position: relative;
+
+	&:before {
+		position: absolute;
+		top: 1rem;
+		left: 1rem;
+		width: 1rem;
+		height: 1rem;
+		font: var(--fa-font-regular);
+	}
+
+}
+
+
+.alert-success {
+	background: $success-light;
+	border-left-color: $success-dark;
+
+	&:before {
+		content: "\f058";
+		color: $success-dark;
+	}
+}
+
+.alert-info {
+	background: $info-light;
+	border-left-color: $info-dark;
+
+	&:before {
+		content: "\f05a";
+		color: $info-dark;
+	}
+}
+
+.alert-warning {
+	background: $warning-light;
+	border-left-color: $warning-dark;
+
+	&:before {
+		content: "\f06a";
+		color: $warning-dark;
+	}
+}
+
+.alert-error {
+	background: $error-light;
+	border-left-color: $error-dark;
+
+	&:before {
+		content: "\f057";
+		color: $error-dark;
+	}
+}
+
+
+.alert p {
+	margin-bottom: 0;
+}
diff --git a/app/assets/stylesheets/nla/_buttons.scss b/app/assets/stylesheets/nla/_buttons.scss
@@ -3,16 +3,14 @@
 @import "nla-custom-bootstrap";
 
 .btn {
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-
+  border-radius: 5rem;
+
   &.arrow-before {
     position: relative;
     padding-left: 3rem;
     padding-right: 2rem;
 
     &::after {
-      color: var(--#{$prefix}orange);
       content: "\F177";
       font: var(--fa-font-regular);
       position: absolute;
@@ -25,7 +23,6 @@
     &:hover::after,
     &:focus::after {
       left: 1.25rem;
-      color: $white;
     }
   }
 
@@ -35,7 +32,6 @@
     padding-right: 3rem;
 
     &::after {
-      color: $orange;
       content: "\F178";
       font: var(--fa-font-regular);
       position: absolute;
@@ -48,7 +44,6 @@
     &:hover::after,
     &:focus::after {
       right: 1.25rem;
-      color: $white;
     }
   }
 
@@ -58,7 +53,6 @@
     padding-right: 3rem;
 
     &::after {
-      color: $orange;
       content: "\f1f8";
       font: var(--fa-font-regular);
       position: absolute;
@@ -71,29 +65,66 @@
     &:hover::after,
     &:focus::after {
       font: var(--fa-font-solid);
-      color: $white;
     }
   }
 }
 
-.btn-primary:focus,
-.btn-primary:hover,
-.btn-primary:active {
-  background: $light-purple;
-  border-color: $light-purple;
-  background: $black;
-}
 
 .btn-outline-primary,
 .btn-outline-secondary {
   background: $white;
+
+  &:focus,
+  &:hover,
+  &:active {
+    background-color: $lightest-teal;
+    color: $black;
+    text-decoration: none;
+  }
 }
-
-.dropdown-item {
+.btn-primary {
+  background: $black;
+  color: $white;
+  border: 1px solid $black;
+
+  &:focus,
   &:hover,
+  &:active {
+    background: $light-teal;
+    color: $black;
+    border-color: $light-teal;
+    box-shadow: none;
+  }
+}
+
+
+.btn-secondary {
+  background-color: $white;
+  border: 1px solid $black;
+  color: $black;
+
   &:focus,
-  &.active {
+  &:hover,
+  &:active {
+    background-color: $light-teal;
     color: $black;
-    background-color: #e9ecef;
+    border-color: $light-teal;
+    text-decoration: none;
+    box-shadow: none;
   }
 }
+
+.btn-tertiary {
+  background-color: $white;
+  border-color: $black;
+  color: $black;
+
+  &:focus,
+  &:hover,
+  &:active {
+    background-color: $black;
+    color: $white;
+    text-decoration: none;
+  }
+}
+