vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fixed table checkboxes at landing demo

pull/5161/head
Cagatay Civici 2024-01-25 15:34:12 +03:00
parent cc81f18d0e
commit 1336316ea2
4 changed files with 116 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
public/styles/landing/themes/bootstrap4-dark-blue/theme.css
View File

@ -250,10 +250,26 @@
padding: 0; padding: 0;
} }
} }
.landing-themes .p-checkbox { .landing-themes .p-checkbox {
width: 20px; width: 20px;
height: 20px; height: 20px;
} }
.landing-themes .p-checkbox .p-checkbox-input {
appearance: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
opacity: 0;
z-index: 1;
outline: 0 none;
border: 1px solid #3f4b5b;
border-radius: 4px;
}
.landing-themes .p-checkbox .p-checkbox-box { .landing-themes .p-checkbox .p-checkbox-box {
border: 1px solid #3f4b5b; border: 1px solid #3f4b5b;
background: #20262e; background: #20262e;
@ -262,35 +278,35 @@
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
border-radius: 4px; border-radius: 4px;
transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
outline-color: transparent;
} }
.landing-themes .p-checkbox .p-checkbox-box .p-checkbox-icon { .landing-themes .p-checkbox .p-checkbox-box .p-checkbox-icon {
transition-duration: 0.15s; transition-duration: 0.15s;
color: #151515; color: #151515;
font-size: 14px; font-size: 14px;
} }
.landing-themes .p-checkbox .p-checkbox-box.p-highlight { .landing-themes .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
width: 14px;
height: 14px;
}
.landing-themes .p-checkbox.p-highlight .p-checkbox-box {
border-color: #8dd0ff; border-color: #8dd0ff;
background: #8dd0ff; background: #8dd0ff;
} }
.landing-themes .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover { .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
border-color: #3f4b5b;
}
.landing-themes .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
border-color: #1dadff; border-color: #1dadff;
background: #1dadff; background: #1dadff;
color: #151515; color: #151515;
} }
.landing-themes .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { .landing-themes .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
border-color: #3f4b5b;
}
.landing-themes .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 1px #e3f3fe; box-shadow: 0 0 0 1px #e3f3fe;
border-color: #8dd0ff; border-color: #8dd0ff;
} }
.landing-themes .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover {
border-color: #1dadff;
background: #1dadff;
color: #151515;
}
.landing-themes .p-checkbox.p-invalid > .p-checkbox-box { .landing-themes .p-checkbox.p-invalid > .p-checkbox-box {
border-color: #f19ea6; border-color: #f19ea6;
} }

37
public/styles/landing/themes/bootstrap4-light-blue/theme.css
View File

@ -251,6 +251,21 @@
width: 20px; width: 20px;
height: 20px; height: 20px;
} }
.landing-themes .p-checkbox .p-checkbox-input {
appearance: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
opacity: 0;
z-index: 1;
outline: 0 none;
border: 2px solid #ced4da;
border-radius: 4px;
}
.landing-themes .p-checkbox .p-checkbox-box { .landing-themes .p-checkbox .p-checkbox-box {
border: 2px solid #ced4da; border: 2px solid #ced4da;
background: #ffffff; background: #ffffff;
@ -259,35 +274,35 @@
color: #212529; color: #212529;
border-radius: 4px; border-radius: 4px;
transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
outline-color: transparent;
} }
.landing-themes .p-checkbox .p-checkbox-box .p-checkbox-icon { .landing-themes .p-checkbox .p-checkbox-box .p-checkbox-icon {
transition-duration: 0.15s; transition-duration: 0.15s;
color: #ffffff; color: #ffffff;
font-size: 14px; font-size: 14px;
} }
.landing-themes .p-checkbox .p-checkbox-box.p-highlight { .landing-themes .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
width: 14px;
height: 14px;
}
.landing-themes .p-checkbox.p-highlight .p-checkbox-box {
border-color: #007bff; border-color: #007bff;
background: #007bff; background: #007bff;
} }
.landing-themes .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover { .landing-themes .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
border-color: #ced4da;
}
.landing-themes .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
border-color: #0062cc; border-color: #0062cc;
background: #0062cc; background: #0062cc;
color: #ffffff; color: #ffffff;
} }
.landing-themes .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { .landing-themes .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
border-color: #ced4da;
}
.landing-themes .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
border-color: #007bff; border-color: #007bff;
} }
.landing-themes .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover {
border-color: #0062cc;
background: #0062cc;
color: #ffffff;
}
.landing-themes .p-checkbox.p-invalid > .p-checkbox-box { .landing-themes .p-checkbox.p-invalid > .p-checkbox-box {
border-color: #dc3545; border-color: #dc3545;
} }

37
public/styles/landing/themes/md-dark-indigo/theme.css
View File

@ -278,6 +278,21 @@
width: 18px; width: 18px;
height: 18px; height: 18px;
} }
.landing-themes .p-checkbox .p-checkbox-input {
appearance: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
opacity: 0;
z-index: 1;
outline: 0 none;
border: 2px solid rgba(255, 255, 255, 0.7);
border-radius: 4px;
}
.landing-themes .p-checkbox .p-checkbox-box { .landing-themes .p-checkbox .p-checkbox-box {
border: 2px solid rgba(255, 255, 255, 0.7); border: 2px solid rgba(255, 255, 255, 0.7);
background: #1e1e1e; background: #1e1e1e;
@ -286,35 +301,35 @@
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
border-radius: 4px; border-radius: 4px;
transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
outline-color: transparent;
} }
.landing-themes .p-checkbox .p-checkbox-box .p-checkbox-icon { .landing-themes .p-checkbox .p-checkbox-box .p-checkbox-icon {
transition-duration: 0.2s; transition-duration: 0.2s;
color: #121212; color: #121212;
font-size: 14px; font-size: 14px;
} }
.landing-themes .p-checkbox .p-checkbox-box.p-highlight { .landing-themes .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
width: 14px;
height: 14px;
}
.landing-themes .p-checkbox.p-highlight .p-checkbox-box {
border-color: #9FA8DA; border-color: #9FA8DA;
background: #9FA8DA; background: #9FA8DA;
} }
.landing-themes .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover { .landing-themes .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
border-color: rgba(255, 255, 255, 0.6);
}
.landing-themes .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
border-color: #9FA8DA; border-color: #9FA8DA;
background: #9FA8DA; background: #9FA8DA;
color: #121212; color: #121212;
} }
.landing-themes .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { .landing-themes .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
border-color: rgba(255, 255, 255, 0.6);
}
.landing-themes .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: none; box-shadow: none;
border-color: #9FA8DA; border-color: #9FA8DA;
} }
.landing-themes .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover {
border-color: #9FA8DA;
background: #9FA8DA;
color: #121212;
}
.landing-themes .p-checkbox.p-invalid > .p-checkbox-box { .landing-themes .p-checkbox.p-invalid > .p-checkbox-box {
border-color: #f44435; border-color: #f44435;
} }

74
public/styles/landing/themes/md-light-indigo/theme.css
View File

@ -272,48 +272,48 @@
} }
} }
.landing-themes .p-checkbox { .landing-themes .p-checkbox {
width: 18px; border-radius: 50%;
height: 18px; transition: box-shadow 0.2s;
}
.landing-themes .p-checkbox .p-checkbox-input {
border-radius: 2px;
} }
.landing-themes .p-checkbox .p-checkbox-box { .landing-themes .p-checkbox .p-checkbox-box {
border: 2px solid #757575; border-color: #757575;
background: #ffffff; border-radius: 2px;
width: 18px; position: relative;
height: 18px;
color: rgba(0, 0, 0, 0.87);
border-radius: 4px;
transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
} }
.landing-themes .p-checkbox .p-checkbox-box .p-checkbox-icon { .landing-themes .p-checkbox.p-highlight .p-checkbox-box .p-checkbox-icon.pi-check:before {
transition-duration: 0.2s; content: "";
color: #ffffff; position: absolute;
font-size: 14px; top: 6px;
left: 1px;
border-right: 2px solid transparent;
border-bottom: 2px solid transparent;
transform: rotate(45deg);
transform-origin: 0% 100%;
animation: checkbox-check 125ms 50ms linear forwards;
} }
.landing-themes .p-checkbox .p-checkbox-box.p-highlight { .landing-themes .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) {
box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.04);
}
.landing-themes .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
border-color: #757575;
}
.landing-themes .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight {
box-shadow: 0 0 1px 10px rgba(63, 81, 181, 0.04);
}
.landing-themes .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) {
box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.12);
}
.landing-themes .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
border-color: #757575;
}
.landing-themes .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight {
box-shadow: 0 0 1px 10px rgba(63, 81, 181, 0.12);
}
.landing-themes .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight .p-checkbox-box {
border-color: #3F51B5; border-color: #3F51B5;
background: #3F51B5;
}
.landing-themes .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover {
border-color: #3F51B5;
background: #3F51B5;
color: #ffffff;
}
.landing-themes .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
border-color: rgba(0, 0, 0, 0.87);
}
.landing-themes .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: none;
border-color: #3F51B5;
}
.landing-themes .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover {
border-color: #3F51B5;
background: #3F51B5;
color: #ffffff;
}
.landing-themes .p-checkbox.p-invalid > .p-checkbox-box {
border-color: #B00020;
} }
.landing-themes .p-input-filled .p-checkbox .p-checkbox-box { .landing-themes .p-input-filled .p-checkbox .p-checkbox-box {
background-color: #f5f5f5; background-color: #f5f5f5;