mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-21 04:05:49 +00:00
update checkbox styling
This commit is contained in:
Jake
File diff suppressed because one or more lines are too long
6
assets/css/devportal2021-v6a.css
Normal file
6
assets/css/devportal2021-v6a.css
Normal file
File diff suppressed because one or more lines are too long
3
assets/img/events/event-check.svg
Normal file
3
assets/img/events/event-check.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="12" height="9" viewBox="0 0 12 9" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1 4.5L4.84794 7.86695C4.93167 7.94021 5.05909 7.93106 5.13149 7.84659L11 1" stroke="white" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 244 B |
@@ -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;
|
||||
}
|
||||
|
||||
.filter label:hover::after {
|
||||
opacity: 0.8;
|
||||
.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;
|
||||
}
|
||||
.filter input[type="checkbox"] {
|
||||
visibility: hidden;
|
||||
|
||||
// .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;
|
||||
}
|
||||
.filter input[type="checkbox"]:checked + label:after {
|
||||
opacity: 1;
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -698,6 +698,11 @@ $placeholder-color: $gray-600;
|
||||
|
||||
// Events page
|
||||
.page-events {
|
||||
|
||||
label {
|
||||
color: $gray-900;
|
||||
}
|
||||
|
||||
.event-card {
|
||||
color: $black;
|
||||
background-color: $gray-050;
|
||||
@@ -721,9 +726,11 @@ $placeholder-color: $gray-600;
|
||||
|
||||
#event-hero-image {
|
||||
height: 100%;
|
||||
min-height: 209px;
|
||||
background: url(../img/events/event-hero1-light@2x.png);
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.icon-date::before {
|
||||
|
||||
@@ -4,9 +4,9 @@
|
||||
"node-sass": "^7.0.0"
|
||||
},
|
||||
"scripts": {
|
||||
"build-css": "node-sass --include-path scss xrpl.scss ../assets/css/devportal2021-v6.css --output-style compressed",
|
||||
"build-css-out": "node-sass --include-path scss xrpl.scss ../out/assets/css/devportal2021-v6.css --output-style compressed --source-map true",
|
||||
"build-css-watch-out": "node-sass --recursive --watch --include-path scss xrpl.scss ../out/assets/css/devportal2021-v6.css --output-style compressed --source-map true"
|
||||
"build-css": "node-sass --include-path scss xrpl.scss ../assets/css/devportal2021-v6a.css --output-style compressed",
|
||||
"build-css-out": "node-sass --include-path scss xrpl.scss ../out/assets/css/devportal2021-v6a.css --output-style compressed --source-map true",
|
||||
"build-css-watch-out": "node-sass --recursive --watch --include-path scss xrpl.scss ../out/assets/css/devportal2021-v6a.css --output-style compressed --source-map true"
|
||||
},
|
||||
"dependencies": {
|
||||
"sass": "^1.26.10"
|
||||
|
||||
@@ -53,7 +53,7 @@
|
||||
{% if target.lang=="ja" %}
|
||||
<link href="{{currentpage.prefix}}assets/css/fonts-ja.css" rel="stylesheet" />
|
||||
{% endif %}
|
||||
<link href="{{currentpage.prefix}}assets/css/devportal2021-v6.css" rel="stylesheet" />
|
||||
<link href="{{currentpage.prefix}}assets/css/devportal2021-v6a.css" rel="stylesheet" />
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
|
||||
|
||||
|
||||
@@ -90,15 +90,12 @@
|
||||
<h6 class="mb-3">Filter By:</h6>
|
||||
<div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="meetup" checked>
|
||||
<label class="" for="inlineCheckbox1"></label>
|
||||
<span class="form-check-label" for="inlineCheckbox1">Meetups</span>
|
||||
<input value="meetup" id="meetup-upcoming" name="meetup-upcoming" type="checkbox" class="events-filter" checked />
|
||||
<label for="meetup-upcoming">Meetups</label>
|
||||
</div>
|
||||
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="hackathon" checked>
|
||||
<label class="" for="inlineCheckbox2"></label>
|
||||
<span class="form-check-label" for="inlineCheckbox2">Hackathons</span>
|
||||
<input value="hackathon" id="hackathon-upcoming" name="hackathon-upcoming" type="checkbox" class="events-filter" checked />
|
||||
<label for="hackathon-upcoming">Hackathons</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -150,15 +147,12 @@
|
||||
<h6 class="mb-3">Filter By:</h6>
|
||||
<div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="meetup" checked>
|
||||
<label class="" for="inlineCheckbox3"></label>
|
||||
<span class="form-check-label" for="inlineCheckbox3">Meetups</span>
|
||||
<input value="meetup" id="meetup-past" name="meetup-past" type="checkbox" class="events-filter" checked />
|
||||
<label for="meetup-past">Meetups</label>
|
||||
</div>
|
||||
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="checkbox" id="inlineCheckbox4" value="hackathon" checked>
|
||||
<label class="" for="inlineCheckbox4"></label>
|
||||
<span class="form-check-label" for="inlineCheckbox4">Hackathons</span>
|
||||
<input value="hackathon" id="hackathon-past" name="hackathon-past" type="checkbox" class="events-filter" checked />
|
||||
<label for="hackathon-past">Hackathons</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -231,35 +225,35 @@
|
||||
|
||||
<script>
|
||||
|
||||
$('#inlineCheckbox1').change(function () {
|
||||
if ($('#inlineCheckbox1').is(':checked')) {
|
||||
$('.meetup-upcoming').show();
|
||||
} else {
|
||||
$('.meetup-upcoming').hide();
|
||||
}
|
||||
});
|
||||
$('#inlineCheckbox2').change(function () {
|
||||
if ($('#inlineCheckbox2').is(':checked')) {
|
||||
$('.hackathon-upcoming').show();
|
||||
} else {
|
||||
$('.hackathon-upcoming').hide();
|
||||
}
|
||||
});
|
||||
$('#meetup-upcoming').change(function () {
|
||||
if ($('#meetup-upcoming').is(':checked')) {
|
||||
$('.meetup-upcoming').show();
|
||||
} else {
|
||||
$('.meetup-upcoming').hide();
|
||||
}
|
||||
});
|
||||
$('#hackathon-upcoming').change(function () {
|
||||
if ($('#hackathon-upcoming').is(':checked')) {
|
||||
$('.hackathon-upcoming').show();
|
||||
} else {
|
||||
$('.hackathon-upcoming').hide();
|
||||
}
|
||||
});
|
||||
|
||||
$('#inlineCheckbox3').change(function () {
|
||||
if ($('#inlineCheckbox3').is(':checked')) {
|
||||
$('.meetup-past').show();
|
||||
} else {
|
||||
$('.meetup-past').hide();
|
||||
}
|
||||
});
|
||||
$('#inlineCheckbox4').change(function () {
|
||||
if ($('#inlineCheckbox4').is(':checked')) {
|
||||
$('.hackathon-past').show();
|
||||
} else {
|
||||
$('.hackathon-past').hide();
|
||||
}
|
||||
});
|
||||
$('#meetup-past').change(function () {
|
||||
if ($('#meetup-past').is(':checked')) {
|
||||
$('.meetup-past').show();
|
||||
} else {
|
||||
$('.meetup-past').hide();
|
||||
}
|
||||
});
|
||||
$('#hackathon-past').change(function () {
|
||||
if ($('#hackathon-past').is(':checked')) {
|
||||
$('.hackathon-past').show();
|
||||
} else {
|
||||
$('.hackathon-past').hide();
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user