@timus-networks/theme 2.4.137 → 2.4.140

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@timus-networks/theme",
   "configKey": "themeOptions",
-  "version": "2.4.136",
+  "version": "2.4.139",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/module.mjs

@@ -11,7 +11,7 @@ const __filename = __cjs_url__.fileURLToPath(import.meta.url);
 const __dirname = __cjs_path__.dirname(__filename);
 const require = __cjs_mod__.createRequire(import.meta.url);
 const name = "@timus-networks/theme";
-const version = "2.4.136";
+const version = "2.4.139";
 const description = "A comprehensive Nuxt.js module providing a tailored theme experience with integrated TailwindCSS support for applications.";
 const type = "module";
 const exports = {

package/dist/runtime/assets/scss/main.css

@@ -1301,7 +1301,7 @@ body {
   --el-color-white: #ffffff;
   --el-color-black: #000000;
   --el-color-primary-rgb: 87, 55, 214;
-  --el-color-secondary-rgb: 119, 212, 183;
+  --el-color-secondary-rgb: 168, 166, 177;
   --el-color-neutral-rgb: 168, 166, 177;
   --el-color-success-rgb: 76, 183, 112;
   --el-color-warning-rgb: 232, 197, 82;
@@ -1556,23 +1556,24 @@ body {
   --el-alert-padding: 8px 16px;
   --el-alert-border-radius: var(--el-border-radius-small);
   --el-alert-border-color: var(--el-color-info-light-3);
-  --el-alert-title-font-size: 14px;
-  --el-alert-title-with-description-font-size: 14px;
-  --el-alert-description-font-size: 14px;
+  --el-alert-title-font-size: 12px;
+  --el-alert-title-with-description-font-size: 12px;
+  --el-alert-description-font-size: 10px;
   --el-alert-close-font-size: 14px;
   --el-alert-close-customed-font-size: 14px;
-  --el-alert-icon-size: 18px;
+  --el-alert-icon-size: 12px;
   --el-alert-icon-large-size: 32px;
+  position: relative;
   width: 100%;
-  padding: var(--el-alert-padding);
+  padding: 8px 16px;
   margin: 0;
   box-sizing: border-box;
-  border-radius: var(--el-alert-border-radius-small);
+  border-radius: var(--el-border-radius-small);
   border-width: var(--el-border-width);
   border-style: var(--el-border-style);
   border-color: var(--el-alert-border-color);
   position: relative;
-  background-color: var(--el-color-info-light-1);
+  background-color: var(--el-color-neutral-light-1);
   overflow: hidden;
   opacity: 1;
   display: flex;
@@ -1593,42 +1594,61 @@ body {
   justify-content: center;
 }
 
+.el-alert--primary {
+  --el-alert-bg-color: var(--el-color-primary-light-1);
+  --el-alert-border-color: var(--el-color-primary-light-3);
+}
+.el-alert--primary.is-light {
+  background-color: var(--el-alert-bg-color);
+  color: var(--el-color-primary-light-6);
+}
+.el-alert--primary.is-light .el-alert__description {
+  color: var(--el-color-primary-light-6);
+}
+.el-alert--primary.is-dark {
+  background-color: var(--el-color-primary);
+  color: var(--el-color-white);
+}
+.el-alert--primary.is-light .el-alert__close-btn {
+  color: var(--el-color-primary-light-6);
+}
+
 .el-alert--success {
   --el-alert-bg-color: var(--el-color-success-light-1);
   --el-alert-border-color: var(--el-color-success-light-3);
 }
 .el-alert--success.is-light {
   background-color: var(--el-alert-bg-color);
-  color: var(--el-color-success-light-5);
+  color: var(--el-color-success-light-6);
 }
 .el-alert--success.is-light .el-alert__description {
-  color: var(--el-color-success-light-4);
+  color: var(--el-color-success-light-6);
 }
 .el-alert--success.is-dark {
   background-color: var(--el-color-success);
   color: var(--el-color-white);
 }
 .el-alert--success.is-light .el-alert__close-btn {
-  color: var(--el-color-success-light-5);
+  color: var(--el-color-success-light-6);
 }
 
 .el-alert--info {
-  --el-alert-bg-color: var(--el-color-info-light-1);
-  --el-alert-border-color: var(--el-color-info-light-3);
+  --el-alert-bg-color: var(--el-color-neutral-light-1);
+  --el-alert-border-color: var(--el-color-neutral-light-3);
 }
 .el-alert--info.is-light {
   background-color: var(--el-alert-bg-color);
-  color: var(--el-color-info-light-5);
+  color: var(--el-color-neutral-light-6);
 }
 .el-alert--info.is-light .el-alert__description {
-  color: var(--el-color-info-light-4);
+  color: var(--el-color-neutral-light-6);
 }
 .el-alert--info.is-dark {
-  background-color: var(--el-color-info);
+  background-color: var(--el-color-neutral);
   color: var(--el-color-white);
 }
 .el-alert--info.is-light .el-alert__close-btn {
-  color: var(--el-color-info-light-5);
+  color: var(--el-color-neutral-light-6);
 }
 
 .el-alert--warning {
@@ -1637,17 +1657,17 @@ body {
 }
 .el-alert--warning.is-light {
   background-color: var(--el-alert-bg-color);
-  color: var(--el-color-warning-light-5);
+  color: var(--el-color-warning-light-6);
 }
 .el-alert--warning.is-light .el-alert__description {
-  color: var(--el-color-warning-light-4);
+  color: var(--el-color-warning-light-6);
 }
 .el-alert--warning.is-dark {
   background-color: var(--el-color-warning);
   color: var(--el-color-white);
 }
 .el-alert--warning.is-light .el-alert__close-btn {
-  color: var(--el-color-warning-light-5);
+  color: var(--el-color-warning-light-6);
 }
 
 .el-alert--error {
@@ -1656,63 +1676,41 @@ body {
 }
 .el-alert--error.is-light {
   background-color: var(--el-alert-bg-color);
-  color: var(--el-color-error-light-5);
+  color: var(--el-color-error-light-6);
 }
 .el-alert--error.is-light .el-alert__description {
-  color: var(--el-color-error-light-4);
+  color: var(--el-color-error-light-6);
 }
 .el-alert--error.is-dark {
   background-color: var(--el-color-error);
   color: var(--el-color-white);
 }
 .el-alert--error.is-light .el-alert__close-btn {
-  color: var(--el-color-error-light-5);
-}
-
-.el-alert--danger {
-  --el-alert-bg-color: var(--el-color-danger-light-1);
-  --el-alert-border-color: var(--el-color-danger-light-3);
-}
-.el-alert--danger.is-light {
-  background-color: var(--el-alert-bg-color);
-  color: var(--el-color-danger-light-5);
-}
-.el-alert--danger.is-light .el-alert__description {
-  color: var(--el-color-danger-light-4);
-}
-.el-alert--danger.is-dark {
-  background-color: var(--el-color-danger);
-  color: var(--el-color-white);
-}
-.el-alert--danger.is-light .el-alert__close-btn {
-  color: var(--el-color-danger-light-5);
+  color: var(--el-color-error-light-6);
 }
 
 .el-alert::before {
-  font-family: "iconsax" !important;
+  font-family: "Material Symbols Outlined" !important;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-style: normal;
   font-variant: normal;
   font-weight: 600;
-  line-height: 1;
   speak: never;
   text-transform: none;
   font-size: var(--el-alert-icon-size);
-  line-height: 24px;
-  margin-right: 8px;
-}
-.el-alert.el-alert--success::before {
-  content: "\ec2a";
-}
-.el-alert.el-alert--info::before {
-  content: "\eb4d";
-}
-.el-alert.el-alert--warning::before {
-  content: "\e9f6";
+  line-height: 1;
+  margin-right: 5px;
+  content: "info";
+  position: absolute;
+  font-weight: 500;
+  width: 12px;
+  height: 12px;
+  font-size: 12px;
+  top: 14px;
 }
-.el-alert.el-alert--danger::before, .el-alert.el-alert--error::before {
-  content: "\e9c8";
+.el-alert .el-alert__title {
+  padding-left: 17px;
 }
 .el-alert .el-alert__icon {
   display: none;
@@ -1741,6 +1739,8 @@ body {
 }
 .el-alert__title.with-description {
   font-size: var(--el-alert-title-with-description-font-size);
+  line-height: 14px;
+  margin-top: 5px;
 }
 
 .el-alert .el-alert__description {
@@ -10902,6 +10902,7 @@ heights > $common-component-size
   border-color: var(--el-color-primary-light-4);
 }
 .el-link__inner {
+  display: inline-flex;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -11579,6 +11580,10 @@ heights > $common-component-size
 .el-message-box__status {
   font-size: 24px;
 }
+.el-message-box__status.el-message-box-icon--primary {
+  --el-messagebox-color: var(--el-color-primary);
+  color: var(--el-messagebox-color);
+}
 .el-message-box__status.el-message-box-icon--success {
   --el-messagebox-color: var(--el-color-success);
   color: var(--el-messagebox-color);
@@ -11595,10 +11600,6 @@ heights > $common-component-size
   --el-messagebox-color: var(--el-color-error);
   color: var(--el-messagebox-color);
 }
-.el-message-box__status.el-message-box-icon--danger {
-  --el-messagebox-color: var(--el-color-danger);
-  color: var(--el-messagebox-color);
-}
 
 .el-message-box__message {
   margin: 0;
@@ -11625,16 +11626,37 @@ heights > $common-component-size
   flex-basis: 100%;
 }
 .el-message-box__btns .el-button:first-of-type {
-  --el-button-text-color: var(--el-color-primary);
-  --el-button-disabled-text-color: var(--el-color-primary-light-9);
+  --el-button-text-color: var(--el-color-secondary-light-9);
+  --el-button-bg-color: var(--el-color-secondary-light-1);
+  --el-button-border-color: var(--el-color-secondary-light-2);
+  --el-button-outline-color: var(--el-color-secondary-light-5);
+  --el-button-active-color: var(--el-color-secondary-dark-2);
+  --el-button-hover-text-color: var(--el-color-secondary-light-9);
+  --el-button-hover-link-text-color: var(--el-color-secondary-light-5);
+  --el-button-hover-bg-color: var(--el-color-white);
+  --el-button-hover-border-color: var(--el-color-secondary-light-3);
+  --el-button-active-bg-color: var(--el-color-secondary-light-2);
+  --el-button-active-border-color: var(--el-color-secondary-light-2);
+  --el-button-disabled-text-color: var(--el-color-white);
+  --el-button-disabled-bg-color: var(--el-color-secondary-light-1);
+  --el-button-disabled-border-color: var(--el-color-secondary-light-1);
+}
+.el-message-box__btns .el-button:first-of-type.is-plain, .el-message-box__btns .el-button:first-of-type.is-text, .el-message-box__btns .el-button:first-of-type.is-link {
+  --el-button-text-color: var(--el-color-secondary);
+  --el-button-disabled-text-color: var(--el-color-secondary-light-9);
   --el-button-bg-color: var(--el-color-white);
-  --el-button-border-color: var(--el-color-primary-light-5);
-  --el-button-hover-text-color: var(--el-color-primary-light-4);
+  --el-button-border-color: var(--el-color-secondary-light-5);
+  --el-button-hover-text-color: var(--el-color-secondary-light-4);
   --el-button-hover-bg-color: var(--el-color-white);
-  --el-button-hover-border-color: var(--el-color-primary-light-4);
-  --el-button-active-text-color: var(--el-color-primary-light-6);
+  --el-button-hover-border-color: var(--el-color-secondary-light-4);
+  --el-button-active-text-color: var(--el-color-secondary-light-6);
   --el-button-active-bg-color: var(--el-color-white);
-  --el-button-active-border-color: var(--el-color-primary-light-6);
+  --el-button-active-border-color: var(--el-color-secondary-light-6);
+}
+.el-message-box__btns .el-button:first-of-type.is-plain.is-disabled, .el-message-box__btns .el-button:first-of-type.is-plain.is-disabled:hover, .el-message-box__btns .el-button:first-of-type.is-plain.is-disabled:focus, .el-message-box__btns .el-button:first-of-type.is-plain.is-disabled:active, .el-message-box__btns .el-button:first-of-type.is-text.is-disabled, .el-message-box__btns .el-button:first-of-type.is-text.is-disabled:hover, .el-message-box__btns .el-button:first-of-type.is-text.is-disabled:focus, .el-message-box__btns .el-button:first-of-type.is-text.is-disabled:active, .el-message-box__btns .el-button:first-of-type.is-link.is-disabled, .el-message-box__btns .el-button:first-of-type.is-link.is-disabled:hover, .el-message-box__btns .el-button:first-of-type.is-link.is-disabled:focus, .el-message-box__btns .el-button:first-of-type.is-link.is-disabled:active {
+  color: var(--el-color-secondary-light-2);
+  background-color: transparent;
+  border-color: var(--el-color-secondary-light-2);
 }
 
 .el-message-box--center .el-message-box__title {
@@ -11734,6 +11756,30 @@ heights > $common-component-size
 .el-message .el-message__closeBtn:hover {
   color: var(--el-color-info-light-6);
 }
+.el-message--primary {
+  --el-message-bg-color: var(--el-color-primary-light-1);
+  --el-message-border-color: var(--el-color-primary-light-3);
+  --el-message-text-color: var(--el-color-primary);
+}
+.el-message--primary .el-message__content {
+  color: var(--el-message-text-color);
+  overflow-wrap: break-word;
+}
+.el-message--primary .el-message__closeBtn {
+  color: var(--el-color-primary);
+}
+.el-message--primary .el-message__closeBtn:hover {
+  color: var(--el-color-primary-light-4);
+}
+.el-message--primary .el-message__closeBtn:active {
+  color: var(--el-color-primary-light-6);
+}
+
+.el-message .el-message-icon--primary {
+  color: var(--el-message-text-color);
+  width: 12px;
+  height: 12px;
+}
 .el-message--success {
   --el-message-bg-color: var(--el-color-success-light-1);
   --el-message-border-color: var(--el-color-success-light-3);
@@ -11830,30 +11876,6 @@ heights > $common-component-size
   width: 12px;
   height: 12px;
 }
-.el-message--danger {
-  --el-message-bg-color: var(--el-color-danger-light-1);
-  --el-message-border-color: var(--el-color-danger-light-3);
-  --el-message-text-color: var(--el-color-danger);
-}
-.el-message--danger .el-message__content {
-  color: var(--el-message-text-color);
-  overflow-wrap: break-word;
-}
-.el-message--danger .el-message__closeBtn {
-  color: var(--el-color-danger);
-}
-.el-message--danger .el-message__closeBtn:hover {
-  color: var(--el-color-danger-light-4);
-}
-.el-message--danger .el-message__closeBtn:active {
-  color: var(--el-color-danger-light-6);
-}
-
-.el-message .el-message-icon--danger {
-  color: var(--el-message-text-color);
-  width: 12px;
-  height: 12px;
-}
 .el-message .el-message__badge {
   position: absolute;
   top: -8px;
@@ -11980,6 +12002,10 @@ heights > $common-component-size
 .el-notification .el-notification__closeBtn:hover {
   color: var(--el-notification-close-hover-color);
 }
+.el-notification .el-notification--primary {
+  --el-notification-icon-color: var(--el-color-primary);
+  color: var(--el-notification-icon-color);
+}
 .el-notification .el-notification--success {
   --el-notification-icon-color: var(--el-color-success);
   color: var(--el-notification-icon-color);
@@ -11996,10 +12022,6 @@ heights > $common-component-size
   --el-notification-icon-color: var(--el-color-error);
   color: var(--el-notification-icon-color);
 }
-.el-notification .el-notification--danger {
-  --el-notification-icon-color: var(--el-color-danger);
-  color: var(--el-notification-icon-color);
-}
 
 .el-notification-fade-enter-from.right {
   right: 0;
@@ -12437,11 +12459,23 @@ heights > $common-component-size
 .popover-footer {
   display: flex;
   padding-top: 16px;
-  gap: 30px;
+  gap: 28px;
 }
 .popover-footer .el-button {
   flex-basis: 100%;
   @apply el-button--mini;
+  /*
+      &:first-of-type {
+    --el-button-hover-text-color: var(--el-color-primary-light-4);
+    --el-button-hover-bg-color: var(--el-color-white);
+    --el-button-hover-border-color: var(--el-color-primary-light-4);
+    --el-button-active-text-color: var(--el-color-primary-light-6);
+    --el-button-active-bg-color: var(--el-color-white);
+    --el-button-active-border-color: var(--el-color-primary-light-6);
+    --el-button-bg-color: var(--el-color-white);
+    --el-button-text-color: var(--el-color-primary);
+  }
+  */
 }
 .popover-footer .el-button:first-of-type {
   --el-button-text-color: var(--el-color-secondary-light-9);

package/dist/runtime/components/development/example.alert.vue

@@ -13,6 +13,21 @@
         <div class="flex gap-4 items-start flex-col">
           <el-alert :title="`default`" />
           <el-alert v-for="color of colors" :key="color" :title="`${color} alert`" :type="color" show-icon />
+        </div>
+      </div>
+      <template #footer> <html-encode :tag="snippets.basic" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header> With Description </template>
+      <div class="flex flex-col gap-7.5">
+        <p>
+          Alert components are non-overlay elements in the page that does not disappear automatically. Alert provides 4 types of themes defined by
+          <el-text tag="mark">type</el-text>, whose default value is <el-text tag="mark">info</el-text>. And you can add a description to the alert width
+          <el-text tag="mark">description</el-text> attribute. Also you can use <el-text tag="mark">#default</el-text> slot to add a description to the alert.
+        </p>
+        <div class="flex gap-4 items-start flex-col">
+          <el-alert :title="`default`" description="This is a description." />
           <el-alert v-for="color of colors" :key="color" :title="`${color} alert`" :type="color" description="This is a description." show-icon />
         </div>
       </div>
@@ -24,7 +39,7 @@
 <script lang="ts" setup>
   import { ref } from 'vue';
 
-  const colors = ref(['success', 'warning', 'info', 'error', 'danger']);
+  const colors = ref(['primary', 'success', 'warning', 'info', 'error']);
 
   const snippets = ref({
     basic: `<el-alert title="Title Text Goes Here" type="danger" description="This is a description." show-icon :closable="false" />`,

package/dist/runtime/public/scss/element-plus/alert.css

@@ -304,23 +304,24 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
   --el-alert-padding: 8px 16px;
   --el-alert-border-radius: var(--el-border-radius-small);
   --el-alert-border-color: var(--el-color-info-light-3);
-  --el-alert-title-font-size: 14px;
-  --el-alert-title-with-description-font-size: 14px;
-  --el-alert-description-font-size: 14px;
+  --el-alert-title-font-size: 12px;
+  --el-alert-title-with-description-font-size: 12px;
+  --el-alert-description-font-size: 10px;
   --el-alert-close-font-size: 14px;
   --el-alert-close-customed-font-size: 14px;
-  --el-alert-icon-size: 18px;
+  --el-alert-icon-size: 12px;
   --el-alert-icon-large-size: 32px;
+  position: relative;
   width: 100%;
-  padding: var(--el-alert-padding);
+  padding: 8px 16px;
   margin: 0;
   box-sizing: border-box;
-  border-radius: var(--el-alert-border-radius-small);
+  border-radius: var(--el-border-radius-small);
   border-width: var(--el-border-width);
   border-style: var(--el-border-style);
   border-color: var(--el-alert-border-color);
   position: relative;
-  background-color: var(--el-color-info-light-1);
+  background-color: var(--el-color-neutral-light-1);
   overflow: hidden;
   opacity: 1;
   display: flex;
@@ -341,42 +342,61 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
   justify-content: center;
 }
 
+.el-alert--primary {
+  --el-alert-bg-color: var(--el-color-primary-light-1);
+  --el-alert-border-color: var(--el-color-primary-light-3);
+}
+.el-alert--primary.is-light {
+  background-color: var(--el-alert-bg-color);
+  color: var(--el-color-primary-light-6);
+}
+.el-alert--primary.is-light .el-alert__description {
+  color: var(--el-color-primary-light-6);
+}
+.el-alert--primary.is-dark {
+  background-color: var(--el-color-primary);
+  color: var(--el-color-white);
+}
+.el-alert--primary.is-light .el-alert__close-btn {
+  color: var(--el-color-primary-light-6);
+}
+
 .el-alert--success {
   --el-alert-bg-color: var(--el-color-success-light-1);
   --el-alert-border-color: var(--el-color-success-light-3);
 }
 .el-alert--success.is-light {
   background-color: var(--el-alert-bg-color);
-  color: var(--el-color-success-light-5);
+  color: var(--el-color-success-light-6);
 }
 .el-alert--success.is-light .el-alert__description {
-  color: var(--el-color-success-light-4);
+  color: var(--el-color-success-light-6);
 }
 .el-alert--success.is-dark {
   background-color: var(--el-color-success);
   color: var(--el-color-white);
 }
 .el-alert--success.is-light .el-alert__close-btn {
-  color: var(--el-color-success-light-5);
+  color: var(--el-color-success-light-6);
 }
 
 .el-alert--info {
-  --el-alert-bg-color: var(--el-color-info-light-1);
-  --el-alert-border-color: var(--el-color-info-light-3);
+  --el-alert-bg-color: var(--el-color-neutral-light-1);
+  --el-alert-border-color: var(--el-color-neutral-light-3);
 }
 .el-alert--info.is-light {
   background-color: var(--el-alert-bg-color);
-  color: var(--el-color-info-light-5);
+  color: var(--el-color-neutral-light-6);
 }
 .el-alert--info.is-light .el-alert__description {
-  color: var(--el-color-info-light-4);
+  color: var(--el-color-neutral-light-6);
 }
 .el-alert--info.is-dark {
-  background-color: var(--el-color-info);
+  background-color: var(--el-color-neutral);
   color: var(--el-color-white);
 }
 .el-alert--info.is-light .el-alert__close-btn {
-  color: var(--el-color-info-light-5);
+  color: var(--el-color-neutral-light-6);
 }
 
 .el-alert--warning {
@@ -385,17 +405,17 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
 }
 .el-alert--warning.is-light {
   background-color: var(--el-alert-bg-color);
-  color: var(--el-color-warning-light-5);
+  color: var(--el-color-warning-light-6);
 }
 .el-alert--warning.is-light .el-alert__description {
-  color: var(--el-color-warning-light-4);
+  color: var(--el-color-warning-light-6);
 }
 .el-alert--warning.is-dark {
   background-color: var(--el-color-warning);
   color: var(--el-color-white);
 }
 .el-alert--warning.is-light .el-alert__close-btn {
-  color: var(--el-color-warning-light-5);
+  color: var(--el-color-warning-light-6);
 }
 
 .el-alert--error {
@@ -404,63 +424,41 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
 }
 .el-alert--error.is-light {
   background-color: var(--el-alert-bg-color);
-  color: var(--el-color-error-light-5);
+  color: var(--el-color-error-light-6);
 }
 .el-alert--error.is-light .el-alert__description {
-  color: var(--el-color-error-light-4);
+  color: var(--el-color-error-light-6);
 }
 .el-alert--error.is-dark {
   background-color: var(--el-color-error);
   color: var(--el-color-white);
 }
 .el-alert--error.is-light .el-alert__close-btn {
-  color: var(--el-color-error-light-5);
-}
-
-.el-alert--danger {
-  --el-alert-bg-color: var(--el-color-danger-light-1);
-  --el-alert-border-color: var(--el-color-danger-light-3);
-}
-.el-alert--danger.is-light {
-  background-color: var(--el-alert-bg-color);
-  color: var(--el-color-danger-light-5);
-}
-.el-alert--danger.is-light .el-alert__description {
-  color: var(--el-color-danger-light-4);
-}
-.el-alert--danger.is-dark {
-  background-color: var(--el-color-danger);
-  color: var(--el-color-white);
-}
-.el-alert--danger.is-light .el-alert__close-btn {
-  color: var(--el-color-danger-light-5);
+  color: var(--el-color-error-light-6);
 }
 
 .el-alert::before {
-  font-family: "iconsax" !important;
+  font-family: "Material Symbols Outlined" !important;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-style: normal;
   font-variant: normal;
   font-weight: 600;
-  line-height: 1;
   speak: never;
   text-transform: none;
   font-size: var(--el-alert-icon-size);
-  line-height: 24px;
-  margin-right: 8px;
-}
-.el-alert.el-alert--success::before {
-  content: "\ec2a";
-}
-.el-alert.el-alert--info::before {
-  content: "\eb4d";
-}
-.el-alert.el-alert--warning::before {
-  content: "\e9f6";
+  line-height: 1;
+  margin-right: 5px;
+  content: "info";
+  position: absolute;
+  font-weight: 500;
+  width: 12px;
+  height: 12px;
+  font-size: 12px;
+  top: 14px;
 }
-.el-alert.el-alert--danger::before, .el-alert.el-alert--error::before {
-  content: "\e9c8";
+.el-alert .el-alert__title {
+  padding-left: 17px;
 }
 .el-alert .el-alert__icon {
   display: none;
@@ -489,6 +487,8 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
 }
 .el-alert__title.with-description {
   font-size: var(--el-alert-title-with-description-font-size);
+  line-height: 14px;
+  margin-top: 5px;
 }
 
 .el-alert .el-alert__description {