| @@ -26,10 +26,90 @@ | ||
| 26 | 26 | .wp-block-group { |
| 27 | 27 | --lp-container-max-width: var(--wp--style--global--wide-size); |
| 28 | 28 | } |
| 29 | 29 | |
| 30 | +/** | |
| 31 | +* Style for the buttons | |
| 32 | +*/ | |
| 33 | +.lp-btn-edit-primary { | |
| 34 | + border: none; | |
| 35 | + background: #135e96; | |
| 36 | + color: #fff; | |
| 37 | +} | |
| 38 | +.lp-btn-edit-primary:not(.active) { | |
| 39 | + opacity: 0.5; | |
| 40 | +} | |
| 41 | +.lp-btn-edit-primary:hover, .lp-btn-edit-primary.active, .lp-btn-edit-primary.active:hover { | |
| 42 | + background: #135E96; | |
| 43 | + color: #fff; | |
| 44 | + opacity: 1; | |
| 45 | +} | |
| 46 | + | |
| 47 | +/* 5. Minimal Bottom Line */ | |
| 48 | +.btn-line::after { | |
| 49 | + content: ""; | |
| 50 | + position: absolute; | |
| 51 | + bottom: 0; | |
| 52 | + right: 0; | |
| 53 | + height: 4px; | |
| 54 | + width: 0%; | |
| 55 | + background-color: #38bdf8; | |
| 56 | + animation: lineLoad 2s ease-in-out infinite; | |
| 57 | +} | |
| 58 | + | |
| 59 | +@keyframes lineLoad { | |
| 60 | + 0% { | |
| 61 | + width: 0%; | |
| 62 | + right: 0; | |
| 63 | + } | |
| 64 | + 50% { | |
| 65 | + width: 100%; | |
| 66 | + right: 0; | |
| 67 | + } | |
| 68 | + 100% { | |
| 69 | + width: 0%; | |
| 70 | + right: 100%; | |
| 71 | + } | |
| 72 | +} | |
| 73 | +.lp-button { | |
| 74 | + padding: 8px 16px; | |
| 75 | + border: 1px solid var(--lp-border-color, #E2E0DB); | |
| 76 | + border-radius: var(--lp-border-radius, 5px); | |
| 77 | + color: #374151; | |
| 78 | + font-weight: 500; | |
| 79 | + text-decoration: none; | |
| 80 | + cursor: pointer; | |
| 81 | +} | |
| 82 | +.lp-button.loading { | |
| 83 | + position: relative; | |
| 84 | + display: flex; | |
| 85 | + align-items: center; | |
| 86 | + justify-content: center; | |
| 87 | + pointer-events: none; | |
| 88 | + color: rgba(0, 0, 0, 0.2) !important; | |
| 89 | +} | |
| 90 | +.lp-button.loading:before { | |
| 91 | + position: absolute; | |
| 92 | + inset: 0; | |
| 93 | + display: flex; | |
| 94 | + align-items: center; | |
| 95 | + justify-content: center; | |
| 96 | + font-family: "lp-icon"; | |
| 97 | + content: "\f110"; | |
| 98 | + animation: lp-rotating 1s linear infinite; | |
| 99 | + line-height: 1; | |
| 100 | + font-variant: normal; | |
| 101 | + text-transform: none; | |
| 102 | + -webkit-font-smoothing: antialiased; | |
| 103 | + -moz-osx-font-smoothing: grayscale; | |
| 104 | + color: black; | |
| 105 | +} | |
| 106 | + | |
| 30 | 107 | .learn-press-message { |
| 31 | 108 | position: relative; |
| 109 | + display: flex; | |
| 110 | + align-items: center; | |
| 111 | + margin: 0 !important; | |
| 32 | 112 | padding: 10px 20px; |
| 33 | 113 | border-radius: var(--lp-border-radius, 5px); |
| 34 | 114 | background-color: #E5F7FF; |
| 35 | 115 | color: #007AFF; |
| @@ -34,24 +114,54 @@ | ||
| 34 | 114 | background-color: #E5F7FF; |
| 35 | 115 | color: #007AFF; |
| 36 | 116 | max-width: 100%; |
| 37 | 117 | } |
| 118 | +.learn-press-message::before { | |
| 119 | + display: inline-block; | |
| 120 | + margin-left: 8px; | |
| 121 | + font-family: "lp-icon"; | |
| 122 | + font-size: 20px; | |
| 123 | + font-style: normal; | |
| 124 | + font-weight: normal; | |
| 125 | + line-height: 1; | |
| 126 | +} | |
| 38 | 127 | .learn-press-message.error { |
| 39 | 128 | background-color: #FEE5E5; |
| 40 | 129 | color: #FF3B30; |
| 130 | + border: 1px solid #E31A1A; | |
| 131 | + padding: 10px 20px; | |
| 41 | 132 | } |
| 133 | +.learn-press-message.error::before { | |
| 134 | + content: "\f071"; | |
| 135 | + color: #E31A1A; | |
| 136 | +} | |
| 42 | 137 | .learn-press-message.warning { |
| 43 | 138 | background-color: #FEF7E6; |
| 44 | 139 | color: #FF9500; |
| 140 | + border: 1px solid #F8A100; | |
| 45 | 141 | } |
| 142 | +.learn-press-message.warning::before { | |
| 143 | + content: "\f06a"; | |
| 144 | + color: #F8A100; | |
| 145 | +} | |
| 46 | 146 | .learn-press-message.success { |
| 47 | 147 | background-color: #EBF8E5; |
| 48 | 148 | color: #3AB500; |
| 149 | + border: 1px solid #28A746; | |
| 49 | 150 | } |
| 151 | +.learn-press-message.success::before { | |
| 152 | + content: "\f058"; | |
| 153 | + color: #28A746; | |
| 154 | +} | |
| 50 | 155 | .learn-press-message.info { |
| 51 | 156 | background-color: rgba(0, 122, 255, 0.1019607843); |
| 52 | 157 | color: #007AFF; |
| 158 | + border: 1px solid #2E91FA; | |
| 53 | 159 | } |
| 160 | +.learn-press-message.info::before { | |
| 161 | + content: "\e931"; | |
| 162 | + color: #2E91FA; | |
| 163 | +} | |
| 54 | 164 | .learn-press-message a { |
| 55 | 165 | text-decoration: underline; |
| 56 | 166 | } |
| 57 | 167 | |
| @@ -663,18 +773,22 @@ | ||
| 663 | 773 | box-shadow: none; |
| 664 | 774 | outline: none; |
| 665 | 775 | } |
| 666 | 776 | .course-curriculum .section-item__loadmore.loading button:before { |
| 667 | - display: inline-block; | |
| 777 | + position: absolute; | |
| 778 | + inset: 0; | |
| 779 | + display: flex; | |
| 780 | + align-items: center; | |
| 781 | + justify-content: center; | |
| 668 | 782 | font-family: "lp-icon"; |
| 669 | 783 | content: "\f110"; |
| 670 | 784 | animation: lp-rotating 1s linear infinite; |
| 671 | - margin-left: 5px; | |
| 785 | + line-height: 1; | |
| 672 | 786 | font-variant: normal; |
| 673 | 787 | text-transform: none; |
| 674 | 788 | -webkit-font-smoothing: antialiased; |
| 675 | 789 | -moz-osx-font-smoothing: grayscale; |
| 676 | - vertical-align: middle; | |
| 790 | + color: black; | |
| 677 | 791 | } |
| 678 | 792 | .course-curriculum .section-header { |
| 679 | 793 | display: table; |
| 680 | 794 | width: 100%; |
| @@ -889,18 +1003,22 @@ | ||
| 889 | 1003 | margin-top: 20px; |
| 890 | 1004 | margin-bottom: 20px; |
| 891 | 1005 | } |
| 892 | 1006 | .course-curriculum .curriculum-more__button.loading:before { |
| 893 | - display: inline-block; | |
| 1007 | + position: absolute; | |
| 1008 | + inset: 0; | |
| 1009 | + display: flex; | |
| 1010 | + align-items: center; | |
| 1011 | + justify-content: center; | |
| 894 | 1012 | font-family: "lp-icon"; |
| 895 | 1013 | content: "\f110"; |
| 896 | 1014 | animation: lp-rotating 1s linear infinite; |
| 897 | - margin-left: 5px; | |
| 1015 | + line-height: 1; | |
| 898 | 1016 | font-variant: normal; |
| 899 | 1017 | text-transform: none; |
| 900 | 1018 | -webkit-font-smoothing: antialiased; |
| 901 | 1019 | -moz-osx-font-smoothing: grayscale; |
| 902 | - vertical-align: middle; | |
| 1020 | + color: black; | |
| 903 | 1021 | } |
| 904 | 1022 | |
| 905 | 1023 | body .content-item-summary .form-button-finish-course, body .lp-quiz-buttons .form-button-finish-course { |
| 906 | 1024 | float: left; |
| @@ -1143,8 +1261,11 @@ | ||
| 1143 | 1261 | content: "\e921"; |
| 1144 | 1262 | color: #999; |
| 1145 | 1263 | } |
| 1146 | 1264 | |
| 1265 | +.info-learning .course-progress > div { | |
| 1266 | + margin-bottom: 8px; | |
| 1267 | +} | |
| 1147 | 1268 | .info-learning .course-progress__line { |
| 1148 | 1269 | width: 100%; |
| 1149 | 1270 | background: #ccc; |
| 1150 | 1271 | height: 5px; |
| @@ -1173,8 +1294,11 @@ | ||
| 1173 | 1294 | width: 2px; |
| 1174 | 1295 | height: 100%; |
| 1175 | 1296 | background: var(--lp-secondary-color); |
| 1176 | 1297 | } |
| 1298 | +.info-learning .start-date, .info-learning .end-date { | |
| 1299 | + margin-bottom: 8px; | |
| 1300 | +} | |
| 1177 | 1301 | |
| 1178 | 1302 | .lp-single-course .comment-form .comment-form-url, |
| 1179 | 1303 | .lp-single-course .comment-form .comment-form-email, |
| 1180 | 1304 | .lp-single-course .comment-form .comment-form-author, |
| @@ -1330,8 +1454,26 @@ | ||
| 1330 | 1454 | min-height: 100vh; |
| 1331 | 1455 | text-align: center; |
| 1332 | 1456 | align-items: center; |
| 1333 | 1457 | justify-content: center; |
| 1458 | + /*.lp-button { | |
| 1459 | + cursor: pointer; | |
| 1460 | + border: 1px solid $border-color; | |
| 1461 | + border-radius: $border-radius-global; | |
| 1462 | + padding: $spacing-base-2x $spacing-base-4x; | |
| 1463 | + | |
| 1464 | + &.loading { | |
| 1465 | + pointer-events: none; | |
| 1466 | + opacity: 0.8; | |
| 1467 | + @include loading(); | |
| 1468 | + } | |
| 1469 | + | |
| 1470 | + &:hover { | |
| 1471 | + border-color: $color-primary; | |
| 1472 | + color: #fff; | |
| 1473 | + background: $color-primary; | |
| 1474 | + } | |
| 1475 | + }*/ | |
| 1334 | 1476 | } |
| 1335 | 1477 | .lp-modal-dialog .learn-press-message { |
| 1336 | 1478 | width: auto; |
| 1337 | 1479 | margin: 0 !important; |
| @@ -1400,35 +1542,8 @@ | ||
| 1400 | 1542 | display: flex; |
| 1401 | 1543 | align-items: center; |
| 1402 | 1544 | gap: 10px; |
| 1403 | 1545 | } |
| 1404 | -.lp-modal-dialog .lp-button { | |
| 1405 | - cursor: pointer; | |
| 1406 | - border: 1px solid var(--lp-border-color, #E2E0DB); | |
| 1407 | - border-radius: var(--lp-border-radius, 5px); | |
| 1408 | - padding: 8px 16px; | |
| 1409 | -} | |
| 1410 | -.lp-modal-dialog .lp-button.loading { | |
| 1411 | - pointer-events: none; | |
| 1412 | - opacity: 0.8; | |
| 1413 | -} | |
| 1414 | -.lp-modal-dialog .lp-button.loading:before { | |
| 1415 | - display: inline-block; | |
| 1416 | - font-family: "lp-icon"; | |
| 1417 | - content: "\f110"; | |
| 1418 | - animation: lp-rotating 1s linear infinite; | |
| 1419 | - margin-left: 5px; | |
| 1420 | - font-variant: normal; | |
| 1421 | - text-transform: none; | |
| 1422 | - -webkit-font-smoothing: antialiased; | |
| 1423 | - -moz-osx-font-smoothing: grayscale; | |
| 1424 | - vertical-align: middle; | |
| 1425 | -} | |
| 1426 | -.lp-modal-dialog .lp-button:hover { | |
| 1427 | - border-color: var(--lp-primary-color, #ffb606); | |
| 1428 | - color: #fff; | |
| 1429 | - background: var(--lp-primary-color, #ffb606); | |
| 1430 | -} | |
| 1431 | 1546 | |
| 1432 | 1547 | .lp-button.btn-finish-course { |
| 1433 | 1548 | cursor: pointer; |
| 1434 | 1549 | width: 100%; |
| @@ -1447,24 +1562,8 @@ | ||
| 1447 | 1562 | .lp-button.btn-finish-course:hover { |
| 1448 | 1563 | background-color: var(--lp-secondary-color, #442e66); |
| 1449 | 1564 | border-color: var(--lp-secondary-color, #442e66); |
| 1450 | 1565 | } |
| 1451 | -.lp-button.btn-finish-course.loading { | |
| 1452 | - pointer-events: none; | |
| 1453 | - opacity: 0.8; | |
| 1454 | -} | |
| 1455 | -.lp-button.btn-finish-course.loading:before { | |
| 1456 | - display: inline-block; | |
| 1457 | - font-family: "lp-icon"; | |
| 1458 | - content: "\f110"; | |
| 1459 | - animation: lp-rotating 1s linear infinite; | |
| 1460 | - margin-left: 5px; | |
| 1461 | - font-variant: normal; | |
| 1462 | - text-transform: none; | |
| 1463 | - -webkit-font-smoothing: antialiased; | |
| 1464 | - -moz-osx-font-smoothing: grayscale; | |
| 1465 | - vertical-align: middle; | |
| 1466 | -} | |
| 1467 | 1566 | |
| 1468 | 1567 | /** |
| 1469 | 1568 | * Mixin |
| 1470 | 1569 | */ |
| @@ -1534,18 +1633,22 @@ | ||
| 1534 | 1633 | opacity: 0.8; |
| 1535 | 1634 | } |
| 1536 | 1635 | .wp-block-learnpress-course-button-read-more.loading:before, |
| 1537 | 1636 | .wp-block-learnpress-course-button.loading:before { |
| 1538 | - display: inline-block; | |
| 1637 | + position: absolute; | |
| 1638 | + inset: 0; | |
| 1639 | + display: flex; | |
| 1640 | + align-items: center; | |
| 1641 | + justify-content: center; | |
| 1539 | 1642 | font-family: "lp-icon"; |
| 1540 | 1643 | content: "\f110"; |
| 1541 | 1644 | animation: lp-rotating 1s linear infinite; |
| 1542 | - margin-left: 5px; | |
| 1645 | + line-height: 1; | |
| 1543 | 1646 | font-variant: normal; |
| 1544 | 1647 | text-transform: none; |
| 1545 | 1648 | -webkit-font-smoothing: antialiased; |
| 1546 | 1649 | -moz-osx-font-smoothing: grayscale; |
| 1547 | - vertical-align: middle; | |
| 1650 | + color: black; | |
| 1548 | 1651 | } |
| 1549 | 1652 | |
| 1550 | 1653 | @media (min-width: 992px) { |
| 1551 | 1654 | .lp-block-course-sidebar { |
| @@ -2161,22 +2264,5 @@ | ||
| 2161 | 2264 | } |
| 2162 | 2265 | |
| 2163 | 2266 | .lp-sidebar-toggle__open .js-block-sidebar { |
| 2164 | 2267 | display: block; |
| 2165 | -} | |
| 2166 | - | |
| 2167 | -.lp-button.loading { | |
| 2168 | - pointer-events: none; | |
| 2169 | - opacity: 0.8; | |
| 2170 | -} | |
| 2171 | -.lp-button.loading:before { | |
| 2172 | - display: inline-block; | |
| 2173 | - font-family: "lp-icon"; | |
| 2174 | - content: "\f110"; | |
| 2175 | - animation: lp-rotating 1s linear infinite; | |
| 2176 | - margin-left: 5px; | |
| 2177 | - font-variant: normal; | |
| 2178 | - text-transform: none; | |
| 2179 | - -webkit-font-smoothing: antialiased; | |
| 2180 | - -moz-osx-font-smoothing: grayscale; | |
| 2181 | - vertical-align: middle; | |
| 2182 | 2268 | } |
