ARCHIVE/xrpl-dev-portal
1
0
Fork 0
mirror of https://github.com/XRPLF/xrpl-dev-portal.git synced 2025-11-23 05:05:50 +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

2
assets/css/devportal2021-v6.css
View File

File diff suppressed because one or more lines are too long

6
assets/css/devportal2021-v6a.css Normal file
View File

File diff suppressed because one or more lines are too long

3
assets/img/events/event-check.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 244 B

117
styles/_pages.scss
View File

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

7
styles/light/_light-theme.scss
View File

@@ -698,6 +698,11 @@ $placeholder-color: $gray-600;
// Events page // Events page
.page-events { .page-events {
label {
color: $gray-900;
}
.event-card { .event-card {
color: $black; color: $black;
background-color: $gray-050; background-color: $gray-050;
@@ -721,9 +726,11 @@ $placeholder-color: $gray-600;
#event-hero-image { #event-hero-image {
height: 100%; height: 100%;
min-height: 209px;
background: url(../img/events/event-hero1-light@2x.png); background: url(../img/events/event-hero1-light@2x.png);
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center;
} }
.icon-date::before { .icon-date::before {

6
styles/package.json
View File

@@ -4,9 +4,9 @@
"node-sass": "^7.0.0" "node-sass": "^7.0.0"
}, },
"scripts": { "scripts": {
"build-css": "node-sass --include-path scss xrpl.scss ../assets/css/devportal2021-v6.css --output-style compressed", "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-v6.css --output-style compressed --source-map true", "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-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-v6a.css --output-style compressed --source-map true"
}, },
"dependencies": { "dependencies": {
"sass": "^1.26.10" "sass": "^1.26.10"

2
template/base.html.jinja
View File

@@ -53,7 +53,7 @@
{% if target.lang=="ja" %} {% if target.lang=="ja" %}
<link href="{{currentpage.prefix}}assets/css/fonts-ja.css" rel="stylesheet" /> <link href="{{currentpage.prefix}}assets/css/fonts-ja.css" rel="stylesheet" />
{% endif %} {% 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" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />

78
template/page-events.html.jinja
View File

@@ -90,15 +90,12 @@
<h6 class="mb-3">Filter By:</h6> <h6 class="mb-3">Filter By:</h6>
<div> <div>
<div class="form-check form-check-inline"> <div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="meetup" checked> <input value="meetup" id="meetup-upcoming" name="meetup-upcoming" type="checkbox" class="events-filter" checked />
<label class="" for="inlineCheckbox1"></label> <label for="meetup-upcoming">Meetups</label>
<span class="form-check-label" for="inlineCheckbox1">Meetups</span>
</div> </div>
<div class="form-check form-check-inline"> <div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="hackathon" checked> <input value="hackathon" id="hackathon-upcoming" name="hackathon-upcoming" type="checkbox" class="events-filter" checked />
<label class="" for="inlineCheckbox2"></label> <label for="hackathon-upcoming">Hackathons</label>
<span class="form-check-label" for="inlineCheckbox2">Hackathons</span>
</div> </div>
</div> </div>
</div> </div>
@@ -150,15 +147,12 @@
<h6 class="mb-3">Filter By:</h6> <h6 class="mb-3">Filter By:</h6>
<div> <div>
<div class="form-check form-check-inline"> <div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="meetup" checked> <input value="meetup" id="meetup-past" name="meetup-past" type="checkbox" class="events-filter" checked />
<label class="" for="inlineCheckbox3"></label> <label for="meetup-past">Meetups</label>
<span class="form-check-label" for="inlineCheckbox3">Meetups</span>
</div> </div>
<div class="form-check form-check-inline"> <div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox4" value="hackathon" checked> <input value="hackathon" id="hackathon-past" name="hackathon-past" type="checkbox" class="events-filter" checked />
<label class="" for="inlineCheckbox4"></label> <label for="hackathon-past">Hackathons</label>
<span class="form-check-label" for="inlineCheckbox4">Hackathons</span>
</div> </div>
</div> </div>
</div> </div>
@@ -231,35 +225,35 @@
<script> <script>
$('#inlineCheckbox1').change(function () { $('#meetup-upcoming').change(function () {
if ($('#inlineCheckbox1').is(':checked')) { if ($('#meetup-upcoming').is(':checked')) {
$('.meetup-upcoming').show(); $('.meetup-upcoming').show();
} else { } else {
$('.meetup-upcoming').hide(); $('.meetup-upcoming').hide();
} }
}); });
$('#inlineCheckbox2').change(function () { $('#hackathon-upcoming').change(function () {
if ($('#inlineCheckbox2').is(':checked')) { if ($('#hackathon-upcoming').is(':checked')) {
$('.hackathon-upcoming').show(); $('.hackathon-upcoming').show();
} else { } else {
$('.hackathon-upcoming').hide(); $('.hackathon-upcoming').hide();
} }
}); });
$('#inlineCheckbox3').change(function () { $('#meetup-past').change(function () {
if ($('#inlineCheckbox3').is(':checked')) { if ($('#meetup-past').is(':checked')) {
$('.meetup-past').show(); $('.meetup-past').show();
} else { } else {
$('.meetup-past').hide(); $('.meetup-past').hide();
} }
}); });
$('#inlineCheckbox4').change(function () { $('#hackathon-past').change(function () {
if ($('#inlineCheckbox4').is(':checked')) { if ($('#hackathon-past').is(':checked')) {
$('.hackathon-past').show(); $('.hackathon-past').show();
} else { } else {
$('.hackathon-past').hide(); $('.hackathon-past').hide();
} }
}); });
</script> </script>