@clayui/css 3.41.0 → 3.44.1

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.
Files changed (78) hide show
  1. package/lib/css/atlas.css +1117 -1163
  2. package/lib/css/atlas.css.map +1 -1
  3. package/lib/css/base.css +1020 -1068
  4. package/lib/css/base.css.map +1 -1
  5. package/lib/css/bootstrap.css.map +1 -1
  6. package/lib/css/cadmin.css +875 -931
  7. package/lib/css/cadmin.css.map +1 -1
  8. package/lib/images/icons/date-time.svg +12 -0
  9. package/lib/images/icons/filter.svg +1 -1
  10. package/lib/images/icons/icons.svg +1 -1
  11. package/package.json +2 -2
  12. package/src/images/icons/date-time.svg +12 -0
  13. package/src/images/icons/filter.svg +1 -1
  14. package/src/scss/_mixins.scss +2 -0
  15. package/src/scss/atlas/variables/_application-bar.scss +32 -12
  16. package/src/scss/atlas/variables/_buttons.scss +2 -31
  17. package/src/scss/atlas/variables/_management-bar.scss +53 -21
  18. package/src/scss/atlas/variables/_navigation-bar.scss +104 -18
  19. package/src/scss/atlas/variables/_navs.scss +20 -15
  20. package/src/scss/atlas/variables/_pagination.scss +2 -0
  21. package/src/scss/atlas/variables/_sidebar.scss +1 -1
  22. package/src/scss/cadmin/components/_dropdowns.scss +4 -0
  23. package/src/scss/cadmin/components/_input-groups.scss +12 -312
  24. package/src/scss/cadmin/components/_navs.scss +35 -113
  25. package/src/scss/cadmin/components/_pagination.scss +20 -236
  26. package/src/scss/cadmin/components/_popovers.scss +31 -252
  27. package/src/scss/cadmin/components/_tooltip.scss +29 -167
  28. package/src/scss/cadmin/components/_utilities-functional-important.scss +4 -3
  29. package/src/scss/cadmin/variables/_alerts.scss +3 -2
  30. package/src/scss/cadmin/variables/_dropdowns.scss +31 -2
  31. package/src/scss/cadmin/variables/_forms.scss +366 -5
  32. package/src/scss/cadmin/variables/_management-bar.scss +70 -30
  33. package/src/scss/cadmin/variables/_navigation-bar.scss +118 -22
  34. package/src/scss/cadmin/variables/_navs.scss +270 -53
  35. package/src/scss/cadmin/variables/_pagination.scss +274 -68
  36. package/src/scss/cadmin/variables/_popovers.scss +410 -0
  37. package/src/scss/cadmin/variables/_sidebar.scss +17 -5
  38. package/src/scss/cadmin/variables/_tooltip.scss +299 -0
  39. package/src/scss/components/_button-groups.scss +6 -6
  40. package/src/scss/components/_buttons.scss +87 -49
  41. package/src/scss/components/_cards.scss +16 -116
  42. package/src/scss/components/_dropdowns.scss +4 -0
  43. package/src/scss/components/_input-groups.scss +12 -308
  44. package/src/scss/components/_multi-step-nav.scss +12 -8
  45. package/src/scss/components/_navs.scss +45 -128
  46. package/src/scss/components/_pagination.scss +18 -234
  47. package/src/scss/components/_popovers.scss +30 -237
  48. package/src/scss/components/_toggle-switch.scss +2 -2
  49. package/src/scss/components/_tooltip.scss +29 -164
  50. package/src/scss/functions/_lx-icons-generated.scss +3 -1
  51. package/src/scss/mixins/_buttons.scss +674 -472
  52. package/src/scss/mixins/_cards.scss +751 -557
  53. package/src/scss/mixins/_close.scss +0 -1
  54. package/src/scss/mixins/_custom-forms.scss +442 -409
  55. package/src/scss/mixins/_dropdown-menu.scss +483 -406
  56. package/src/scss/mixins/_forms.scss +332 -256
  57. package/src/scss/mixins/_input-groups.scss +405 -11
  58. package/src/scss/mixins/_labels.scss +320 -296
  59. package/src/scss/mixins/_links.scss +522 -476
  60. package/src/scss/mixins/_nav.scss +202 -131
  61. package/src/scss/mixins/_navbar.scss +791 -140
  62. package/src/scss/mixins/_pagination.scss +422 -0
  63. package/src/scss/mixins/_popovers.scss +90 -0
  64. package/src/scss/mixins/_toggle-switch.scss +64 -0
  65. package/src/scss/mixins/_tooltip.scss +70 -0
  66. package/src/scss/variables/_alerts.scss +1 -0
  67. package/src/scss/variables/_application-bar.scss +18 -6
  68. package/src/scss/variables/_buttons.scss +26 -3
  69. package/src/scss/variables/_cards.scss +273 -1
  70. package/src/scss/variables/_dropdowns.scss +31 -2
  71. package/src/scss/variables/_forms.scss +405 -22
  72. package/src/scss/variables/_management-bar.scss +45 -12
  73. package/src/scss/variables/_navigation-bar.scss +95 -14
  74. package/src/scss/variables/_navs.scss +266 -33
  75. package/src/scss/variables/_pagination.scss +261 -61
  76. package/src/scss/variables/_popovers.scss +392 -0
  77. package/src/scss/variables/_sidebar.scss +17 -5
  78. package/src/scss/variables/_tooltip.scss +299 -0
package/src/scss/cadmin/variables/_forms.scss CHANGED
@@ -1257,7 +1257,24 @@ $cadmin-form-group-item-label-spacer: (
1257
1257
  $cadmin-input-label-font-size * $cadmin-line-height-base
1258
1258
  ) + $cadmin-input-label-margin-bottom !default;
1259
1259
 
1260
- // Input Group
1260
+ // .input-group
1261
+
1262
+ $cadmin-input-group: () !default;
1263
+ $cadmin-input-group: map-deep-merge(
1264
+ (
1265
+ align-items: stretch,
1266
+ display: flex,
1267
+ flex-wrap: wrap,
1268
+ position: relative,
1269
+ width: 100%,
1270
+ btn-unstyled: (
1271
+ color: inherit,
1272
+ ),
1273
+ ),
1274
+ $cadmin-input-group
1275
+ );
1276
+
1277
+ // .input-group-text
1261
1278
 
1262
1279
  $cadmin-input-group-addon-bg: $cadmin-gray-300 !default;
1263
1280
  $cadmin-input-group-addon-border-color: $cadmin-input-group-addon-bg !default;
@@ -1267,17 +1284,140 @@ $cadmin-input-group-addon-min-width: 40px !default; // 40px
1267
1284
  $cadmin-input-group-addon-padding-x: 12px !default; // 12px
1268
1285
  $cadmin-input-group-addon-padding-y: $cadmin-input-padding-y !default;
1269
1286
 
1270
- // Input Group Secondary
1287
+ $cadmin-input-group-text: () !default;
1288
+ $cadmin-input-group-text: map-deep-merge(
1289
+ (
1290
+ align-items: center,
1291
+ background-color: $cadmin-input-group-addon-bg,
1292
+ border-bottom-width: $cadmin-input-border-bottom-width,
1293
+ border-color: $cadmin-input-group-addon-border-color,
1294
+ border-left-width: $cadmin-input-border-left-width,
1295
+ border-radius: clay-enable-rounded($cadmin-input-border-radius),
1296
+ border-right-width: $cadmin-input-border-right-width,
1297
+ border-style: solid,
1298
+ border-top-width: $cadmin-input-border-top-width,
1299
+ color: $cadmin-input-group-addon-color,
1300
+ display: flex,
1301
+ font-size: $cadmin-input-font-size,
1302
+ font-weight: $cadmin-input-group-addon-font-weight,
1303
+ height: $cadmin-input-height,
1304
+ justify-content: center,
1305
+ line-height: $cadmin-input-line-height,
1306
+ margin-bottom: 0,
1307
+ min-width: $cadmin-input-group-addon-min-width,
1308
+ padding-bottom: $cadmin-input-group-addon-padding-y,
1309
+ padding-left: $cadmin-input-group-addon-padding-x,
1310
+ padding-right: $cadmin-input-group-addon-padding-x,
1311
+ padding-top: $cadmin-input-group-addon-padding-y,
1312
+ text-align: center,
1313
+ white-space: nowrap,
1314
+ label: (
1315
+ color: $cadmin-input-group-addon-color,
1316
+ ),
1317
+ custom-control: (
1318
+ margin-bottom: 0,
1319
+ ),
1320
+ form-check: (
1321
+ margin-bottom: 0,
1322
+ input: (
1323
+ margin-top: 0,
1324
+ ),
1325
+ ),
1326
+ lexicon-icon: (
1327
+ margin-top: 0,
1328
+ ),
1329
+ media-breakpoint-down: (
1330
+ sm: (
1331
+ height: $cadmin-input-height-mobile,
1332
+ ),
1333
+ ),
1334
+ ),
1335
+ $cadmin-input-group-text
1336
+ );
1337
+
1338
+ // .input-group-text-secondary
1271
1339
 
1272
1340
  $cadmin-input-group-secondary-addon-bg: $cadmin-white !default;
1273
1341
  $cadmin-input-group-secondary-addon-border-color: $cadmin-secondary-l2 !default;
1274
1342
  $cadmin-input-group-secondary-addon-border-width: 1px !default; // 1px
1275
1343
  $cadmin-input-group-secondary-addon-color: $cadmin-secondary !default;
1276
1344
 
1277
- // Input Group Item
1345
+ $cadmin-input-group-text-secondary: () !default;
1346
+ $cadmin-input-group-text-secondary: map-deep-merge(
1347
+ (
1348
+ background-color: $cadmin-input-group-secondary-addon-bg,
1349
+ border-color: $cadmin-input-group-secondary-addon-border-color,
1350
+ border-width: $cadmin-input-group-secondary-addon-border-width,
1351
+ color: $cadmin-input-group-secondary-addon-color,
1352
+ z-index: 2,
1353
+ label: (
1354
+ color: $cadmin-input-group-secondary-addon-color,
1355
+ ),
1356
+ ),
1357
+ $cadmin-input-group-text-secondary
1358
+ );
1359
+
1360
+ // .input-group-item
1278
1361
 
1279
1362
  $cadmin-input-group-item-margin-left: 8px !default;
1280
1363
 
1364
+ $cadmin-input-group-item: () !default;
1365
+ $cadmin-input-group-item: map-deep-merge(
1366
+ (
1367
+ display: flex,
1368
+ flex-grow: 1,
1369
+ flex-wrap: wrap,
1370
+ margin-left: $cadmin-input-group-item-margin-left,
1371
+ width: 1%,
1372
+ word-wrap: break-word,
1373
+ focus: (
1374
+ border-radius: clay-enable-rounded($cadmin-input-border-radius),
1375
+ box-shadow: $cadmin-input-focus-box-shadow,
1376
+ input-group-prepend: (
1377
+ border-bottom-right-radius: clay-enable-rounded(0),
1378
+ border-top-right-radius: clay-enable-rounded(0),
1379
+ z-index: 1,
1380
+ ),
1381
+ input-group-append: (
1382
+ border-bottom-left-radius: clay-enable-rounded(0),
1383
+ border-top-left-radius: clay-enable-rounded(0),
1384
+ ),
1385
+ form-control: (
1386
+ background-color: $cadmin-input-focus-bg,
1387
+ border-color: $cadmin-input-focus-border-color,
1388
+ ),
1389
+ input-group-inset-item: (
1390
+ background-color: $cadmin-input-focus-bg,
1391
+ border-color: $cadmin-input-focus-border-color,
1392
+ ),
1393
+ ),
1394
+ first-child: (
1395
+ margin-left: 0,
1396
+ ),
1397
+ btn: (
1398
+ align-self: flex-start,
1399
+ ),
1400
+ dropdown: (
1401
+ display: flex,
1402
+ flex-wrap: wrap,
1403
+ word-wrap: break-word,
1404
+ width: 100%,
1405
+ ),
1406
+ ),
1407
+ $cadmin-input-group-item
1408
+ );
1409
+
1410
+ // .input-group-item-shrink
1411
+
1412
+ $cadmin-input-group-item-shrink: () !default;
1413
+ $cadmin-input-group-item-shrink: map-deep-merge(
1414
+ (
1415
+ flex-grow: 0,
1416
+ width: auto,
1417
+ ),
1418
+ $cadmin-input-group-item-shrink
1419
+ );
1420
+
1281
1421
  // Input Group Inset
1282
1422
 
1283
1423
  $cadmin-input-group-inset-item-color: $cadmin-input-group-addon-color !default;
@@ -1332,7 +1472,7 @@ $cadmin-input-group-inset-form-file-btn: map-deep-merge(
1332
1472
  $cadmin-input-group-inset-form-file-btn
1333
1473
  );
1334
1474
 
1335
- // Input Group Lg
1475
+ // .input-group-lg
1336
1476
 
1337
1477
  $cadmin-input-group-addon-min-width-lg: 48px !default; // 48px
1338
1478
  $cadmin-input-group-addon-padding-x-lg: $cadmin-input-padding-x-lg !default;
@@ -1391,7 +1531,92 @@ $cadmin-input-group-lg-inset-item-form-file-btn: map-deep-merge(
1391
1531
  $cadmin-input-group-lg-inset-item-form-file-btn
1392
1532
  );
1393
1533
 
1394
- // Input Group Sm
1534
+ $cadmin-input-group-lg: () !default;
1535
+ $cadmin-input-group-lg: map-deep-merge(
1536
+ (
1537
+ input-group-item: (
1538
+ btn: $cadmin-input-group-lg-item-btn,
1539
+ btn-monospaced: $cadmin-input-group-lg-item-btn-monospaced,
1540
+ form-control: (
1541
+ border-radius:
1542
+ clay-enable-rounded($cadmin-input-border-radius-lg),
1543
+ font-size: $cadmin-input-font-size-lg,
1544
+ height: $cadmin-input-height-lg,
1545
+ line-height: $cadmin-input-line-height-lg,
1546
+ padding-bottom: $cadmin-input-padding-y-lg,
1547
+ padding-left: $cadmin-input-padding-x-lg,
1548
+ padding-right: $cadmin-input-padding-x-lg,
1549
+ padding-top: $cadmin-input-padding-y-lg,
1550
+ ),
1551
+ form-control-inset: (
1552
+ margin-bottom: 0,
1553
+ margin-top: 0,
1554
+ ),
1555
+ form-file: (
1556
+ btn: (
1557
+ border-radius:
1558
+ clay-enable-rounded($cadmin-input-border-radius-lg),
1559
+ font-size: $cadmin-input-font-size-lg,
1560
+ height: $cadmin-input-height-lg,
1561
+ line-height: $cadmin-input-line-height-lg,
1562
+ padding-bottom: $cadmin-input-padding-y-lg,
1563
+ padding-left: $cadmin-input-padding-x-lg,
1564
+ padding-right: $cadmin-input-padding-x-lg,
1565
+ padding-top: $cadmin-input-padding-y-lg,
1566
+ ),
1567
+ ),
1568
+ textarea: (
1569
+ height: $cadmin-input-textarea-height-lg,
1570
+ ),
1571
+ form-control-plaintext: (
1572
+ font-size: $cadmin-input-font-size-lg,
1573
+ height: $cadmin-input-height-lg,
1574
+ line-height: $cadmin-input-line-height-lg,
1575
+ padding-bottom: $cadmin-input-padding-y-lg,
1576
+ padding-top: $cadmin-input-padding-y-lg,
1577
+ ),
1578
+ input-group-text: (
1579
+ border-radius:
1580
+ clay-enable-rounded($cadmin-input-border-radius-lg),
1581
+ font-size: $cadmin-input-font-size-lg,
1582
+ height: $cadmin-input-height-lg,
1583
+ min-width: $cadmin-input-group-addon-min-width-lg,
1584
+ padding-bottom: $cadmin-input-group-addon-padding-y-lg,
1585
+ padding-left: $cadmin-input-group-addon-padding-x-lg,
1586
+ padding-right: $cadmin-input-group-addon-padding-x-lg,
1587
+ padding-top: $cadmin-input-group-addon-padding-y-lg,
1588
+ ),
1589
+ input-group-inset-item: (
1590
+ btn: $cadmin-input-group-lg-inset-item-btn,
1591
+ btn-monospaced: $cadmin-input-group-lg-inset-item-btn-monospaced,
1592
+ form-file: (
1593
+ height: 75%,
1594
+ btn: $cadmin-input-group-lg-inset-item-form-file-btn,
1595
+ ),
1596
+ ),
1597
+ ),
1598
+ media-breakpoint-down: (
1599
+ sm: (
1600
+ input-group-item: (
1601
+ form-control: (
1602
+ height: $cadmin-input-height-lg-mobile,
1603
+ ),
1604
+ form-file: (
1605
+ btn: (
1606
+ height: $cadmin-input-height-lg-mobile,
1607
+ ),
1608
+ ),
1609
+ form-control-plaintext: (
1610
+ height: $cadmin-input-height-lg-mobile,
1611
+ ),
1612
+ ),
1613
+ ),
1614
+ ),
1615
+ ),
1616
+ $cadmin-input-group-lg
1617
+ );
1618
+
1619
+ // .input-group-sm
1395
1620
 
1396
1621
  $cadmin-input-group-addon-min-width-sm: 32px !default; // 32px
1397
1622
  $cadmin-input-group-addon-padding-x-sm: $cadmin-input-padding-x-sm !default;
@@ -1464,6 +1689,142 @@ $cadmin-input-group-sm-inset-item-form-file-btn: map-deep-merge(
1464
1689
  $cadmin-input-group-sm-inset-item-form-file-btn
1465
1690
  );
1466
1691
 
1692
+ $cadmin-input-group-sm: () !default;
1693
+ $cadmin-input-group-sm: map-deep-merge(
1694
+ (
1695
+ input-group-item: (
1696
+ btn: $cadmin-input-group-sm-item-btn,
1697
+ btn-monospaced: $cadmin-input-group-sm-item-btn-monospaced,
1698
+ form-control: (
1699
+ border-radius:
1700
+ clay-enable-rounded($cadmin-input-border-radius-sm),
1701
+ font-size: $cadmin-input-font-size-sm,
1702
+ height: $cadmin-input-height-sm,
1703
+ line-height: $cadmin-input-line-height-sm,
1704
+ padding-bottom: $cadmin-input-padding-y-sm,
1705
+ padding-left: $cadmin-input-padding-x-sm,
1706
+ padding-right: $cadmin-input-padding-x-sm,
1707
+ padding-top: $cadmin-input-padding-y-sm,
1708
+ label: (
1709
+ margin-bottom: 0.1875rem,
1710
+ margin-top: 0.1875rem,
1711
+ ),
1712
+ ),
1713
+ form-control-inset: (
1714
+ margin-bottom: 0.125rem,
1715
+ margin-top: 0.1875rem,
1716
+ ),
1717
+ form-file: (
1718
+ btn: (
1719
+ border-radius:
1720
+ clay-enable-rounded($cadmin-input-border-radius-sm),
1721
+ font-size: $cadmin-input-font-size-sm,
1722
+ height: $cadmin-input-height-sm,
1723
+ line-height: $cadmin-input-line-height-sm,
1724
+ padding-bottom: $cadmin-input-padding-y-sm,
1725
+ padding-left: $cadmin-input-padding-x-sm,
1726
+ padding-right: $cadmin-input-padding-x-sm,
1727
+ padding-top: $cadmin-input-padding-y-sm,
1728
+ ),
1729
+ ),
1730
+ form-control-plaintext: (
1731
+ font-size: $cadmin-input-font-size-sm,
1732
+ height: $cadmin-input-height-sm,
1733
+ line-height: $cadmin-input-line-height-sm,
1734
+ padding-bottom: $cadmin-input-padding-y-sm,
1735
+ padding-top: $cadmin-input-padding-y-sm,
1736
+ ),
1737
+ textarea: (
1738
+ height: $cadmin-input-textarea-height-sm,
1739
+ ),
1740
+ input-group-text: (
1741
+ border-radius:
1742
+ clay-enable-rounded($cadmin-input-border-radius-sm),
1743
+ font-size: $cadmin-input-font-size-sm,
1744
+ height: $cadmin-input-height-sm,
1745
+ min-width: $cadmin-input-group-addon-min-width-sm,
1746
+ padding-bottom: $cadmin-input-group-addon-padding-y-sm,
1747
+ padding-left: $cadmin-input-group-addon-padding-x-sm,
1748
+ padding-right: $cadmin-input-group-addon-padding-x-sm,
1749
+ padding-top: $cadmin-input-group-addon-padding-y-sm,
1750
+ ),
1751
+ input-group-inset-item: (
1752
+ btn: $cadmin-input-group-sm-inset-item-btn,
1753
+ btn-monospaced: $cadmin-input-group-sm-inset-item-btn-monospaced,
1754
+ form-file: (
1755
+ height: 75%,
1756
+ btn: $cadmin-input-group-sm-inset-item-form-file-btn,
1757
+ ),
1758
+ ),
1759
+ ),
1760
+ media-breakpoint-down: (
1761
+ sm: (
1762
+ input-group-item: (
1763
+ form-control: (
1764
+ height: $cadmin-input-height-sm-mobile,
1765
+ ),
1766
+ form-file: (
1767
+ btn: (
1768
+ height: $cadmin-input-height-sm-mobile,
1769
+ ),
1770
+ ),
1771
+ form-control-plaintext: (
1772
+ height: $cadmin-input-height-sm-mobile,
1773
+ ),
1774
+ ),
1775
+ ),
1776
+ ),
1777
+ ),
1778
+ $cadmin-input-group-sm
1779
+ );
1780
+
1781
+ // .input-group-inset
1782
+
1783
+ $cadmin-input-group-inset: () !default;
1784
+ $cadmin-input-group-inset: map-deep-merge(
1785
+ (
1786
+ flex-grow: 1,
1787
+ order: 5,
1788
+ width: 1%,
1789
+ focus: (
1790
+ box-shadow: none,
1791
+ input-group-inset-item: (
1792
+ background-color: $cadmin-input-focus-bg,
1793
+ border-color: $cadmin-input-focus-border-color,
1794
+ ),
1795
+ ),
1796
+ disabled: (
1797
+ input-group-inset-item: (
1798
+ background-color: $cadmin-input-disabled-bg,
1799
+ border-color: $cadmin-input-disabled-border-color,
1800
+ ),
1801
+ ),
1802
+ ),
1803
+ $cadmin-input-group-inset
1804
+ );
1805
+
1806
+ // .input-group-inset[readonly]
1807
+
1808
+ $cadmin-input-group-inset-readonly: () !default;
1809
+ $cadmin-input-group-inset-readonly: map-deep-merge(
1810
+ (
1811
+ input-group-inset-item: (
1812
+ background-color: $cadmin-input-readonly-bg,
1813
+ border-color: $cadmin-input-readonly-border-color,
1814
+ color: $cadmin-input-readonly-color,
1815
+ cursor: $cadmin-input-readonly-cursor,
1816
+ ),
1817
+ focus: (
1818
+ input-group-inset-item: (
1819
+ background-color: $cadmin-input-readonly-focus-bg,
1820
+ border-color: $cadmin-input-readonly-focus-border-color,
1821
+ color: $cadmin-input-readonly-focus-color,
1822
+ ),
1823
+ ),
1824
+ ),
1825
+ $cadmin-input-group-inset-readonly
1826
+ );
1827
+
1467
1828
  // Input Group Stacked
1468
1829
 
1469
1830
  $cadmin-input-group-stacked-sm-down: () !default;
package/src/scss/cadmin/variables/_management-bar.scss CHANGED
@@ -1,11 +1,23 @@
1
1
  $cadmin-management-bar-base: () !default;
2
2
  $cadmin-management-bar-base: map-deep-merge(
3
3
  (
4
- link-border-radius: $cadmin-border-radius,
5
- link-outline: 0,
6
- link-transition: box-shadow 0.15s ease-in-out,
7
- link-focus-box-shadow: $cadmin-btn-focus-box-shadow,
8
- link-disabled-box-shadow: none,
4
+ border-color: transparent,
5
+ border-style: solid,
6
+ navbar-nav: (
7
+ nav-link: (
8
+ border-radius: $cadmin-border-radius,
9
+ outline: 0,
10
+ transition: box-shadow 0.15s ease-in-out,
11
+ focus: (
12
+ box-shadow: $cadmin-btn-focus-box-shadow,
13
+ ),
14
+ disabled: (
15
+ box-shadow: none,
16
+ ),
17
+ ),
18
+ ),
19
+ media-breakpoint-down: (),
20
+ media-breakpoint-up: (),
9
21
  ),
10
22
  $cadmin-management-bar-base
11
23
  );
@@ -39,18 +51,32 @@ $cadmin-management-bar-size: map-deep-merge(
39
51
  $cadmin-management-bar-light: () !default;
40
52
  $cadmin-management-bar-light: map-deep-merge(
41
53
  (
42
- bg: $cadmin-white,
43
- link-color: $cadmin-navbar-light-color,
44
- link-font-weight: $cadmin-font-weight-semi-bold,
45
- link-hover-color: $cadmin-gray-900,
46
- link-hover-bg: rgba($cadmin-gray-900, 0.03),
47
- link-focus-color: $cadmin-gray-900,
48
- link-focus-bg: rgba($cadmin-gray-900, 0.03),
49
- link-active-bg: rgba($cadmin-gray-900, 0.06),
50
- link-active-color: $cadmin-navbar-light-active-color,
51
- link-disabled-bg: transparent,
52
- link-disabled-color: $cadmin-navbar-light-disabled-color,
53
- link-disabled-opacity: 1,
54
+ background-color: $cadmin-white,
55
+ navbar-nav: (
56
+ nav-link: (
57
+ color: $cadmin-navbar-light-color,
58
+ font-weight: $cadmin-font-weight-semi-bold,
59
+ hover: (
60
+ color: $cadmin-gray-900,
61
+ background-color: rgba($cadmin-gray-900, 0.03),
62
+ ),
63
+ focus: (
64
+ color: $cadmin-gray-900,
65
+ background-color: rgba($cadmin-gray-900, 0.03),
66
+ ),
67
+ active: (
68
+ background-color: rgba($cadmin-gray-900, 0.06),
69
+ color: $cadmin-navbar-light-active-color,
70
+ ),
71
+ disabled: (
72
+ background-color: transparent,
73
+ color: $cadmin-navbar-light-disabled-color,
74
+ opacity: 1,
75
+ ),
76
+ ),
77
+ ),
78
+ media-breakpoint-down: (),
79
+ media-breakpoint-up: (),
54
80
  ),
55
81
  $cadmin-management-bar-light
56
82
  );
@@ -58,21 +84,35 @@ $cadmin-management-bar-light: map-deep-merge(
58
84
  $cadmin-management-bar-primary: () !default;
59
85
  $cadmin-management-bar-primary: map-deep-merge(
60
86
  (
61
- bg: $cadmin-primary-l3,
87
+ background-color: $cadmin-primary-l3,
62
88
  border-color: $cadmin-primary,
63
89
  color: $cadmin-navbar-light-color,
64
- link-border-radius: $cadmin-border-radius,
65
- link-color: $cadmin-navbar-light-color,
66
- link-font-weight: $cadmin-font-weight-semi-bold,
67
- link-hover-color: $cadmin-gray-900,
68
- link-hover-bg: rgba($cadmin-gray-900, 0.03),
69
- link-focus-color: $cadmin-gray-900,
70
- link-focus-bg: rgba($cadmin-gray-900, 0.03),
71
- link-active-bg: rgba($cadmin-gray-900, 0.06),
72
- link-active-color: $cadmin-navbar-light-active-color,
73
- link-disabled-bg: transparent,
74
- link-disabled-color: $cadmin-navbar-light-disabled-color,
75
- link-disabled-opacity: 1,
90
+ navbar-nav: (
91
+ nav-link: (
92
+ border-radius: $cadmin-border-radius,
93
+ color: $cadmin-navbar-light-color,
94
+ font-weight: $cadmin-font-weight-semi-bold,
95
+ hover: (
96
+ color: $cadmin-gray-900,
97
+ background-color: rgba($cadmin-gray-900, 0.03),
98
+ ),
99
+ focus: (
100
+ color: $cadmin-gray-900,
101
+ background-color: rgba($cadmin-gray-900, 0.03),
102
+ ),
103
+ active: (
104
+ background-color: rgba($cadmin-gray-900, 0.06),
105
+ color: $cadmin-navbar-light-active-color,
106
+ ),
107
+ disabled: (
108
+ background-color: transparent,
109
+ color: $cadmin-navbar-light-disabled-color,
110
+ opacity: 1,
111
+ ),
112
+ ),
113
+ ),
114
+ media-breakpoint-down: (),
115
+ media-breakpoint-up: (),
76
116
  ),
77
117
  $cadmin-management-bar-primary
78
118
  );
package/src/scss/cadmin/variables/_navigation-bar.scss CHANGED
@@ -24,10 +24,22 @@ $cadmin-navigation-bar-size: map-deep-merge(
24
24
  $cadmin-navigation-bar-base: () !default;
25
25
  $cadmin-navigation-bar-base: map-deep-merge(
26
26
  (
27
- link-border-radius: 0,
28
- link-outline: 0,
29
- link-focus-box-shadow: $cadmin-btn-focus-box-shadow,
30
- link-disabled-box-shadow: none,
27
+ border-color: transparent,
28
+ border-style: solid,
29
+ navbar-nav: (
30
+ nav-link: (
31
+ border-radius: 0,
32
+ outline: 0,
33
+ focus: (
34
+ box-shadow: $cadmin-btn-focus-box-shadow,
35
+ ),
36
+ disabled: (
37
+ box-shadow: none,
38
+ ),
39
+ ),
40
+ ),
41
+ media-breakpoint-down: (),
42
+ media-breakpoint-up: (),
31
43
  ),
32
44
  $cadmin-navigation-bar-base
33
45
  );
@@ -35,15 +47,55 @@ $cadmin-navigation-bar-base: map-deep-merge(
35
47
  $cadmin-navigation-bar-light: () !default;
36
48
  $cadmin-navigation-bar-light: map-deep-merge(
37
49
  (
38
- bg: $cadmin-white,
50
+ background-color: $cadmin-white,
39
51
  border-color: $cadmin-gray-200,
40
- link-color: $cadmin-navbar-light-color,
41
- link-font-weight: $cadmin-font-weight-semi-bold,
42
- link-hover-color: $cadmin-gray-900,
43
- link-focus-color: $cadmin-gray-900,
44
- link-active-color: $cadmin-navbar-light-active-color,
45
- link-disabled-color: $cadmin-gray-600,
46
- link-disabled-opacity: $cadmin-btn-disabled-opacity,
52
+ navbar-nav: (
53
+ nav-link: (
54
+ color: $cadmin-navbar-light-color,
55
+ font-weight: $cadmin-font-weight-semi-bold,
56
+ hover: (
57
+ color: $cadmin-gray-900,
58
+ ),
59
+ focus: (
60
+ color: $cadmin-gray-900,
61
+ ),
62
+ active: (
63
+ color: $cadmin-navbar-light-active-color,
64
+ ),
65
+ disabled: (
66
+ color: $cadmin-gray-600,
67
+ opacity: $cadmin-btn-disabled-opacity,
68
+ ),
69
+ ),
70
+ ),
71
+ media-breakpoint-down: (
72
+ sm: (
73
+ navbar-expand-md: (
74
+ navbar-collapse: (
75
+ navbar-nav: (
76
+ dropdown-item: (
77
+ color: $cadmin-navbar-light-color,
78
+ font-weight: $cadmin-font-weight-semi-bold,
79
+ hover: (
80
+ color: $cadmin-gray-900,
81
+ ),
82
+ focus: (
83
+ color: $cadmin-gray-900,
84
+ ),
85
+ active: (
86
+ color: $cadmin-navbar-light-active-color,
87
+ ),
88
+ disabled: (
89
+ color: $cadmin-gray-600,
90
+ opacity: $cadmin-btn-disabled-opacity,
91
+ ),
92
+ ),
93
+ ),
94
+ ),
95
+ ),
96
+ ),
97
+ ),
98
+ media-breakpoint-up: (),
47
99
  ),
48
100
  $cadmin-navigation-bar-light
49
101
  );
@@ -51,17 +103,61 @@ $cadmin-navigation-bar-light: map-deep-merge(
51
103
  $cadmin-navigation-bar-secondary: () !default;
52
104
  $cadmin-navigation-bar-secondary: map-deep-merge(
53
105
  (
54
- bg: $cadmin-secondary-d1,
106
+ background-color: $cadmin-secondary-d1,
55
107
  color: $cadmin-white,
56
- link-color: $cadmin-secondary-l2,
57
- link-font-weight: $cadmin-font-weight-semi-bold,
58
- link-hover-color: $cadmin-white,
59
- link-focus-color: $cadmin-white,
60
- link-active-color: $cadmin-white,
61
- link-disabled-color: $cadmin-gray-400,
62
- link-disabled-opacity: $cadmin-btn-disabled-opacity,
63
- brand-color: rgba(255, 255, 255, 0.9),
64
- brand-hover-color: rgba(255, 255, 255, 0.9),
108
+ navbar-nav: (
109
+ nav-link: (
110
+ color: $cadmin-secondary-l2,
111
+ font-weight: $cadmin-font-weight-semi-bold,
112
+ hover: (
113
+ color: $cadmin-white,
114
+ ),
115
+ focus: (
116
+ color: $cadmin-white,
117
+ ),
118
+ active: (
119
+ color: $cadmin-white,
120
+ ),
121
+ disabled: (
122
+ color: $cadmin-gray-400,
123
+ opacity: $cadmin-btn-disabled-opacity,
124
+ ),
125
+ ),
126
+ ),
127
+ navbar-brand: (
128
+ color: rgba(255, 255, 255, 0.9),
129
+ hover: (
130
+ color: rgba(255, 255, 255, 0.9),
131
+ ),
132
+ ),
133
+ media-breakpoint-down: (
134
+ sm: (
135
+ navbar-expand-md: (
136
+ navbar-collapse: (
137
+ navbar-nav: (
138
+ dropdown-item: (
139
+ color: $cadmin-secondary-l2,
140
+ font-weight: $cadmin-font-weight-semi-bold,
141
+ hover: (
142
+ color: $cadmin-white,
143
+ ),
144
+ focus: (
145
+ color: $cadmin-white,
146
+ ),
147
+ active: (
148
+ color: $cadmin-white,
149
+ ),
150
+ disabled: (
151
+ color: $cadmin-gray-400,
152
+ opacity: $cadmin-btn-disabled-opacity,
153
+ ),
154
+ ),
155
+ ),
156
+ ),
157
+ ),
158
+ ),
159
+ ),
160
+ media-breakpoint-up: (),
65
161
  ),
66
162
  $cadmin-navigation-bar-secondary
67
163
  );