@timus-networks/theme 2.4.138 → 2.4.140
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/module.json +1 -1
- package/dist/module.mjs +1 -1
- package/dist/runtime/assets/scss/main.css +70 -70
- package/dist/runtime/components/development/example.alert.vue +16 -1
- package/dist/runtime/public/scss/element-plus/alert.css +37 -37
- package/dist/runtime/public/scss/element-plus/alert.scss +8 -8
- package/dist/runtime/public/scss/element-plus/base.css +1 -1
- package/dist/runtime/public/scss/element-plus/common/var.scss +3 -3
- package/dist/runtime/public/scss/element-plus/index.css +70 -70
- package/dist/runtime/public/scss/element-plus/message-box.css +4 -4
- package/dist/runtime/public/scss/element-plus/message.css +24 -24
- package/dist/runtime/public/scss/element-plus/notification.css +4 -4
- package/dist/runtime/public/scss/element-plus/var.css +1 -1
- package/package.json +1 -1
package/dist/module.json
CHANGED
package/dist/module.mjs
CHANGED
|
@@ -11,7 +11,7 @@ const __filename = __cjs_url__.fileURLToPath(import.meta.url);
|
|
|
11
11
|
const __dirname = __cjs_path__.dirname(__filename);
|
|
12
12
|
const require = __cjs_mod__.createRequire(import.meta.url);
|
|
13
13
|
const name = "@timus-networks/theme";
|
|
14
|
-
const version = "2.4.
|
|
14
|
+
const version = "2.4.139";
|
|
15
15
|
const description = "A comprehensive Nuxt.js module providing a tailored theme experience with integrated TailwindCSS support for applications.";
|
|
16
16
|
const type = "module";
|
|
17
17
|
const exports = {
|
|
@@ -1301,7 +1301,7 @@ body {
|
|
|
1301
1301
|
--el-color-white: #ffffff;
|
|
1302
1302
|
--el-color-black: #000000;
|
|
1303
1303
|
--el-color-primary-rgb: 87, 55, 214;
|
|
1304
|
-
--el-color-secondary-rgb:
|
|
1304
|
+
--el-color-secondary-rgb: 168, 166, 177;
|
|
1305
1305
|
--el-color-neutral-rgb: 168, 166, 177;
|
|
1306
1306
|
--el-color-success-rgb: 76, 183, 112;
|
|
1307
1307
|
--el-color-warning-rgb: 232, 197, 82;
|
|
@@ -1561,11 +1561,11 @@ body {
|
|
|
1561
1561
|
--el-alert-description-font-size: 10px;
|
|
1562
1562
|
--el-alert-close-font-size: 14px;
|
|
1563
1563
|
--el-alert-close-customed-font-size: 14px;
|
|
1564
|
-
--el-alert-icon-size:
|
|
1564
|
+
--el-alert-icon-size: 12px;
|
|
1565
1565
|
--el-alert-icon-large-size: 32px;
|
|
1566
1566
|
position: relative;
|
|
1567
1567
|
width: 100%;
|
|
1568
|
-
padding:
|
|
1568
|
+
padding: 8px 16px;
|
|
1569
1569
|
margin: 0;
|
|
1570
1570
|
box-sizing: border-box;
|
|
1571
1571
|
border-radius: var(--el-border-radius-small);
|
|
@@ -1573,7 +1573,7 @@ body {
|
|
|
1573
1573
|
border-style: var(--el-border-style);
|
|
1574
1574
|
border-color: var(--el-alert-border-color);
|
|
1575
1575
|
position: relative;
|
|
1576
|
-
background-color: var(--el-color-
|
|
1576
|
+
background-color: var(--el-color-neutral-light-1);
|
|
1577
1577
|
overflow: hidden;
|
|
1578
1578
|
opacity: 1;
|
|
1579
1579
|
display: flex;
|
|
@@ -1594,42 +1594,61 @@ body {
|
|
|
1594
1594
|
justify-content: center;
|
|
1595
1595
|
}
|
|
1596
1596
|
|
|
1597
|
+
.el-alert--primary {
|
|
1598
|
+
--el-alert-bg-color: var(--el-color-primary-light-1);
|
|
1599
|
+
--el-alert-border-color: var(--el-color-primary-light-3);
|
|
1600
|
+
}
|
|
1601
|
+
.el-alert--primary.is-light {
|
|
1602
|
+
background-color: var(--el-alert-bg-color);
|
|
1603
|
+
color: var(--el-color-primary-light-6);
|
|
1604
|
+
}
|
|
1605
|
+
.el-alert--primary.is-light .el-alert__description {
|
|
1606
|
+
color: var(--el-color-primary-light-6);
|
|
1607
|
+
}
|
|
1608
|
+
.el-alert--primary.is-dark {
|
|
1609
|
+
background-color: var(--el-color-primary);
|
|
1610
|
+
color: var(--el-color-white);
|
|
1611
|
+
}
|
|
1612
|
+
.el-alert--primary.is-light .el-alert__close-btn {
|
|
1613
|
+
color: var(--el-color-primary-light-6);
|
|
1614
|
+
}
|
|
1615
|
+
|
|
1597
1616
|
.el-alert--success {
|
|
1598
1617
|
--el-alert-bg-color: var(--el-color-success-light-1);
|
|
1599
1618
|
--el-alert-border-color: var(--el-color-success-light-3);
|
|
1600
1619
|
}
|
|
1601
1620
|
.el-alert--success.is-light {
|
|
1602
1621
|
background-color: var(--el-alert-bg-color);
|
|
1603
|
-
color: var(--el-color-success-light-
|
|
1622
|
+
color: var(--el-color-success-light-6);
|
|
1604
1623
|
}
|
|
1605
1624
|
.el-alert--success.is-light .el-alert__description {
|
|
1606
|
-
color: var(--el-color-success-light-
|
|
1625
|
+
color: var(--el-color-success-light-6);
|
|
1607
1626
|
}
|
|
1608
1627
|
.el-alert--success.is-dark {
|
|
1609
1628
|
background-color: var(--el-color-success);
|
|
1610
1629
|
color: var(--el-color-white);
|
|
1611
1630
|
}
|
|
1612
1631
|
.el-alert--success.is-light .el-alert__close-btn {
|
|
1613
|
-
color: var(--el-color-success-light-
|
|
1632
|
+
color: var(--el-color-success-light-6);
|
|
1614
1633
|
}
|
|
1615
1634
|
|
|
1616
1635
|
.el-alert--info {
|
|
1617
|
-
--el-alert-bg-color: var(--el-color-
|
|
1618
|
-
--el-alert-border-color: var(--el-color-
|
|
1636
|
+
--el-alert-bg-color: var(--el-color-neutral-light-1);
|
|
1637
|
+
--el-alert-border-color: var(--el-color-neutral-light-3);
|
|
1619
1638
|
}
|
|
1620
1639
|
.el-alert--info.is-light {
|
|
1621
1640
|
background-color: var(--el-alert-bg-color);
|
|
1622
|
-
color: var(--el-color-
|
|
1641
|
+
color: var(--el-color-neutral-light-6);
|
|
1623
1642
|
}
|
|
1624
1643
|
.el-alert--info.is-light .el-alert__description {
|
|
1625
|
-
color: var(--el-color-
|
|
1644
|
+
color: var(--el-color-neutral-light-6);
|
|
1626
1645
|
}
|
|
1627
1646
|
.el-alert--info.is-dark {
|
|
1628
|
-
background-color: var(--el-color-
|
|
1647
|
+
background-color: var(--el-color-neutral);
|
|
1629
1648
|
color: var(--el-color-white);
|
|
1630
1649
|
}
|
|
1631
1650
|
.el-alert--info.is-light .el-alert__close-btn {
|
|
1632
|
-
color: var(--el-color-
|
|
1651
|
+
color: var(--el-color-neutral-light-6);
|
|
1633
1652
|
}
|
|
1634
1653
|
|
|
1635
1654
|
.el-alert--warning {
|
|
@@ -1638,17 +1657,17 @@ body {
|
|
|
1638
1657
|
}
|
|
1639
1658
|
.el-alert--warning.is-light {
|
|
1640
1659
|
background-color: var(--el-alert-bg-color);
|
|
1641
|
-
color: var(--el-color-warning-light-
|
|
1660
|
+
color: var(--el-color-warning-light-6);
|
|
1642
1661
|
}
|
|
1643
1662
|
.el-alert--warning.is-light .el-alert__description {
|
|
1644
|
-
color: var(--el-color-warning-light-
|
|
1663
|
+
color: var(--el-color-warning-light-6);
|
|
1645
1664
|
}
|
|
1646
1665
|
.el-alert--warning.is-dark {
|
|
1647
1666
|
background-color: var(--el-color-warning);
|
|
1648
1667
|
color: var(--el-color-white);
|
|
1649
1668
|
}
|
|
1650
1669
|
.el-alert--warning.is-light .el-alert__close-btn {
|
|
1651
|
-
color: var(--el-color-warning-light-
|
|
1670
|
+
color: var(--el-color-warning-light-6);
|
|
1652
1671
|
}
|
|
1653
1672
|
|
|
1654
1673
|
.el-alert--error {
|
|
@@ -1657,36 +1676,17 @@ body {
|
|
|
1657
1676
|
}
|
|
1658
1677
|
.el-alert--error.is-light {
|
|
1659
1678
|
background-color: var(--el-alert-bg-color);
|
|
1660
|
-
color: var(--el-color-error-light-
|
|
1679
|
+
color: var(--el-color-error-light-6);
|
|
1661
1680
|
}
|
|
1662
1681
|
.el-alert--error.is-light .el-alert__description {
|
|
1663
|
-
color: var(--el-color-error-light-
|
|
1682
|
+
color: var(--el-color-error-light-6);
|
|
1664
1683
|
}
|
|
1665
1684
|
.el-alert--error.is-dark {
|
|
1666
1685
|
background-color: var(--el-color-error);
|
|
1667
1686
|
color: var(--el-color-white);
|
|
1668
1687
|
}
|
|
1669
1688
|
.el-alert--error.is-light .el-alert__close-btn {
|
|
1670
|
-
color: var(--el-color-error-light-
|
|
1671
|
-
}
|
|
1672
|
-
|
|
1673
|
-
.el-alert--danger {
|
|
1674
|
-
--el-alert-bg-color: var(--el-color-danger-light-1);
|
|
1675
|
-
--el-alert-border-color: var(--el-color-danger-light-3);
|
|
1676
|
-
}
|
|
1677
|
-
.el-alert--danger.is-light {
|
|
1678
|
-
background-color: var(--el-alert-bg-color);
|
|
1679
|
-
color: var(--el-color-danger-light-5);
|
|
1680
|
-
}
|
|
1681
|
-
.el-alert--danger.is-light .el-alert__description {
|
|
1682
|
-
color: var(--el-color-danger-light-4);
|
|
1683
|
-
}
|
|
1684
|
-
.el-alert--danger.is-dark {
|
|
1685
|
-
background-color: var(--el-color-danger);
|
|
1686
|
-
color: var(--el-color-white);
|
|
1687
|
-
}
|
|
1688
|
-
.el-alert--danger.is-light .el-alert__close-btn {
|
|
1689
|
-
color: var(--el-color-danger-light-5);
|
|
1689
|
+
color: var(--el-color-error-light-6);
|
|
1690
1690
|
}
|
|
1691
1691
|
|
|
1692
1692
|
.el-alert::before {
|
|
@@ -11580,6 +11580,10 @@ heights > $common-component-size
|
|
|
11580
11580
|
.el-message-box__status {
|
|
11581
11581
|
font-size: 24px;
|
|
11582
11582
|
}
|
|
11583
|
+
.el-message-box__status.el-message-box-icon--primary {
|
|
11584
|
+
--el-messagebox-color: var(--el-color-primary);
|
|
11585
|
+
color: var(--el-messagebox-color);
|
|
11586
|
+
}
|
|
11583
11587
|
.el-message-box__status.el-message-box-icon--success {
|
|
11584
11588
|
--el-messagebox-color: var(--el-color-success);
|
|
11585
11589
|
color: var(--el-messagebox-color);
|
|
@@ -11596,10 +11600,6 @@ heights > $common-component-size
|
|
|
11596
11600
|
--el-messagebox-color: var(--el-color-error);
|
|
11597
11601
|
color: var(--el-messagebox-color);
|
|
11598
11602
|
}
|
|
11599
|
-
.el-message-box__status.el-message-box-icon--danger {
|
|
11600
|
-
--el-messagebox-color: var(--el-color-danger);
|
|
11601
|
-
color: var(--el-messagebox-color);
|
|
11602
|
-
}
|
|
11603
11603
|
|
|
11604
11604
|
.el-message-box__message {
|
|
11605
11605
|
margin: 0;
|
|
@@ -11756,6 +11756,30 @@ heights > $common-component-size
|
|
|
11756
11756
|
.el-message .el-message__closeBtn:hover {
|
|
11757
11757
|
color: var(--el-color-info-light-6);
|
|
11758
11758
|
}
|
|
11759
|
+
.el-message--primary {
|
|
11760
|
+
--el-message-bg-color: var(--el-color-primary-light-1);
|
|
11761
|
+
--el-message-border-color: var(--el-color-primary-light-3);
|
|
11762
|
+
--el-message-text-color: var(--el-color-primary);
|
|
11763
|
+
}
|
|
11764
|
+
.el-message--primary .el-message__content {
|
|
11765
|
+
color: var(--el-message-text-color);
|
|
11766
|
+
overflow-wrap: break-word;
|
|
11767
|
+
}
|
|
11768
|
+
.el-message--primary .el-message__closeBtn {
|
|
11769
|
+
color: var(--el-color-primary);
|
|
11770
|
+
}
|
|
11771
|
+
.el-message--primary .el-message__closeBtn:hover {
|
|
11772
|
+
color: var(--el-color-primary-light-4);
|
|
11773
|
+
}
|
|
11774
|
+
.el-message--primary .el-message__closeBtn:active {
|
|
11775
|
+
color: var(--el-color-primary-light-6);
|
|
11776
|
+
}
|
|
11777
|
+
|
|
11778
|
+
.el-message .el-message-icon--primary {
|
|
11779
|
+
color: var(--el-message-text-color);
|
|
11780
|
+
width: 12px;
|
|
11781
|
+
height: 12px;
|
|
11782
|
+
}
|
|
11759
11783
|
.el-message--success {
|
|
11760
11784
|
--el-message-bg-color: var(--el-color-success-light-1);
|
|
11761
11785
|
--el-message-border-color: var(--el-color-success-light-3);
|
|
@@ -11852,30 +11876,6 @@ heights > $common-component-size
|
|
|
11852
11876
|
width: 12px;
|
|
11853
11877
|
height: 12px;
|
|
11854
11878
|
}
|
|
11855
|
-
.el-message--danger {
|
|
11856
|
-
--el-message-bg-color: var(--el-color-danger-light-1);
|
|
11857
|
-
--el-message-border-color: var(--el-color-danger-light-3);
|
|
11858
|
-
--el-message-text-color: var(--el-color-danger);
|
|
11859
|
-
}
|
|
11860
|
-
.el-message--danger .el-message__content {
|
|
11861
|
-
color: var(--el-message-text-color);
|
|
11862
|
-
overflow-wrap: break-word;
|
|
11863
|
-
}
|
|
11864
|
-
.el-message--danger .el-message__closeBtn {
|
|
11865
|
-
color: var(--el-color-danger);
|
|
11866
|
-
}
|
|
11867
|
-
.el-message--danger .el-message__closeBtn:hover {
|
|
11868
|
-
color: var(--el-color-danger-light-4);
|
|
11869
|
-
}
|
|
11870
|
-
.el-message--danger .el-message__closeBtn:active {
|
|
11871
|
-
color: var(--el-color-danger-light-6);
|
|
11872
|
-
}
|
|
11873
|
-
|
|
11874
|
-
.el-message .el-message-icon--danger {
|
|
11875
|
-
color: var(--el-message-text-color);
|
|
11876
|
-
width: 12px;
|
|
11877
|
-
height: 12px;
|
|
11878
|
-
}
|
|
11879
11879
|
.el-message .el-message__badge {
|
|
11880
11880
|
position: absolute;
|
|
11881
11881
|
top: -8px;
|
|
@@ -12002,6 +12002,10 @@ heights > $common-component-size
|
|
|
12002
12002
|
.el-notification .el-notification__closeBtn:hover {
|
|
12003
12003
|
color: var(--el-notification-close-hover-color);
|
|
12004
12004
|
}
|
|
12005
|
+
.el-notification .el-notification--primary {
|
|
12006
|
+
--el-notification-icon-color: var(--el-color-primary);
|
|
12007
|
+
color: var(--el-notification-icon-color);
|
|
12008
|
+
}
|
|
12005
12009
|
.el-notification .el-notification--success {
|
|
12006
12010
|
--el-notification-icon-color: var(--el-color-success);
|
|
12007
12011
|
color: var(--el-notification-icon-color);
|
|
@@ -12018,10 +12022,6 @@ heights > $common-component-size
|
|
|
12018
12022
|
--el-notification-icon-color: var(--el-color-error);
|
|
12019
12023
|
color: var(--el-notification-icon-color);
|
|
12020
12024
|
}
|
|
12021
|
-
.el-notification .el-notification--danger {
|
|
12022
|
-
--el-notification-icon-color: var(--el-color-danger);
|
|
12023
|
-
color: var(--el-notification-icon-color);
|
|
12024
|
-
}
|
|
12025
12025
|
|
|
12026
12026
|
.el-notification-fade-enter-from.right {
|
|
12027
12027
|
right: 0;
|
|
@@ -13,6 +13,21 @@
|
|
|
13
13
|
<div class="flex gap-4 items-start flex-col">
|
|
14
14
|
<el-alert :title="`default`" />
|
|
15
15
|
<el-alert v-for="color of colors" :key="color" :title="`${color} alert`" :type="color" show-icon />
|
|
16
|
+
</div>
|
|
17
|
+
</div>
|
|
18
|
+
<template #footer> <html-encode :tag="snippets.basic" /> </template>
|
|
19
|
+
</el-card>
|
|
20
|
+
|
|
21
|
+
<el-card>
|
|
22
|
+
<template #header> With Description </template>
|
|
23
|
+
<div class="flex flex-col gap-7.5">
|
|
24
|
+
<p>
|
|
25
|
+
Alert components are non-overlay elements in the page that does not disappear automatically. Alert provides 4 types of themes defined by
|
|
26
|
+
<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
|
|
27
|
+
<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.
|
|
28
|
+
</p>
|
|
29
|
+
<div class="flex gap-4 items-start flex-col">
|
|
30
|
+
<el-alert :title="`default`" description="This is a description." />
|
|
16
31
|
<el-alert v-for="color of colors" :key="color" :title="`${color} alert`" :type="color" description="This is a description." show-icon />
|
|
17
32
|
</div>
|
|
18
33
|
</div>
|
|
@@ -24,7 +39,7 @@
|
|
|
24
39
|
<script lang="ts" setup>
|
|
25
40
|
import { ref } from 'vue';
|
|
26
41
|
|
|
27
|
-
const colors = ref(['success', 'warning', 'info', 'error'
|
|
42
|
+
const colors = ref(['primary', 'success', 'warning', 'info', 'error']);
|
|
28
43
|
|
|
29
44
|
const snippets = ref({
|
|
30
45
|
basic: `<el-alert title="Title Text Goes Here" type="danger" description="This is a description." show-icon :closable="false" />`,
|
|
@@ -309,11 +309,11 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
|
|
|
309
309
|
--el-alert-description-font-size: 10px;
|
|
310
310
|
--el-alert-close-font-size: 14px;
|
|
311
311
|
--el-alert-close-customed-font-size: 14px;
|
|
312
|
-
--el-alert-icon-size:
|
|
312
|
+
--el-alert-icon-size: 12px;
|
|
313
313
|
--el-alert-icon-large-size: 32px;
|
|
314
314
|
position: relative;
|
|
315
315
|
width: 100%;
|
|
316
|
-
padding:
|
|
316
|
+
padding: 8px 16px;
|
|
317
317
|
margin: 0;
|
|
318
318
|
box-sizing: border-box;
|
|
319
319
|
border-radius: var(--el-border-radius-small);
|
|
@@ -321,7 +321,7 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
|
|
|
321
321
|
border-style: var(--el-border-style);
|
|
322
322
|
border-color: var(--el-alert-border-color);
|
|
323
323
|
position: relative;
|
|
324
|
-
background-color: var(--el-color-
|
|
324
|
+
background-color: var(--el-color-neutral-light-1);
|
|
325
325
|
overflow: hidden;
|
|
326
326
|
opacity: 1;
|
|
327
327
|
display: flex;
|
|
@@ -342,42 +342,61 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
|
|
|
342
342
|
justify-content: center;
|
|
343
343
|
}
|
|
344
344
|
|
|
345
|
+
.el-alert--primary {
|
|
346
|
+
--el-alert-bg-color: var(--el-color-primary-light-1);
|
|
347
|
+
--el-alert-border-color: var(--el-color-primary-light-3);
|
|
348
|
+
}
|
|
349
|
+
.el-alert--primary.is-light {
|
|
350
|
+
background-color: var(--el-alert-bg-color);
|
|
351
|
+
color: var(--el-color-primary-light-6);
|
|
352
|
+
}
|
|
353
|
+
.el-alert--primary.is-light .el-alert__description {
|
|
354
|
+
color: var(--el-color-primary-light-6);
|
|
355
|
+
}
|
|
356
|
+
.el-alert--primary.is-dark {
|
|
357
|
+
background-color: var(--el-color-primary);
|
|
358
|
+
color: var(--el-color-white);
|
|
359
|
+
}
|
|
360
|
+
.el-alert--primary.is-light .el-alert__close-btn {
|
|
361
|
+
color: var(--el-color-primary-light-6);
|
|
362
|
+
}
|
|
363
|
+
|
|
345
364
|
.el-alert--success {
|
|
346
365
|
--el-alert-bg-color: var(--el-color-success-light-1);
|
|
347
366
|
--el-alert-border-color: var(--el-color-success-light-3);
|
|
348
367
|
}
|
|
349
368
|
.el-alert--success.is-light {
|
|
350
369
|
background-color: var(--el-alert-bg-color);
|
|
351
|
-
color: var(--el-color-success-light-
|
|
370
|
+
color: var(--el-color-success-light-6);
|
|
352
371
|
}
|
|
353
372
|
.el-alert--success.is-light .el-alert__description {
|
|
354
|
-
color: var(--el-color-success-light-
|
|
373
|
+
color: var(--el-color-success-light-6);
|
|
355
374
|
}
|
|
356
375
|
.el-alert--success.is-dark {
|
|
357
376
|
background-color: var(--el-color-success);
|
|
358
377
|
color: var(--el-color-white);
|
|
359
378
|
}
|
|
360
379
|
.el-alert--success.is-light .el-alert__close-btn {
|
|
361
|
-
color: var(--el-color-success-light-
|
|
380
|
+
color: var(--el-color-success-light-6);
|
|
362
381
|
}
|
|
363
382
|
|
|
364
383
|
.el-alert--info {
|
|
365
|
-
--el-alert-bg-color: var(--el-color-
|
|
366
|
-
--el-alert-border-color: var(--el-color-
|
|
384
|
+
--el-alert-bg-color: var(--el-color-neutral-light-1);
|
|
385
|
+
--el-alert-border-color: var(--el-color-neutral-light-3);
|
|
367
386
|
}
|
|
368
387
|
.el-alert--info.is-light {
|
|
369
388
|
background-color: var(--el-alert-bg-color);
|
|
370
|
-
color: var(--el-color-
|
|
389
|
+
color: var(--el-color-neutral-light-6);
|
|
371
390
|
}
|
|
372
391
|
.el-alert--info.is-light .el-alert__description {
|
|
373
|
-
color: var(--el-color-
|
|
392
|
+
color: var(--el-color-neutral-light-6);
|
|
374
393
|
}
|
|
375
394
|
.el-alert--info.is-dark {
|
|
376
|
-
background-color: var(--el-color-
|
|
395
|
+
background-color: var(--el-color-neutral);
|
|
377
396
|
color: var(--el-color-white);
|
|
378
397
|
}
|
|
379
398
|
.el-alert--info.is-light .el-alert__close-btn {
|
|
380
|
-
color: var(--el-color-
|
|
399
|
+
color: var(--el-color-neutral-light-6);
|
|
381
400
|
}
|
|
382
401
|
|
|
383
402
|
.el-alert--warning {
|
|
@@ -386,17 +405,17 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
|
|
|
386
405
|
}
|
|
387
406
|
.el-alert--warning.is-light {
|
|
388
407
|
background-color: var(--el-alert-bg-color);
|
|
389
|
-
color: var(--el-color-warning-light-
|
|
408
|
+
color: var(--el-color-warning-light-6);
|
|
390
409
|
}
|
|
391
410
|
.el-alert--warning.is-light .el-alert__description {
|
|
392
|
-
color: var(--el-color-warning-light-
|
|
411
|
+
color: var(--el-color-warning-light-6);
|
|
393
412
|
}
|
|
394
413
|
.el-alert--warning.is-dark {
|
|
395
414
|
background-color: var(--el-color-warning);
|
|
396
415
|
color: var(--el-color-white);
|
|
397
416
|
}
|
|
398
417
|
.el-alert--warning.is-light .el-alert__close-btn {
|
|
399
|
-
color: var(--el-color-warning-light-
|
|
418
|
+
color: var(--el-color-warning-light-6);
|
|
400
419
|
}
|
|
401
420
|
|
|
402
421
|
.el-alert--error {
|
|
@@ -405,36 +424,17 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
|
|
|
405
424
|
}
|
|
406
425
|
.el-alert--error.is-light {
|
|
407
426
|
background-color: var(--el-alert-bg-color);
|
|
408
|
-
color: var(--el-color-error-light-
|
|
427
|
+
color: var(--el-color-error-light-6);
|
|
409
428
|
}
|
|
410
429
|
.el-alert--error.is-light .el-alert__description {
|
|
411
|
-
color: var(--el-color-error-light-
|
|
430
|
+
color: var(--el-color-error-light-6);
|
|
412
431
|
}
|
|
413
432
|
.el-alert--error.is-dark {
|
|
414
433
|
background-color: var(--el-color-error);
|
|
415
434
|
color: var(--el-color-white);
|
|
416
435
|
}
|
|
417
436
|
.el-alert--error.is-light .el-alert__close-btn {
|
|
418
|
-
color: var(--el-color-error-light-
|
|
419
|
-
}
|
|
420
|
-
|
|
421
|
-
.el-alert--danger {
|
|
422
|
-
--el-alert-bg-color: var(--el-color-danger-light-1);
|
|
423
|
-
--el-alert-border-color: var(--el-color-danger-light-3);
|
|
424
|
-
}
|
|
425
|
-
.el-alert--danger.is-light {
|
|
426
|
-
background-color: var(--el-alert-bg-color);
|
|
427
|
-
color: var(--el-color-danger-light-5);
|
|
428
|
-
}
|
|
429
|
-
.el-alert--danger.is-light .el-alert__description {
|
|
430
|
-
color: var(--el-color-danger-light-4);
|
|
431
|
-
}
|
|
432
|
-
.el-alert--danger.is-dark {
|
|
433
|
-
background-color: var(--el-color-danger);
|
|
434
|
-
color: var(--el-color-white);
|
|
435
|
-
}
|
|
436
|
-
.el-alert--danger.is-light .el-alert__close-btn {
|
|
437
|
-
color: var(--el-color-danger-light-5);
|
|
437
|
+
color: var(--el-color-error-light-6);
|
|
438
438
|
}
|
|
439
439
|
|
|
440
440
|
.el-alert::before {
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
position: relative;
|
|
8
8
|
|
|
9
9
|
width: 100%;
|
|
10
|
-
padding:
|
|
10
|
+
padding: 8px 16px;
|
|
11
11
|
margin: 0;
|
|
12
12
|
box-sizing: border-box;
|
|
13
13
|
border-radius: getCssVar('border-radius-small');
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
border-style: getCssVar('border-style');
|
|
16
16
|
border-color: getCssVar('alert', 'border-color');
|
|
17
17
|
position: relative;
|
|
18
|
-
background-color: getCssVar('color', '
|
|
18
|
+
background-color: getCssVar('color', 'neutral-light-1');
|
|
19
19
|
overflow: hidden;
|
|
20
20
|
opacity: 1;
|
|
21
21
|
display: flex;
|
|
@@ -44,26 +44,26 @@
|
|
|
44
44
|
|
|
45
45
|
@each $type in $semantic {
|
|
46
46
|
@include m($type) {
|
|
47
|
-
@include css-var-from-global(('alert', 'bg-color'), ('color', $type, 'light-1'));
|
|
48
|
-
@include css-var-from-global(('alert', 'border-color'), ('color', $type, 'light-3'));
|
|
47
|
+
@include css-var-from-global(('alert', 'bg-color'), ('color', if($type == 'info', 'neutral', $type), 'light-1'));
|
|
48
|
+
@include css-var-from-global(('alert', 'border-color'), ('color', if($type == 'info', 'neutral', $type), 'light-3'));
|
|
49
49
|
|
|
50
50
|
&.is-light {
|
|
51
51
|
background-color: getCssVar('alert', 'bg-color');
|
|
52
|
-
color: getCssVar('color', $type, 'light-
|
|
52
|
+
color: getCssVar('color', if($type == 'info', 'neutral', $type), 'light-6');
|
|
53
53
|
|
|
54
54
|
.#{$namespace}-alert__description {
|
|
55
|
-
color: getCssVar('color', $type, 'light-
|
|
55
|
+
color: getCssVar('color', if($type == 'info', 'neutral', $type), 'light-6');
|
|
56
56
|
}
|
|
57
57
|
}
|
|
58
58
|
|
|
59
59
|
&.is-dark {
|
|
60
|
-
background-color: getCssVar('color', $type);
|
|
60
|
+
background-color: getCssVar('color', if($type == 'info', 'neutral', $type));
|
|
61
61
|
color: getCssVar('color', 'white');
|
|
62
62
|
}
|
|
63
63
|
|
|
64
64
|
@include when(light) {
|
|
65
65
|
.#{$namespace}-alert__close-btn {
|
|
66
|
-
color: getCssVar('color', $type, 'light-
|
|
66
|
+
color: getCssVar('color', if($type == 'info', 'neutral', $type), 'light-6');
|
|
67
67
|
}
|
|
68
68
|
}
|
|
69
69
|
}
|
|
@@ -304,7 +304,7 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
|
|
|
304
304
|
--el-color-white: #ffffff;
|
|
305
305
|
--el-color-black: #000000;
|
|
306
306
|
--el-color-primary-rgb: 87, 55, 214;
|
|
307
|
-
--el-color-secondary-rgb:
|
|
307
|
+
--el-color-secondary-rgb: 168, 166, 177;
|
|
308
308
|
--el-color-neutral-rgb: 168, 166, 177;
|
|
309
309
|
--el-color-success-rgb: 76, 183, 112;
|
|
310
310
|
--el-color-warning-rgb: 232, 197, 82;
|
|
@@ -25,7 +25,7 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
|
|
|
25
25
|
|
|
26
26
|
// types
|
|
27
27
|
$types: primary, secondary, neutral, success, warning, danger, error, info;
|
|
28
|
-
$semantic: success, info, warning, error
|
|
28
|
+
$semantic: primary, success, info, warning, error;
|
|
29
29
|
$sizes: large, medium, small, mini;
|
|
30
30
|
$variants: 1, 2, 4, 3, 5, 6, 7, 8, 9;
|
|
31
31
|
// Color
|
|
@@ -38,7 +38,7 @@ $colors: map.deep-merge(
|
|
|
38
38
|
'base': #5737d6,
|
|
39
39
|
),
|
|
40
40
|
'secondary': (
|
|
41
|
-
'base': #
|
|
41
|
+
'base': #a8a6b1,
|
|
42
42
|
),
|
|
43
43
|
'neutral': (
|
|
44
44
|
'base': #a8a6b1,
|
|
@@ -547,7 +547,7 @@ $alert: map.merge(
|
|
|
547
547
|
'description-font-size': 10px,
|
|
548
548
|
'close-font-size': 14px,
|
|
549
549
|
'close-customed-font-size': 14px,
|
|
550
|
-
'icon-size':
|
|
550
|
+
'icon-size': 12px,
|
|
551
551
|
'icon-large-size': 32px,
|
|
552
552
|
),
|
|
553
553
|
$alert
|
|
@@ -304,7 +304,7 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
|
|
|
304
304
|
--el-color-white: #ffffff;
|
|
305
305
|
--el-color-black: #000000;
|
|
306
306
|
--el-color-primary-rgb: 87, 55, 214;
|
|
307
|
-
--el-color-secondary-rgb:
|
|
307
|
+
--el-color-secondary-rgb: 168, 166, 177;
|
|
308
308
|
--el-color-neutral-rgb: 168, 166, 177;
|
|
309
309
|
--el-color-success-rgb: 76, 183, 112;
|
|
310
310
|
--el-color-warning-rgb: 232, 197, 82;
|
|
@@ -564,11 +564,11 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
|
|
|
564
564
|
--el-alert-description-font-size: 10px;
|
|
565
565
|
--el-alert-close-font-size: 14px;
|
|
566
566
|
--el-alert-close-customed-font-size: 14px;
|
|
567
|
-
--el-alert-icon-size:
|
|
567
|
+
--el-alert-icon-size: 12px;
|
|
568
568
|
--el-alert-icon-large-size: 32px;
|
|
569
569
|
position: relative;
|
|
570
570
|
width: 100%;
|
|
571
|
-
padding:
|
|
571
|
+
padding: 8px 16px;
|
|
572
572
|
margin: 0;
|
|
573
573
|
box-sizing: border-box;
|
|
574
574
|
border-radius: var(--el-border-radius-small);
|
|
@@ -576,7 +576,7 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
|
|
|
576
576
|
border-style: var(--el-border-style);
|
|
577
577
|
border-color: var(--el-alert-border-color);
|
|
578
578
|
position: relative;
|
|
579
|
-
background-color: var(--el-color-
|
|
579
|
+
background-color: var(--el-color-neutral-light-1);
|
|
580
580
|
overflow: hidden;
|
|
581
581
|
opacity: 1;
|
|
582
582
|
display: flex;
|
|
@@ -597,42 +597,61 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
|
|
|
597
597
|
justify-content: center;
|
|
598
598
|
}
|
|
599
599
|
|
|
600
|
+
.el-alert--primary {
|
|
601
|
+
--el-alert-bg-color: var(--el-color-primary-light-1);
|
|
602
|
+
--el-alert-border-color: var(--el-color-primary-light-3);
|
|
603
|
+
}
|
|
604
|
+
.el-alert--primary.is-light {
|
|
605
|
+
background-color: var(--el-alert-bg-color);
|
|
606
|
+
color: var(--el-color-primary-light-6);
|
|
607
|
+
}
|
|
608
|
+
.el-alert--primary.is-light .el-alert__description {
|
|
609
|
+
color: var(--el-color-primary-light-6);
|
|
610
|
+
}
|
|
611
|
+
.el-alert--primary.is-dark {
|
|
612
|
+
background-color: var(--el-color-primary);
|
|
613
|
+
color: var(--el-color-white);
|
|
614
|
+
}
|
|
615
|
+
.el-alert--primary.is-light .el-alert__close-btn {
|
|
616
|
+
color: var(--el-color-primary-light-6);
|
|
617
|
+
}
|
|
618
|
+
|
|
600
619
|
.el-alert--success {
|
|
601
620
|
--el-alert-bg-color: var(--el-color-success-light-1);
|
|
602
621
|
--el-alert-border-color: var(--el-color-success-light-3);
|
|
603
622
|
}
|
|
604
623
|
.el-alert--success.is-light {
|
|
605
624
|
background-color: var(--el-alert-bg-color);
|
|
606
|
-
color: var(--el-color-success-light-
|
|
625
|
+
color: var(--el-color-success-light-6);
|
|
607
626
|
}
|
|
608
627
|
.el-alert--success.is-light .el-alert__description {
|
|
609
|
-
color: var(--el-color-success-light-
|
|
628
|
+
color: var(--el-color-success-light-6);
|
|
610
629
|
}
|
|
611
630
|
.el-alert--success.is-dark {
|
|
612
631
|
background-color: var(--el-color-success);
|
|
613
632
|
color: var(--el-color-white);
|
|
614
633
|
}
|
|
615
634
|
.el-alert--success.is-light .el-alert__close-btn {
|
|
616
|
-
color: var(--el-color-success-light-
|
|
635
|
+
color: var(--el-color-success-light-6);
|
|
617
636
|
}
|
|
618
637
|
|
|
619
638
|
.el-alert--info {
|
|
620
|
-
--el-alert-bg-color: var(--el-color-
|
|
621
|
-
--el-alert-border-color: var(--el-color-
|
|
639
|
+
--el-alert-bg-color: var(--el-color-neutral-light-1);
|
|
640
|
+
--el-alert-border-color: var(--el-color-neutral-light-3);
|
|
622
641
|
}
|
|
623
642
|
.el-alert--info.is-light {
|
|
624
643
|
background-color: var(--el-alert-bg-color);
|
|
625
|
-
color: var(--el-color-
|
|
644
|
+
color: var(--el-color-neutral-light-6);
|
|
626
645
|
}
|
|
627
646
|
.el-alert--info.is-light .el-alert__description {
|
|
628
|
-
color: var(--el-color-
|
|
647
|
+
color: var(--el-color-neutral-light-6);
|
|
629
648
|
}
|
|
630
649
|
.el-alert--info.is-dark {
|
|
631
|
-
background-color: var(--el-color-
|
|
650
|
+
background-color: var(--el-color-neutral);
|
|
632
651
|
color: var(--el-color-white);
|
|
633
652
|
}
|
|
634
653
|
.el-alert--info.is-light .el-alert__close-btn {
|
|
635
|
-
color: var(--el-color-
|
|
654
|
+
color: var(--el-color-neutral-light-6);
|
|
636
655
|
}
|
|
637
656
|
|
|
638
657
|
.el-alert--warning {
|
|
@@ -641,17 +660,17 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
|
|
|
641
660
|
}
|
|
642
661
|
.el-alert--warning.is-light {
|
|
643
662
|
background-color: var(--el-alert-bg-color);
|
|
644
|
-
color: var(--el-color-warning-light-
|
|
663
|
+
color: var(--el-color-warning-light-6);
|
|
645
664
|
}
|
|
646
665
|
.el-alert--warning.is-light .el-alert__description {
|
|
647
|
-
color: var(--el-color-warning-light-
|
|
666
|
+
color: var(--el-color-warning-light-6);
|
|
648
667
|
}
|
|
649
668
|
.el-alert--warning.is-dark {
|
|
650
669
|
background-color: var(--el-color-warning);
|
|
651
670
|
color: var(--el-color-white);
|
|
652
671
|
}
|
|
653
672
|
.el-alert--warning.is-light .el-alert__close-btn {
|
|
654
|
-
color: var(--el-color-warning-light-
|
|
673
|
+
color: var(--el-color-warning-light-6);
|
|
655
674
|
}
|
|
656
675
|
|
|
657
676
|
.el-alert--error {
|
|
@@ -660,36 +679,17 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
|
|
|
660
679
|
}
|
|
661
680
|
.el-alert--error.is-light {
|
|
662
681
|
background-color: var(--el-alert-bg-color);
|
|
663
|
-
color: var(--el-color-error-light-
|
|
682
|
+
color: var(--el-color-error-light-6);
|
|
664
683
|
}
|
|
665
684
|
.el-alert--error.is-light .el-alert__description {
|
|
666
|
-
color: var(--el-color-error-light-
|
|
685
|
+
color: var(--el-color-error-light-6);
|
|
667
686
|
}
|
|
668
687
|
.el-alert--error.is-dark {
|
|
669
688
|
background-color: var(--el-color-error);
|
|
670
689
|
color: var(--el-color-white);
|
|
671
690
|
}
|
|
672
691
|
.el-alert--error.is-light .el-alert__close-btn {
|
|
673
|
-
color: var(--el-color-error-light-
|
|
674
|
-
}
|
|
675
|
-
|
|
676
|
-
.el-alert--danger {
|
|
677
|
-
--el-alert-bg-color: var(--el-color-danger-light-1);
|
|
678
|
-
--el-alert-border-color: var(--el-color-danger-light-3);
|
|
679
|
-
}
|
|
680
|
-
.el-alert--danger.is-light {
|
|
681
|
-
background-color: var(--el-alert-bg-color);
|
|
682
|
-
color: var(--el-color-danger-light-5);
|
|
683
|
-
}
|
|
684
|
-
.el-alert--danger.is-light .el-alert__description {
|
|
685
|
-
color: var(--el-color-danger-light-4);
|
|
686
|
-
}
|
|
687
|
-
.el-alert--danger.is-dark {
|
|
688
|
-
background-color: var(--el-color-danger);
|
|
689
|
-
color: var(--el-color-white);
|
|
690
|
-
}
|
|
691
|
-
.el-alert--danger.is-light .el-alert__close-btn {
|
|
692
|
-
color: var(--el-color-danger-light-5);
|
|
692
|
+
color: var(--el-color-error-light-6);
|
|
693
693
|
}
|
|
694
694
|
|
|
695
695
|
.el-alert::before {
|
|
@@ -10694,6 +10694,10 @@ h6,
|
|
|
10694
10694
|
.el-message-box__status {
|
|
10695
10695
|
font-size: 24px;
|
|
10696
10696
|
}
|
|
10697
|
+
.el-message-box__status.el-message-box-icon--primary {
|
|
10698
|
+
--el-messagebox-color: var(--el-color-primary);
|
|
10699
|
+
color: var(--el-messagebox-color);
|
|
10700
|
+
}
|
|
10697
10701
|
.el-message-box__status.el-message-box-icon--success {
|
|
10698
10702
|
--el-messagebox-color: var(--el-color-success);
|
|
10699
10703
|
color: var(--el-messagebox-color);
|
|
@@ -10710,10 +10714,6 @@ h6,
|
|
|
10710
10714
|
--el-messagebox-color: var(--el-color-error);
|
|
10711
10715
|
color: var(--el-messagebox-color);
|
|
10712
10716
|
}
|
|
10713
|
-
.el-message-box__status.el-message-box-icon--danger {
|
|
10714
|
-
--el-messagebox-color: var(--el-color-danger);
|
|
10715
|
-
color: var(--el-messagebox-color);
|
|
10716
|
-
}
|
|
10717
10717
|
|
|
10718
10718
|
.el-message-box__message {
|
|
10719
10719
|
margin: 0;
|
|
@@ -10870,6 +10870,30 @@ h6,
|
|
|
10870
10870
|
.el-message .el-message__closeBtn:hover {
|
|
10871
10871
|
color: var(--el-color-info-light-6);
|
|
10872
10872
|
}
|
|
10873
|
+
.el-message--primary {
|
|
10874
|
+
--el-message-bg-color: var(--el-color-primary-light-1);
|
|
10875
|
+
--el-message-border-color: var(--el-color-primary-light-3);
|
|
10876
|
+
--el-message-text-color: var(--el-color-primary);
|
|
10877
|
+
}
|
|
10878
|
+
.el-message--primary .el-message__content {
|
|
10879
|
+
color: var(--el-message-text-color);
|
|
10880
|
+
overflow-wrap: break-word;
|
|
10881
|
+
}
|
|
10882
|
+
.el-message--primary .el-message__closeBtn {
|
|
10883
|
+
color: var(--el-color-primary);
|
|
10884
|
+
}
|
|
10885
|
+
.el-message--primary .el-message__closeBtn:hover {
|
|
10886
|
+
color: var(--el-color-primary-light-4);
|
|
10887
|
+
}
|
|
10888
|
+
.el-message--primary .el-message__closeBtn:active {
|
|
10889
|
+
color: var(--el-color-primary-light-6);
|
|
10890
|
+
}
|
|
10891
|
+
|
|
10892
|
+
.el-message .el-message-icon--primary {
|
|
10893
|
+
color: var(--el-message-text-color);
|
|
10894
|
+
width: 12px;
|
|
10895
|
+
height: 12px;
|
|
10896
|
+
}
|
|
10873
10897
|
.el-message--success {
|
|
10874
10898
|
--el-message-bg-color: var(--el-color-success-light-1);
|
|
10875
10899
|
--el-message-border-color: var(--el-color-success-light-3);
|
|
@@ -10966,30 +10990,6 @@ h6,
|
|
|
10966
10990
|
width: 12px;
|
|
10967
10991
|
height: 12px;
|
|
10968
10992
|
}
|
|
10969
|
-
.el-message--danger {
|
|
10970
|
-
--el-message-bg-color: var(--el-color-danger-light-1);
|
|
10971
|
-
--el-message-border-color: var(--el-color-danger-light-3);
|
|
10972
|
-
--el-message-text-color: var(--el-color-danger);
|
|
10973
|
-
}
|
|
10974
|
-
.el-message--danger .el-message__content {
|
|
10975
|
-
color: var(--el-message-text-color);
|
|
10976
|
-
overflow-wrap: break-word;
|
|
10977
|
-
}
|
|
10978
|
-
.el-message--danger .el-message__closeBtn {
|
|
10979
|
-
color: var(--el-color-danger);
|
|
10980
|
-
}
|
|
10981
|
-
.el-message--danger .el-message__closeBtn:hover {
|
|
10982
|
-
color: var(--el-color-danger-light-4);
|
|
10983
|
-
}
|
|
10984
|
-
.el-message--danger .el-message__closeBtn:active {
|
|
10985
|
-
color: var(--el-color-danger-light-6);
|
|
10986
|
-
}
|
|
10987
|
-
|
|
10988
|
-
.el-message .el-message-icon--danger {
|
|
10989
|
-
color: var(--el-message-text-color);
|
|
10990
|
-
width: 12px;
|
|
10991
|
-
height: 12px;
|
|
10992
|
-
}
|
|
10993
10993
|
.el-message .el-message__badge {
|
|
10994
10994
|
position: absolute;
|
|
10995
10995
|
top: -8px;
|
|
@@ -11116,6 +11116,10 @@ h6,
|
|
|
11116
11116
|
.el-notification .el-notification__closeBtn:hover {
|
|
11117
11117
|
color: var(--el-notification-close-hover-color);
|
|
11118
11118
|
}
|
|
11119
|
+
.el-notification .el-notification--primary {
|
|
11120
|
+
--el-notification-icon-color: var(--el-color-primary);
|
|
11121
|
+
color: var(--el-notification-icon-color);
|
|
11122
|
+
}
|
|
11119
11123
|
.el-notification .el-notification--success {
|
|
11120
11124
|
--el-notification-icon-color: var(--el-color-success);
|
|
11121
11125
|
color: var(--el-notification-icon-color);
|
|
@@ -11132,10 +11136,6 @@ h6,
|
|
|
11132
11136
|
--el-notification-icon-color: var(--el-color-error);
|
|
11133
11137
|
color: var(--el-notification-icon-color);
|
|
11134
11138
|
}
|
|
11135
|
-
.el-notification .el-notification--danger {
|
|
11136
|
-
--el-notification-icon-color: var(--el-color-danger);
|
|
11137
|
-
color: var(--el-notification-icon-color);
|
|
11138
|
-
}
|
|
11139
11139
|
|
|
11140
11140
|
.el-notification-fade-enter-from.right {
|
|
11141
11141
|
right: 0;
|
|
@@ -458,6 +458,10 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
|
|
|
458
458
|
.el-message-box__status {
|
|
459
459
|
font-size: 24px;
|
|
460
460
|
}
|
|
461
|
+
.el-message-box__status.el-message-box-icon--primary {
|
|
462
|
+
--el-messagebox-color: var(--el-color-primary);
|
|
463
|
+
color: var(--el-messagebox-color);
|
|
464
|
+
}
|
|
461
465
|
.el-message-box__status.el-message-box-icon--success {
|
|
462
466
|
--el-messagebox-color: var(--el-color-success);
|
|
463
467
|
color: var(--el-messagebox-color);
|
|
@@ -474,10 +478,6 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
|
|
|
474
478
|
--el-messagebox-color: var(--el-color-error);
|
|
475
479
|
color: var(--el-messagebox-color);
|
|
476
480
|
}
|
|
477
|
-
.el-message-box__status.el-message-box-icon--danger {
|
|
478
|
-
--el-messagebox-color: var(--el-color-danger);
|
|
479
|
-
color: var(--el-messagebox-color);
|
|
480
|
-
}
|
|
481
481
|
|
|
482
482
|
.el-message-box__message {
|
|
483
483
|
margin: 0;
|
|
@@ -360,6 +360,30 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
|
|
|
360
360
|
.el-message .el-message__closeBtn:hover {
|
|
361
361
|
color: var(--el-color-info-light-6);
|
|
362
362
|
}
|
|
363
|
+
.el-message--primary {
|
|
364
|
+
--el-message-bg-color: var(--el-color-primary-light-1);
|
|
365
|
+
--el-message-border-color: var(--el-color-primary-light-3);
|
|
366
|
+
--el-message-text-color: var(--el-color-primary);
|
|
367
|
+
}
|
|
368
|
+
.el-message--primary .el-message__content {
|
|
369
|
+
color: var(--el-message-text-color);
|
|
370
|
+
overflow-wrap: break-word;
|
|
371
|
+
}
|
|
372
|
+
.el-message--primary .el-message__closeBtn {
|
|
373
|
+
color: var(--el-color-primary);
|
|
374
|
+
}
|
|
375
|
+
.el-message--primary .el-message__closeBtn:hover {
|
|
376
|
+
color: var(--el-color-primary-light-4);
|
|
377
|
+
}
|
|
378
|
+
.el-message--primary .el-message__closeBtn:active {
|
|
379
|
+
color: var(--el-color-primary-light-6);
|
|
380
|
+
}
|
|
381
|
+
|
|
382
|
+
.el-message .el-message-icon--primary {
|
|
383
|
+
color: var(--el-message-text-color);
|
|
384
|
+
width: 12px;
|
|
385
|
+
height: 12px;
|
|
386
|
+
}
|
|
363
387
|
.el-message--success {
|
|
364
388
|
--el-message-bg-color: var(--el-color-success-light-1);
|
|
365
389
|
--el-message-border-color: var(--el-color-success-light-3);
|
|
@@ -456,30 +480,6 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
|
|
|
456
480
|
width: 12px;
|
|
457
481
|
height: 12px;
|
|
458
482
|
}
|
|
459
|
-
.el-message--danger {
|
|
460
|
-
--el-message-bg-color: var(--el-color-danger-light-1);
|
|
461
|
-
--el-message-border-color: var(--el-color-danger-light-3);
|
|
462
|
-
--el-message-text-color: var(--el-color-danger);
|
|
463
|
-
}
|
|
464
|
-
.el-message--danger .el-message__content {
|
|
465
|
-
color: var(--el-message-text-color);
|
|
466
|
-
overflow-wrap: break-word;
|
|
467
|
-
}
|
|
468
|
-
.el-message--danger .el-message__closeBtn {
|
|
469
|
-
color: var(--el-color-danger);
|
|
470
|
-
}
|
|
471
|
-
.el-message--danger .el-message__closeBtn:hover {
|
|
472
|
-
color: var(--el-color-danger-light-4);
|
|
473
|
-
}
|
|
474
|
-
.el-message--danger .el-message__closeBtn:active {
|
|
475
|
-
color: var(--el-color-danger-light-6);
|
|
476
|
-
}
|
|
477
|
-
|
|
478
|
-
.el-message .el-message-icon--danger {
|
|
479
|
-
color: var(--el-message-text-color);
|
|
480
|
-
width: 12px;
|
|
481
|
-
height: 12px;
|
|
482
|
-
}
|
|
483
483
|
.el-message .el-message__badge {
|
|
484
484
|
position: absolute;
|
|
485
485
|
top: -8px;
|
|
@@ -378,6 +378,10 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
|
|
|
378
378
|
.el-notification .el-notification__closeBtn:hover {
|
|
379
379
|
color: var(--el-notification-close-hover-color);
|
|
380
380
|
}
|
|
381
|
+
.el-notification .el-notification--primary {
|
|
382
|
+
--el-notification-icon-color: var(--el-color-primary);
|
|
383
|
+
color: var(--el-notification-icon-color);
|
|
384
|
+
}
|
|
381
385
|
.el-notification .el-notification--success {
|
|
382
386
|
--el-notification-icon-color: var(--el-color-success);
|
|
383
387
|
color: var(--el-notification-icon-color);
|
|
@@ -394,10 +398,6 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
|
|
|
394
398
|
--el-notification-icon-color: var(--el-color-error);
|
|
395
399
|
color: var(--el-notification-icon-color);
|
|
396
400
|
}
|
|
397
|
-
.el-notification .el-notification--danger {
|
|
398
|
-
--el-notification-icon-color: var(--el-color-danger);
|
|
399
|
-
color: var(--el-notification-icon-color);
|
|
400
|
-
}
|
|
401
401
|
|
|
402
402
|
.el-notification-fade-enter-from.right {
|
|
403
403
|
right: 0;
|
|
@@ -304,7 +304,7 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
|
|
|
304
304
|
--el-color-white: #ffffff;
|
|
305
305
|
--el-color-black: #000000;
|
|
306
306
|
--el-color-primary-rgb: 87, 55, 214;
|
|
307
|
-
--el-color-secondary-rgb:
|
|
307
|
+
--el-color-secondary-rgb: 168, 166, 177;
|
|
308
308
|
--el-color-neutral-rgb: 168, 166, 177;
|
|
309
309
|
--el-color-success-rgb: 76, 183, 112;
|
|
310
310
|
--el-color-warning-rgb: 232, 197, 82;
|
package/package.json
CHANGED