codemistic · Sen-442b · Oct 25, 2022 · Oct 25, 2022 · Oct 25, 2022 · Oct 25, 2022
diff --git a/Prefix/Components/Alert-Button/assets/cancel_black_24dp.svg b/Prefix/Components/Alert-Button/assets/cancel_black_24dp.svg
diff --git a/Prefix/Components/Alert-Button/assets/download.svg b/Prefix/Components/Alert-Button/assets/download.svg
diff --git a/Prefix/Components/Alert-Button/assets/shopping-cart-svgrepo-com.svg b/Prefix/Components/Alert-Button/assets/shopping-cart-svgrepo-com.svg
diff --git a/Prefix/Components/Alert-Button/index.html b/Prefix/Components/Alert-Button/index.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+
+    <link rel="stylesheet" href="./source/alert.css" />
+
+    <script
+      src="https://kit.fontawesome.com/6f74bb313d.js"
+      crossorigin="anonymous"
+    ></script>
+  </head>
+  <body id="classList-inheritance-body">
+    <div class="alert alert-primary alert-text">
+      This is a primary text in primary alert box with
+      <a class="alert-link-text" href="#">alert link</a>
+    </div>
+
+    <div class="alert alert-secondary alert-text">
+      This is a random text to show secondary alert box with
+      <a class="alert-link-text" href="#">alert link</a>
+    </div>
+    <div class="alert alert-danger alert-text">
+      <a href="#"><i class="fas fa-exclamation-circle"></i></a> This is a danger
+      text in danger alert box
+    </div>
+
+    <div class="alert alert-success alert-text">
+      <a href="#"><i class="fas fa-check-circle"></i></a> This is a positive
+      alert text in alert box
+    </div>
+
+    <div class="alert alert-immediate-action alert-text">
+      <a href="#"><i class="fas fa-radiation-alt"></i></a> This is a Warning
+      text in an alert box
+    </div>
+
+    <div class="alert alert-immediate-action alert-text">
+      <a href="#"><i class="fas fa-radiation-alt"></i></a> This is a text with
+      close button <button class="remove-alert-btn"></button>
+    </div>
+
+    <h3>Buttons</h3>
+    <button class="btn btn-cta btn-cta-anim dynamic-text-color">
+      Get Started
+    </button>
+    <button class="btn btn-outlined">Outlined</button>
+    <button class="btn alert-primary alert-text">Primary</button>
+    <button class="btn alert-secondary alert-text">Secondary</button>
+    <button class="btn alert-success alert-text">Success</button>
+    <button class="btn alert-danger alert-text">Danger</button>
+    <button class="btn alert-immediate-action alert-text">
+      immediate action
+    </button>
+    <button class="btn alert-success alert-text btn-lrg">Large</button>
+    <button class="btn btn-outlined btn-sml">Small</button>
+    <button class="btn alert-primary" disabled>Disabled</button>
+    <button class="btn btn-outlined">
+      <a href="#" class="btn-icon"><i class="fas fa-shopping-cart"></i></a>
+      Cart
+    </button>
+    <button class="btn btn-cta dynamic-text-color box-shadow-dense">
+      <a href="#" class="btn-icon"><i class="fas fa-shopping-cart"></i></a>Cart
+    </button>
+    <a class="btn-icon alert-text"><i class="fas fa-shopping-cart"></i></a>
+
+    <span class="link hover-cta-color"> <a href="#">Link text</a></span>
+
+    <button class="btn floating-btn-icon">
+      <a href="#" class="blip-animation"><i class="fas fa-plus"></i></a>
+    </button>
+  </body>
+
+  <script src="./source/main.js"></script>
+</html>
diff --git a/Prefix/Components/Alert-Button/source/alert.css b/Prefix/Components/Alert-Button/source/alert.css
@@ -0,0 +1,103 @@
+@import url("../../../global.css");
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  background-color: var(--primary-background-color);
+}
+.alert {
+  border-radius: 0.4rem;
+  padding-top: 1rem;
+  padding-right: 2.5rem;
+  padding-bottom: 1rem;
+  padding-left: 1rem;
+  font-size: 1rem;
+  margin: 1rem 0;
+  position: relative;
+}
+
+.alert-primary {
+  background-color: var(--primary-alert-background-color);
+  color: var(--primary-alert-text-color);
+}
+.alert-secondary {
+  background-color: var(--secondary-alert-background-color);
+  color: var(--secondary-alert-text-color);
+}
+
+.alert-danger {
+  background-color: var(--danger-background-color);
+  color: var(--danger-text-color);
+}
+
+.alert-icon {
+  font-size: 10px;
+}
+
+.alert-success {
+  background-color: var(--alert-success-bg-color);
+  color: var(--alert-success-txt-color);
+}
+
+.alert-immediate-action {
+  background-color: var(--alert-immediate-action-bg-color);
+  color: var(--alert-immediate-action-txt-color);
+}
+
+.material-icons {
+  font-size: 2rem;
+  margin-right: 0.5rem;
+  margin-top: 0.4rem;
+}
+
+.remove-alert-btn {
+  position: absolute;
+  background-image: url("../assets/cancel_black_24dp.svg");
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+  background-color: transparent;
+  border: none;
+  width: 2rem;
+  height: 2rem;
+
+  cursor: pointer;
+
+  right: 2rem;
+  top: 12px;
+}
+
+.alert:hover {
+  filter: brightness(var(--hover-brightness));
+}
+
+.remove-alert-btn:hover {
+  animation: shake 0.1s 4 linear;
+  animation-direction: alternate;
+}
+
+.alert-link-text {
+  color: inherit;
+  font-weight: bolder;
+  text-decoration: underline;
+}
+
+@keyframes shake {
+  0%,
+  40% {
+    transform: translateX(2px);
+  }
+
+  60%,
+  100% {
+    transform: translateX(-2px);
+  }
+}
+
+.light-text-color {
+  color: var(--light-text-color);
+}
+
+.dark-text-color {
+  color: var(--dark-text-color);
+}
diff --git a/Prefix/Components/Alert-Button/source/button.css b/Prefix/Components/Alert-Button/source/button.css
@@ -0,0 +1,166 @@
+@import url("../../../global.css");
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+}
+
+.btn {
+  outline: none;
+
+  border: none;
+
+  padding-top: 0.5rem;
+  padding-left: 1rem;
+  padding-bottom: 0.5rem;
+  padding-right: 1rem;
+  cursor: pointer;
+
+  border-radius: 0.3rem;
+  position: relative;
+  text-align: center;
+  margin: 1.2em 0;
+  line-height: 1.4rem;
+  box-shadow: var(--universal-box-shadow);
+}
+.btn:hover {
+  filter: brightness(var(--hover-brightness));
+}
+.btn-wide {
+  width: 100%;
+}
+
+.btn-cta {
+  background-color: var(--cta-background-color);
+  color: var(--light-text-color);
+}
+
+.btn-cta-anim::after {
+  content: " --";
+
+  letter-spacing: -1px;
+
+  font-size: 1.4em;
+  font-weight: 700;
+  transition-property: "all";
+  transition-duration: 2s;
+
+  animation-name: blip;
+  animation-duration: 0.7s;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+.btn-cta-anim:hover:after {
+  content: "->";
+  animation: none;
+}
+
+/* Feat on progress
+.btn-cta:hover::after {
+  animation: none;
+  content: " ->";
+}
+*/
+
+.btn-outlined {
+  background-color: var(--light-text-color);
+  outline: 1px solid var(--dark-text-color);
+}
+
+.btn-outlined:hover {
+  background-color: var(--light-text-color);
+  color: var(--cta-background-color);
+  box-shadow: var(--outline-box-shadow);
+  outline-color: var(--cta-background-color);
+}
+
+.btn-lrg {
+  font-size: 1.3em;
+
+  line-height: 1.8em;
+  padding-left: 1.2em;
+  padding-right: 1.2em;
+}
+
+.btn-sml {
+  font-size: 0.8em;
+  line-height: 1em;
+  padding-left: 1em;
+  padding-right: 1em;
+}
+
+.btn-icon-outlined {
+  color: var(--alert-success-bg-color);
+}
+.btn-icon-outlined:hover {
+  color: var(--cta-background-color);
+}
+
+.btn-icon {
+  font-size: 1em;
+  margin-right: 0.25em;
+}
+
+.btn:disabled {
+  background-color: rgba(128, 128, 128, 0.514);
+  opacity: 0.5;
+  cursor: not-allowed;
+
+  color: var(--red-variant);
+}
+
+.hover-cta-color:hover:active {
+  color: var(--cta-background-color);
+}
+
+.link {
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.floating-btn-icon {
+  padding: 0;
+
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  background-color: var(--cta-background-color);
+
+  font-size: 1rem;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+
+  color: var(--light-text-color);
+  cursor: pointer;
+}
+
+.box-shadow-dense {
+  box-shadow: var(--box-shadow-dense);
+}
+
+.blip-animation {
+  animation-name: blip;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+.blip-animation:focus {
+  animation: none;
+}
+
+@keyframes blip {
+  0% {
+    opacity: 0.2;
+  }
+  40% {
+    opacity: 0.4;
+  }
+  80% {
+    opacity: 0.8;
+  }
+  100% {
+    opacity: 1;
+  }
+}