DEV: Remove `fade-in` and use `jsuites.basic.css` instead

This commit is contained in:
Keegan George 2022-07-26 12:16:39 -07:00
parent 12e09ebad6
commit b2dffcc910
2 changed files with 2159 additions and 2804 deletions

View File

@ -866,28 +866,6 @@
}
};
jSuites.animation.fadeIn = function (element, done) {
element.style.display = "";
element.classList.add("fade-in");
setTimeout(function () {
element.classList.remove("fade-in");
if (typeof done == "function") {
done();
}
}, 2000);
};
jSuites.animation.fadeOut = function (element, done) {
element.classList.add("fade-out");
setTimeout(function () {
element.style.display = "none";
element.classList.remove("fade-out");
if (typeof done == "function") {
done();
}
}, 1000);
};
jSuites.calendar = function (el, options) {
// Already created, update options
if (el.calendar) {
@ -9885,11 +9863,6 @@
obj.show = function () {
document.body.appendChild(notification);
if (jSuites.getWindowWidth() > 800) {
jSuites.animation.fadeIn(notification);
} else {
jSuites.animation.slideTop(notification, 1);
}
};
obj.hide = function () {

View File

@ -15,6 +15,7 @@
--safe-area-bottom: env(safe-area-inset-bottom);
}
.jexcel_container {
[data-visible="false"] {
display: none;
}
@ -161,7 +162,6 @@ div[data-before]:before {
margin: 10px;
display: block;
animation: fadeIn 0.5s;
pointer-events: none;
}
@ -169,24 +169,6 @@ div[data-before]:before {
display: none;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/** Animations **/
.fade-in {
animation: fade-in 2s forwards;
}
.fade-out {
animation: fade-out 1s forwards;
}
.slide-left-in {
position: relative;
animation: slide-left-in 0.4s forwards;
@ -231,43 +213,6 @@ div[data-before]:before {
animation: spin 2s infinite linear;
}
/** Fadein and Fadeout **/
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 100;
}
}
@-webkit-keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 100;
}
}
@keyframes fade-out {
0% {
opacity: 100;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes fade-out {
0% {
opacity: 100;
}
100% {
opacity: 0;
}
}
/** Keyframes Left to Right **/
@keyframes slide-left-in {
0% {
@ -602,7 +547,7 @@ div[data-before]:before {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-flow: row wrap;
-webkit-flex-flow: row wrap;
justify-content: space-between;
align-items: center;
@ -1145,6 +1090,9 @@ div[data-before]:before {
box-sizing: border-box;
}
.jdropdown-content:empty {
}
.jdropdown-item {
white-space: nowrap;
text-align: left;
@ -1468,6 +1416,9 @@ div[data-before]:before {
/** List render **/
.jdropdown-list {
}
.jdropdown-list .jdropdown-container {
display: block;
}
@ -1714,120 +1665,6 @@ div[data-before]:before {
border-top-color: transparent;
}
.jmodal {
position: fixed;
top: 50%;
left: 50%;
width: 60%;
height: 60%;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
border: 1px solid #ccc;
background-color: #fff;
transform: translate(-50%, -50%);
box-sizing: border-box;
padding-top: 50px !important;
z-index: 9002;
border-radius: 4px;
}
.jmodal:before {
position: absolute;
top: 0;
left: 0;
width: 100%;
content: attr(title);
padding: 25px;
padding-bottom: 20px;
box-sizing: border-box;
font-size: 1.4em;
background-color: #fff;
border-radius: 8px 8px 0px 0px;
}
.jmodal_content {
padding: 22px;
overflow-y: auto;
max-height: 100%;
box-sizing: border-box;
height: -webkit-fill-available;
scrollbar-width: thin;
scrollbar-color: #333 transparent;
}
.jmodal_content::-webkit-scrollbar {
height: 12px;
}
.jmodal_content::-webkit-scrollbar {
width: 12px;
}
.jmodal_content::-webkit-scrollbar-track {
border: 1px solid #fff;
background: #eee;
}
.jmodal_content::-webkit-scrollbar-thumb {
border: 1px solid #fff;
background: #888;
}
.jmodal.no-title {
padding-top: initial !important;
}
.jmodal.no-title:before {
display: none;
}
.jmodal:after {
content: "";
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
position: absolute;
top: 0;
right: 0;
margin: 25px;
font-size: 24px;
width: 24px;
height: 24px;
cursor: pointer;
text-shadow: 0px 0px 5px #fff;
}
.jmodal_fullscreen {
width: 100% !important;
height: 100% !important;
top: 0px;
left: 0px;
transform: none;
border: 0px;
border-radius: 0px;
}
.jmodal_backdrop {
position: fixed;
top: 0px;
left: 0px;
min-width: 100%;
min-height: 100%;
background-color: rgba(0, 0, 0, 0.5);
border: 0px;
padding: 0px;
z-index: 8000;
display: none;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome and Opera */
}
.jnotification {
position: fixed;
z-index: 10000;
@ -1980,8 +1817,8 @@ div[data-before]:before {
position: absolute;
top: 0;
display: none;
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12),
0 2px 4px -1px rgba(0, 0, 0, 0.2);
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14),
0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
border-radius: 4px;
background-color: #fff;
padding: 4px;
@ -2033,46 +1870,6 @@ div[data-before]:before {
flex-wrap: wrap;
}
.jprogressbar {
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
box-sizing: border-box;
background: #fff;
-webkit-tap-highlight-color: transparent;
display: inline-block;
box-sizing: border-box;
cursor: pointer;
border: 1px solid #ccc;
position: relative;
}
.jprogressbar::before {
content: attr(data-value);
position: absolute;
margin: 5px;
margin-left: 10px;
}
.jprogressbar-header::placeholder {
color: #000;
}
.jprogressbar::focus {
outline: auto 5px -webkit-focus-ring-color;
}
.jprogressbar > div {
background-color: #eee;
background-color: red;
box-sizing: border-box;
height: 31px;
}
.jrating {
display: flex;
}
@ -2092,357 +1889,6 @@ div[data-before]:before {
background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='red'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
}
.jsearch {
position: relative;
display: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.jsearch_container {
position: absolute;
box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.302),
0 2px 6px 2px rgba(60, 64, 67, 0.149);
border: none;
-webkit-border-radius: 4px;
border-radius: 4px;
width: 280px;
padding: 8px 0;
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-webkit-transition: opacity 0.218s;
transition: opacity 0.218s;
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.2);
cursor: pointer;
margin: 0;
min-width: 300px;
outline: none;
width: auto;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.jsearch_container:empty:after {
content: attr(data-placeholder);
}
.jsearch_container > div {
color: #333;
cursor: pointer;
display: -webkit-box;
display: -webkit-flex;
display: flex;
padding: 5px 10px;
user-select: none;
-webkit-align-items: center;
align-items: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.jsearch_container > div:hover {
background-color: #e8eaed;
}
.jsearch_container > div > img {
width: 32px;
height: 32px;
user-select: none;
border-radius: 16px;
margin-right: 2px;
}
.jsearch_container > div > div {
overflow: hidden;
text-overflow: ellipsis;
margin-left: 2px;
max-width: 300px;
white-space: nowrap;
user-select: none;
}
.jsearch_container .selected {
background-color: #e8eaed;
}
.jslider {
outline: none;
}
.jslider-focus {
width: 100% !important;
height: 100% !important;
}
.jslider-focus img {
display: none;
}
.jslider img {
width: 100px;
}
.jslider-left::before {
position: fixed;
left: 15px;
top: 50%;
content: "arrow_back_ios";
color: #fff;
width: 30px;
height: 30px;
font-family: "Material Icons";
font-size: 30px;
/* before it was 0px 0px 0px #000 */
text-shadow: 0px 0px 6px rgb(56, 56, 56);
text-align: center;
cursor: pointer;
}
.jslider-right::after {
position: fixed;
right: 15px;
top: 50%;
content: "arrow_forward_ios";
color: #fff;
width: 30px;
height: 30px;
font-family: "Material Icons";
font-size: 30px;
/* before it was 0px 0px 0px #000 */
text-shadow: 0px 0px 6px rgb(56, 56, 56);
text-align: center;
cursor: pointer;
}
.jslider-close {
width: 24px;
height: 24px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
position: fixed;
top: 15px;
right: 15px;
cursor: pointer;
z-index: 3000;
display: block !important;
}
.jslider-counter {
height: 24px;
background-color: transparent;
position: fixed;
left: 50%;
transform: translateX(-50%);
bottom: 15px;
cursor: pointer;
z-index: 3000;
display: flex;
display: -webkit-flex;
-webkit-justify-content: center;
-webkit-align-items: center;
-webkit-flex-direction: row;
justify-content: center;
align-items: center;
flex-direction: row;
}
.jslider-caption {
position: fixed;
max-width: 90vw;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
top: 15px;
left: 15px;
z-index: 3000;
color: #fff;
font-size: 1rem;
display: block !important;
}
.jslider-counter div {
width: 10px;
height: 10px;
background: #fff;
border-radius: 50%;
margin: 0px 5px;
display: block !important;
}
.jslider-counter .jslider-counter-focus {
background-color: cornflowerblue;
pointer-events: none;
}
.jslider-focus {
position: fixed;
left: 0;
top: 0;
width: 100%;
min-height: 100%;
max-height: 100%;
z-index: 2000;
margin: 0px;
box-sizing: border-box;
background-color: rgba(0, 0, 0, 0.8);
-webkit-transition-duration: 0.05s;
transition-duration: 0.05s;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
}
.jslider-focus img {
width: 50vw;
height: auto;
box-sizing: border-box;
margin: 0 auto;
vertical-align: middle;
display: none;
}
.jslider-focus img.jslider-vertical {
width: auto;
/* before it was 50vh */
height: 80vh;
}
@media only screen and (max-width: 576px) {
.jslider-focus img.jslider-vertical {
width: 99vw !important;
height: auto !important;
}
.jslider-focus img {
width: 100vw !important;
height: auto !important;
}
}
.jslider-grid {
display: -ms-grid;
display: grid;
grid-gap: 1px;
position: relative;
}
.jslider-grid[data-number="2"] {
-ms-grid-columns: 1fr 50%;
grid-template-columns: 1fr 50%;
}
.jslider-grid[data-number="3"] {
-ms-grid-columns: 1fr 33%;
grid-template-columns: 1fr 33%;
}
.jslider-grid[data-number="4"] {
-ms-grid-columns: 1fr 25%;
grid-template-columns: 1fr 25%;
}
.jslider-grid img {
display: none;
width: 100%;
height: 100%;
object-fit: cover;
}
.jslider-grid[data-total]:after {
content: attr(data-total) "+";
font-size: 1.5em;
position: absolute;
color: #fff;
right: 15px;
bottom: 6px;
}
.jslider-grid img:first-child {
-ms-grid-column: 1;
-ms-grid-row: 1;
grid-column: 1;
grid-row: 1;
display: block;
}
.jslider-grid[data-number="2"] img:nth-child(2) {
-ms-grid-column: 2;
-ms-grid-row: 1;
grid-column: 2;
grid-row: 1;
display: block;
}
.jslider-grid[data-number="3"] img:first-child {
-ms-grid-column: 1 / 2;
-ms-grid-row: 1 / 4;
grid-column: 1 / 2;
grid-row: 1 / 4;
}
.jslider-grid[data-number="3"] img:nth-child(2) {
-ms-grid-column: 2;
-ms-grid-row: 1;
grid-column: 2;
grid-row: 1;
display: block;
}
.jslider-grid[data-number="3"] img:nth-child(3) {
-ms-grid-column: 2;
-ms-grid-row: 2;
grid-column: 2;
grid-row: 2;
display: block;
}
.jslider-grid[data-number="4"] img:first-child {
-ms-grid-column: 1 / 2;
-ms-grid-row: 1 / 4;
grid-column: 1 / 2;
grid-row: 1 / 4;
}
.jslider-grid[data-number="4"] img:nth-child(2) {
-ms-grid-column: 2;
-ms-grid-row: 1;
grid-column: 2;
grid-row: 1;
display: block;
}
.jslider-grid[data-number="4"] img:nth-child(3) {
-ms-grid-column: 2;
-ms-grid-row: 2;
grid-column: 2;
grid-row: 2;
display: block;
}
.jslider-grid[data-number="4"] img:nth-child(4) {
-ms-grid-column: 2;
-ms-grid-row: 3;
grid-column: 2;
grid-row: 3;
display: block;
}
.jtabs {
max-width: 100vw;
position: relative;
@ -2584,76 +2030,11 @@ div[data-before]:before {
background-color: rgba(194, 197, 188, 0.884);
}
.jtags {
display: flex;
flex-wrap: wrap;
-ms-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
-ms-flex-pack: flex-start;
-webkit-justify-content: space-between;
justify-content: flex-start;
padding: 2px;
border: 1px solid #ccc;
}
.jtags.jtags-empty:not(.jtags-focus)::before {
position: absolute;
margin: 5px;
color: #ccc;
content: attr(data-placeholder);
}
.jtags > div {
padding: 3px;
padding-left: 10px;
padding-right: 22px;
position: relative;
border-radius: 1px;
margin: 2px;
display: block;
outline: none;
}
.jtags > div:empty:before {
content: " ";
white-space: pre;
}
.jtags > div::after {
content: "x";
position: absolute;
top: 4px;
right: 4px;
width: 12px;
height: 12px;
cursor: pointer;
font-size: 11px;
display: none;
}
.jtags_label {
background-color: #eeeeee !important;
}
.jtags_label::after {
display: inline-block !important;
}
.jtags_error::after {
color: #fff !important;
}
.jtags_error {
background-color: #d93025 !important;
color: #fff;
}
.jtoolbar-container {
border-radius: 2px;
margin-bottom: 5px;
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12),
0 2px 4px -1px rgba(0, 0, 0, 0.2);
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14),
0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
display: inline-flex !important;
}
@ -2827,8 +2208,8 @@ div[data-before]:before {
.jtoolbar-floating {
position: absolute;
display: none;
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12),
0 2px 4px -1px rgba(0, 0, 0, 0.2);
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14),
0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
border-radius: 4px;
background-color: #fff;
padding: 4px;
@ -2845,3 +2226,4 @@ div[data-before]:before {
display: flex;
flex-wrap: wrap;
}
}