Commit 0d015233 authored by Alejandro Asensio's avatar Alejandro Asensio
Browse files

refactor(#16): avoid _bootstrap-override.scss and create custom dataportal ("dp-*") classes

parent f783e7ea
.container,
.container-lg,
.container-md,
.container-sm,
.container-xl {
max-width: 80rem !important;
}
.container-fluid.tab-content {
padding: 0;
}
.card {
.card-header {
margin-top: 0;
}
.card-footer {
font-weight: 500;
}
}
.card-columns {
// column-count: 3;
column-gap: 2rem;
.card {
margin-bottom: 2rem;
.card-img-top {
max-height: 23rem;
object-fit: scale-down;
}
}
}
// TODO: partial 'warning-manual-curation.html' SHOULD BE REMOVED WHEN DATA RETRIEVAL IS AUTOMATED DAILY.
.alert {
border: none;
display: none;
}
.list-group-item {
color: $primary;
}
.pagination {
li > a {
background-color: $color--white;
color: $primary;
}
.active > a {
color: $color--white;
background-color: $primary !important;
border: solid 1px $primary !important;
}
}
.nav-pills .nav-item.active {
background-color: $primary;
}
.btn {
border-radius: 0;
font-weight: 500;
&--big {
font-size: 1.25rem;
padding: 0.5em 1em;
@media (min-width: 64rem) {
font-size: 1.5rem;
}
}
}
.btn-primary {
background-color: $primary !important;
border-color: $primary !important;
&:hover,
&:focus {
background-color: $primary--dark !important;
border-color: $primary--dark !important;
}
}
.badge,
.nav-pills > .nav-item {
border-radius: 0;
}
......@@ -68,6 +68,7 @@
font-size: 1rem;
font-weight: 700;
border: 4px solid $primary;
border-radius: 0;
padding: 0.5em 1em;
text-decoration: none !important;
transition: all 100ms linear;
......
.dp-card {
.card-header {
margin-top: 0;
}
.card-footer {
font-weight: 500;
}
}
.card-columns {
// column-count: 3;
column-gap: 2rem;
.card {
margin-bottom: 2rem;
.card-img-top {
max-height: 23rem;
object-fit: scale-down;
}
}
}
.dp-research-project-card {
.card-header {
height: 15rem;
......
.container,
.container-lg,
.container-md,
.container-sm,
.container-xl {
max-width: 80rem !important;
}
......@@ -33,3 +33,20 @@ a {
}
}
}
.dp-list-group-item {
color: $primary;
&:hover {
color: $primary--dark;
}
}
.dp-nav-pills .nav-item.active {
background-color: $primary;
}
.badge,
.dp-nav-pills > .nav-item {
border-radius: 0;
}
......@@ -9,6 +9,18 @@
}
}
.pagination {
li > a {
background-color: $color--white;
color: $primary;
}
.active > a {
color: $color--white;
background-color: $primary !important;
border: solid 1px $primary !important;
}
}
#isaric-h12o-model-table {
.cluster {
font-weight: 600;
......
@import "variables";
@import "bootstrap-override";
@import "containers";
@import "typography";
@import "colors";
@import "cards";
......@@ -12,3 +12,9 @@
@import "cookies-banner";
@import "back-to-top";
@import "widgets";
// TODO: partial 'warning-manual-curation.html' SHOULD BE REMOVED WHEN DATA RETRIEVAL IS AUTOMATED DAILY.
.alert {
border: none;
display: none;
}
......@@ -4,7 +4,7 @@
<h1>{{ .Title }}</h1>
{{ .Content }}
<nav class="nav nav-pills nav-fill" role="tablist">
<nav class="nav nav-pills nav-fill dp-nav-pills" role="tablist">
<a class="nav-item nav-link active ml-2 mb-2 dp-background-color--hero" id="viral-sequences"
href="#viral-sequences-content" data-bs-toggle="tab" role="tab"
aria-controls="viral-sequences-content" aria-selected="true">
......
......@@ -10,7 +10,7 @@
<main class="container">
<h1>{{ .Title }}</h1>
<nav class="nav nav-pills nav-fill" role="tablist">
<nav class="nav nav-pills nav-fill dp-nav-pills" role="tablist">
{{ range $index, $navTab := $tabs_ids }}
<a class="nav-item nav-link{{ if (eq $index 0) }} active{{ else }}{{ end }} ml-2 mb-2 dp-background-color--hero" id="{{ .id }}"
href='{{print "#" .id "-content"}}' data-bs-toggle="tab" role="tab"
......
......@@ -53,7 +53,7 @@
<section id="resources">
<h2>{{ i18n "resources_cv19" }}</h2>
<div class="card-deck">
<div class="card">
<div class="card dp-card">
<h5 class="card-header">{{ i18n "cv19_risk_maps" }}</h5>
<div class="card-body">
<p class="card-text">
......@@ -65,7 +65,7 @@
<a href="https://flowmaps.life.bsc.es/flowboard/board_risk" class="arrow">{{ i18n "see_other_analysis" }}</a>
</div>
</div>
<div class="card">
<div class="card dp-card">
<h5 class="card-header">{{ i18n "distribution_variants" }}</h5>
<div class="card-body">
<p class="card-text">
......
......@@ -157,7 +157,7 @@
</a>
<div class="collapse list-group" id="data{{ $index }}">
{{ range .available_data }}
<a target="_blank" href="{{ .link }}" class="list-group-item list-group-item-action">
<a target="_blank" href="{{ .link }}" class="list-group-item list-group-item-action dp-list-group-item">
{{ .label }} <i class="bi bi-box-arrow-up-right"></i>
</a>
{{ end }}
......
......@@ -4,7 +4,7 @@
<div class="carousel-item {{if eq $index 0}}active{{end}}">
<div class="card-deck">
{{ range $project := $slide }}
<div class="card dp-research-project-card">
<div class="card dp-card dp-research-project-card">
<h6 class="card-header">{{ .title | truncate 200 }}</h6>
<small class="card-footer text-muted">{{ .center }}</small>
</div>
......
......@@ -11,7 +11,7 @@
{{ $imgAlt = .alt }}
{{ end }}
{{ end }}
<div class="card">
<div class="card dp-card">
<img class="card-img-top" src="/images/resources/{{ $imgFile }}" alt="{{ $imgAlt }}">
<div class="card-body">
<h5 class="card-title mt-2">{{ .name }} {{ if not (eq .acronym "") }} ({{ .acronym }}){{ end }}</h5>
......
......@@ -4,7 +4,7 @@
{{ .Content }}
<div class="card-columns">
{{ range $workingSpace := $.Site.Data.c19dpes_working_spaces.working_spaces }}
<div class="card">
<div class="card dp-card">
<img class="card-img-top" style="height: 7rem;" src="/images/working-spaces/{{ .img.src }}" alt="{{ .img.alt }}">
<div class="card-body">
<h5 class="card-title mt-2">{{ .title }} {{ if not (eq .acronym "") }} ({{ .acronym }}){{ end }}</h5>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment