ARCHIVE/xrpl-dev-portal
1
0
Fork 0
mirror of https://github.com/XRPLF/xrpl-dev-portal.git synced 2025-11-19 11:15:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

update checkbox styling

Browse Source
This commit is contained in:
Jake
2022-03-09 17:13:04 -07:00
parent c26df66ef2
commit 779a88e963
8 changed files with 140 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
styles/_pages.scss
View File

@@ -286,9 +286,11 @@
.page-events {
#event-hero-image {
height: 100%;
min-height: 209px;
background: url(../img/events/event-hero1@2x.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
#events-orange {
position: absolute;
@@ -395,54 +397,95 @@
}
//filter
.filter h6 {
font-size: 16px;
label {
margin: 0;
padding-left: 8px;
color: $white;
}
.filter span {
font-size: 16px;
font-weight: bold;
padding-left: 8px;
margin-top: -2px;
.events-filter h6 {
font-size: 16px;
}
.filter label {
width: 20px;
height: 20px;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
background: $blue-purple-500;
border-radius: 4px;
.events-filter {
height: 20px;
width: 20px;
}
.filter label:after {
content: "";
width: 10px;
height: 8px;
position: absolute;
top: 4px;
left: 4px;
border: 3px solid #fcfff4;
border-top: none;
border-right: none;
background: transparent;
opacity: 0;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
.events-filter[type="checkbox"]::before {
position: relative;
display: block;
width: 20px;
height: 20px;
content: "";
background: $blue-purple-500;
border-radius: 4px;
border-width: 1px;
border-style: solid;
border-color: $blue-purple-500;
}
.events-filter[type="checkbox"]::after {
position: relative;
display: block;
top: -20px;
width: 20px;
height: 20px;
content: "";
background-repeat: no-repeat;
background-position: center;
border-radius: 4px;
border-width: 1px;
border-style: solid;
border-color: $blue-purple-500;
}
// .events-filter[type="checkbox"]:disabled::after {
// -webkit-filter: opacity(0.4);
// }
.events-filter[type="checkbox"]:checked::after {
background-image: url(../img/events/event-check.svg);
background-repeat: no-repeat;
background-position: center;
border-width: 1px;
border-style: solid;
border-color: $blue-purple-500;
border-radius: 4px;
}
.events-filter[type="checkbox"]:not(:disabled):checked:hover::after {
background-image: url(../img/events/event-check.svg);
background-repeat: no-repeat;
background-position: center;
border-width: 1px;
border-style: solid;
border-color: $blue-purple-500;
border-radius: 4px;
}
.events-filter[type="checkbox"]:not(:disabled):hover::after {
background: $blue-purple-600;
border-width: 1px;
border-style: solid;
border-color: $blue-purple-600;
border-radius: 4px;
}
.events-filter[type="checkbox"]:not(:disabled):hover::before {
background: $blue-purple-600;
border-width: 1px;
border-style: solid;
border-color: $blue-purple-600;
border-radius: 4px;
}
.filter label:hover::after {
opacity: 0.8;
}
.filter input[type="checkbox"] {
visibility: hidden;
}
.filter input[type="checkbox"]:checked + label:after {
opacity: 1;
}
}