text hover css

This commit is contained in:
Sas Andy
2024-05-06 13:27:01 +07:00
parent 559f0b41a2
commit f527eaa17e

View File

@@ -4670,6 +4670,504 @@ th:last-child {
border-radius: 0 6px 6px 0 !important;
}
/* ### TEXT HOVER */
/* ## TEXT HOVER PRIMARY */
a.text-hover-primary,
.text-hover-primary {
-webkit-transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, box-shadow 0.15s ease;
transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, box-shadow 0.15s ease,
-webkit-box-shadow 0.15s ease;
}
a.text-hover-primary:hover,
.text-hover-primary:hover {
-webkit-transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, box-shadow 0.15s ease;
transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, box-shadow 0.15s ease,
-webkit-box-shadow 0.15s ease;
color: var(--primary-hover) !important;
}
a.text-hover-primary:hover i,
.text-hover-primary:hover i {
color: var(--primary-hover) !important;
}
a.text-hover-primary:hover .svg-icon svg g [fill],
.text-hover-primary:hover .svg-icon svg g [fill] {
-webkit-transition: fill 0.3s ease;
transition: fill 0.3s ease;
fill: var(--primary-hover);
}
a.text-hover-primary:hover .svg-icon svg:hover g [fill],
.text-hover-primary:hover .svg-icon svg:hover g [fill] {
-webkit-transition: fill 0.3s ease;
transition: fill 0.3s ease;
}
.hoverable:hover a.text-hover-primary,
.hoverable:hover .text-hover-primary {
-webkit-transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, box-shadow 0.15s ease;
transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, box-shadow 0.15s ease,
-webkit-box-shadow 0.15s ease;
color: var(--primary-hover) !important;
}
.hoverable:hover a.text-hover-primary i,
.hoverable:hover .text-hover-primary i {
color: var(--primary-hover) !important;
}
.hoverable:hover a.text-hover-primary .svg-icon svg g [fill],
.hoverable:hover .text-hover-primary .svg-icon svg g [fill] {
-webkit-transition: fill 0.3s ease;
transition: fill 0.3s ease;
fill: var(--primary-hover) !important;
}
.hoverable:hover a.text-hover-primary .svg-icon svg:hover g [fill],
.hoverable:hover .text-hover-primary .svg-icon svg:hover g [fill] {
-webkit-transition: fill 0.3s ease;
transition: fill 0.3s ease;
}
/* ## TEXT HOVER SECONDARY */
a.text-hover-secondary,
.text-hover-secondary {
-webkit-transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, box-shadow 0.15s ease;
transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, box-shadow 0.15s ease,
-webkit-box-shadow 0.15s ease;
}
a.text-hover-secondary:hover,
.text-hover-secondary:hover {
-webkit-transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, box-shadow 0.15s ease;
transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, box-shadow 0.15s ease,
-webkit-box-shadow 0.15s ease;
color: var(--secondary-hover) !important;
}
a.text-hover-secondary:hover i,
.text-hover-secondary:hover i {
color: var(--secondary-hover) !important;
}
a.text-hover-secondary:hover .svg-icon svg g [fill],
.text-hover-secondary:hover .svg-icon svg g [fill] {
-webkit-transition: fill 0.3s ease;
transition: fill 0.3s ease;
fill: var(--secondary-hover);
}
a.text-hover-secondary:hover .svg-icon svg:hover g [fill],
.text-hover-secondary:hover .svg-icon svg:hover g [fill] {
-webkit-transition: fill 0.3s ease;
transition: fill 0.3s ease;
}
.hoverable:hover a.text-hover-secondary,
.hoverable:hover .text-hover-secondary {
-webkit-transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, box-shadow 0.15s ease;
transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, box-shadow 0.15s ease,
-webkit-box-shadow 0.15s ease;
color: var(--secondary-hover) !important;
}
.hoverable:hover a.text-hover-secondary i,
.hoverable:hover .text-hover-secondary i {
color: var(--secondary-hover) !important;
}
.hoverable:hover a.text-hover-secondary .svg-icon svg g [fill],
.hoverable:hover .text-hover-secondary .svg-icon svg g [fill] {
-webkit-transition: fill 0.3s ease;
transition: fill 0.3s ease;
fill: var(--secondary-hover) !important;
}
.hoverable:hover a.text-hover-secondary .svg-icon svg:hover g [fill],
.hoverable:hover .text-hover-secondary .svg-icon svg:hover g [fill] {
-webkit-transition: fill 0.3s ease;
transition: fill 0.3s ease;
}
/* ## TEXT HOVER SUCCESS */
a.text-hover-success,
.text-hover-success {
-webkit-transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, box-shadow 0.15s ease;
transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, box-shadow 0.15s ease,
-webkit-box-shadow 0.15s ease;
}
a.text-hover-success:hover,
.text-hover-success:hover {
-webkit-transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, box-shadow 0.15s ease;
transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, box-shadow 0.15s ease,
-webkit-box-shadow 0.15s ease;
color: var(--success-hover) !important;
}
a.text-hover-success:hover i,
.text-hover-success:hover i {
color: var(--success-hover) !important;
}
a.text-hover-success:hover .svg-icon svg g [fill],
.text-hover-success:hover .svg-icon svg g [fill] {
-webkit-transition: fill 0.3s ease;
transition: fill 0.3s ease;
fill: var(--success-hover);
}
a.text-hover-success:hover .svg-icon svg:hover g [fill],
.text-hover-success:hover .svg-icon svg:hover g [fill] {
-webkit-transition: fill 0.3s ease;
transition: fill 0.3s ease;
}
.hoverable:hover a.text-hover-success,
.hoverable:hover .text-hover-success {
-webkit-transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, box-shadow 0.15s ease;
transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, box-shadow 0.15s ease,
-webkit-box-shadow 0.15s ease;
color: var(--success-hover) !important;
}
.hoverable:hover a.text-hover-success i,
.hoverable:hover .text-hover-success i {
color: var(--success-hover) !important;
}
.hoverable:hover a.text-hover-success .svg-icon svg g [fill],
.hoverable:hover .text-hover-success .svg-icon svg g [fill] {
-webkit-transition: fill 0.3s ease;
transition: fill 0.3s ease;
fill: var(--success-hover) !important;
}
.hoverable:hover a.text-hover-success .svg-icon svg:hover g [fill],
.hoverable:hover .text-hover-success .svg-icon svg:hover g [fill] {
-webkit-transition: fill 0.3s ease;
transition: fill 0.3s ease;
}
/* ## TEXT HOVER INFO */
a.text-hover-info,
.text-hover-info {
-webkit-transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, box-shadow 0.15s ease;
transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, box-shadow 0.15s ease,
-webkit-box-shadow 0.15s ease;
}
a.text-hover-info:hover,
.text-hover-info:hover {
-webkit-transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, box-shadow 0.15s ease;
transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, box-shadow 0.15s ease,
-webkit-box-shadow 0.15s ease;
color: var(--info-hover) !important;
}
a.text-hover-info:hover i,
.text-hover-info:hover i {
color: var(--info-hover) !important;
}
a.text-hover-info:hover .svg-icon svg g [fill],
.text-hover-info:hover .svg-icon svg g [fill] {
-webkit-transition: fill 0.3s ease;
transition: fill 0.3s ease;
fill: var(--info-hover);
}
a.text-hover-info:hover .svg-icon svg:hover g [fill],
.text-hover-info:hover .svg-icon svg:hover g [fill] {
-webkit-transition: fill 0.3s ease;
transition: fill 0.3s ease;
}
.hoverable:hover a.text-hover-info,
.hoverable:hover .text-hover-info {
-webkit-transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, box-shadow 0.15s ease;
transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, box-shadow 0.15s ease,
-webkit-box-shadow 0.15s ease;
color: var(--info-hover) !important;
}
.hoverable:hover a.text-hover-info i,
.hoverable:hover .text-hover-info i {
color: var(--info-hover) !important;
}
.hoverable:hover a.text-hover-info .svg-icon svg g [fill],
.hoverable:hover .text-hover-info .svg-icon svg g [fill] {
-webkit-transition: fill 0.3s ease;
transition: fill 0.3s ease;
fill: var(--info-hover) !important;
}
.hoverable:hover a.text-hover-info .svg-icon svg:hover g [fill],
.hoverable:hover .text-hover-info .svg-icon svg:hover g [fill] {
-webkit-transition: fill 0.3s ease;
transition: fill 0.3s ease;
}
/* ## TEXT HOVER WARNING */
a.text-hover-warning,
.text-hover-warning {
-webkit-transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, box-shadow 0.15s ease;
transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, box-shadow 0.15s ease,
-webkit-box-shadow 0.15s ease;
}
a.text-hover-warning:hover,
.text-hover-warning:hover {
-webkit-transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, box-shadow 0.15s ease;
transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, box-shadow 0.15s ease,
-webkit-box-shadow 0.15s ease;
color: var(--warning-hover) !important;
}
a.text-hover-warning:hover i,
.text-hover-warning:hover i {
color: var(--warning-hover) !important;
}
a.text-hover-warning:hover .svg-icon svg g [fill],
.text-hover-warning:hover .svg-icon svg g [fill] {
-webkit-transition: fill 0.3s ease;
transition: fill 0.3s ease;
fill: var(--warning-hover);
}
a.text-hover-warning:hover .svg-icon svg:hover g [fill],
.text-hover-warning:hover .svg-icon svg:hover g [fill] {
-webkit-transition: fill 0.3s ease;
transition: fill 0.3s ease;
}
.hoverable:hover a.text-hover-warning,
.hoverable:hover .text-hover-warning {
-webkit-transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, box-shadow 0.15s ease;
transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, box-shadow 0.15s ease,
-webkit-box-shadow 0.15s ease;
color: var(--warning-hover) !important;
}
.hoverable:hover a.text-hover-warning i,
.hoverable:hover .text-hover-warning i {
color: var(--warning-hover) !important;
}
.hoverable:hover a.text-hover-warning .svg-icon svg g [fill],
.hoverable:hover .text-hover-warning .svg-icon svg g [fill] {
-webkit-transition: fill 0.3s ease;
transition: fill 0.3s ease;
fill: var(--warning-hover) !important;
}
.hoverable:hover a.text-hover-warning .svg-icon svg:hover g [fill],
.hoverable:hover .text-hover-warning .svg-icon svg:hover g [fill] {
-webkit-transition: fill 0.3s ease;
transition: fill 0.3s ease;
}
/* ## TEXT HOVER DANGER */
a.text-hover-danger,
.text-hover-danger {
-webkit-transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, box-shadow 0.15s ease;
transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, box-shadow 0.15s ease,
-webkit-box-shadow 0.15s ease;
}
a.text-hover-danger:hover,
.text-hover-danger:hover {
-webkit-transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, box-shadow 0.15s ease;
transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, box-shadow 0.15s ease,
-webkit-box-shadow 0.15s ease;
color: var(--danger-hover) !important;
}
a.text-hover-danger:hover i,
.text-hover-danger:hover i {
color: var(--danger-hover) !important;
}
a.text-hover-danger:hover .svg-icon svg g [fill],
.text-hover-danger:hover .svg-icon svg g [fill] {
-webkit-transition: fill 0.3s ease;
transition: fill 0.3s ease;
fill: var(--danger-hover);
}
a.text-hover-danger:hover .svg-icon svg:hover g [fill],
.text-hover-danger:hover .svg-icon svg:hover g [fill] {
-webkit-transition: fill 0.3s ease;
transition: fill 0.3s ease;
}
.hoverable:hover a.text-hover-danger,
.hoverable:hover .text-hover-danger {
-webkit-transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, box-shadow 0.15s ease;
transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, box-shadow 0.15s ease,
-webkit-box-shadow 0.15s ease;
color: var(--danger-hover) !important;
}
.hoverable:hover a.text-hover-danger i,
.hoverable:hover .text-hover-danger i {
color: var(--danger-hover) !important;
}
.hoverable:hover a.text-hover-danger .svg-icon svg g [fill],
.hoverable:hover .text-hover-danger .svg-icon svg g [fill] {
-webkit-transition: fill 0.3s ease;
transition: fill 0.3s ease;
fill: var(--danger-hover) !important;
}
.hoverable:hover a.text-hover-danger .svg-icon svg:hover g [fill],
.hoverable:hover .text-hover-danger .svg-icon svg:hover g [fill] {
-webkit-transition: fill 0.3s ease;
transition: fill 0.3s ease;
}
/* ## TEXT HOVER TOSCA */
a.text-hover-tosca,
.text-hover-tosca {
-webkit-transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, box-shadow 0.15s ease;
transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, box-shadow 0.15s ease,
-webkit-box-shadow 0.15s ease;
}
a.text-hover-tosca:hover,
.text-hover-tosca:hover {
-webkit-transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, box-shadow 0.15s ease;
transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, box-shadow 0.15s ease,
-webkit-box-shadow 0.15s ease;
color: var(--tosca-hover) !important;
}
a.text-hover-tosca:hover i,
.text-hover-tosca:hover i {
color: var(--tosca-hover) !important;
}
a.text-hover-tosca:hover .svg-icon svg g [fill],
.text-hover-tosca:hover .svg-icon svg g [fill] {
-webkit-transition: fill 0.3s ease;
transition: fill 0.3s ease;
fill: var(--tosca-hover);
}
a.text-hover-tosca:hover .svg-icon svg:hover g [fill],
.text-hover-tosca:hover .svg-icon svg:hover g [fill] {
-webkit-transition: fill 0.3s ease;
transition: fill 0.3s ease;
}
.hoverable:hover a.text-hover-tosca,
.hoverable:hover .text-hover-tosca {
-webkit-transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, box-shadow 0.15s ease;
transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, box-shadow 0.15s ease,
-webkit-box-shadow 0.15s ease;
color: var(--tosca-hover) !important;
}
.hoverable:hover a.text-hover-tosca i,
.hoverable:hover .text-hover-tosca i {
color: var(--tosca-hover) !important;
}
.hoverable:hover a.text-hover-tosca .svg-icon svg g [fill],
.hoverable:hover .text-hover-tosca .svg-icon svg g [fill] {
-webkit-transition: fill 0.3s ease;
transition: fill 0.3s ease;
fill: var(--tosca-hover) !important;
}
.hoverable:hover a.text-hover-tosca .svg-icon svg:hover g [fill],
.hoverable:hover .text-hover-tosca .svg-icon svg:hover g [fill] {
-webkit-transition: fill 0.3s ease;
transition: fill 0.3s ease;
}
/* ### BUTTON HOVER TEXT */
/* ### */
/* ## PRIMARY */