HTML |
---|
<link rel="stylesheet" href="/digital-building-blocks/sites/download/attachments/638058995/compliance-style.css"> |
Div | ||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||||||||
|
Div | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
HTML |
---|
<script> $(document).ready(function() { $(".section-msa").hide(); $(".section-et").hide(); $(".section-so").hide(); $(".section-sla").hide(); $("#ps").on("click", function(e) { e.stopPropagation(); $("#msa").removeClass("active"); $("#et").removeClass("active"); $("#so").removeClass("active"); $("#sla").removeClass("active"); $("#ps").addClass("active"); $(".section-msa").hide(); $(".section-et").hide(); $(".section-so").hide(); $(".section-sla").hide(); $(".section-ps").show(); e.preventDefault(); }) $("#msa").on("click", function(e) { e.stopPropagation(); $("#ps").removeClass("active"); $("#et").removeClass("active"); $("#so").removeClass("active"); $("#sla").removeClass("active"); $("#msa").addClass("active"); $(".section-ps").hide(); $(".section-et").hide(); $(".section-so").hide(); $(".section-sla").hide(); $(".section-msa").show(); e.preventDefault(); }) $("#et").on("click", function(e) { e.stopPropagation(); $("#msa").removeClass("active"); $("#ps").removeClass("active"); $("#so").removeClass("active"); $("#sla").removeClass("active"); $("#et").addClass("active"); $(".section-msa").hide(); $(".section-ps").hide(); $(".section-so").hide(); $(".section-sla").hide(); $(".section-et").show(); e.preventDefault(); }) $("#so").on("click", function(e) { e.stopPropagation(); $("#msa").removeClass("active"); $("#et").removeClass("active"); $("#ps").removeClass("active"); $("#sla").removeClass("active"); $("#so").addClass("active"); $(".section-msa").hide(); $(".section-et").hide(); $(".section-ps").hide(); $(".section-sla").hide(); $(".section-so").show(); e.preventDefault(); }) $("#sla").on("click", function(e) { e.stopPropagation(); $("#msa").removeClass("active"); $("#et").removeClass("active"); $("#so").removeClass("active"); $("#ps").removeClass("active"); $("#sla").addClass("active"); $(".section-msa").hide(); $(".section-et").hide(); $(".section-so").hide(); $(".section-ps").hide(); $(".section-sla").show(); e.preventDefault(); }) }); </script> |
CSS Stylesheet |
@media screen and ( max-width: 768px ) {
#compliance-header { font-weight: 600; }
.so-content .col-4 { min-height: auto!important; }
.tab-cards-container { margin-right: 0px; }
}
@media screen and ( max-width: 832px ) {
.so-content { flex-direction: column; }
.so-content .col-4 { max-width: none!important; width: 100%; }
.so-content .col-4:first-child { padding-left: 1rem!important; padding-right: 1rem!important; }
.so-content .col-4:last-child { padding-left: 1rem!important; padding-right: 1rem!important; }
}
@media screen and ( max-width: 1074px ) {
.case-family_tabs { flex-direction: column; }
.case-family_tabs li { width: 100%; padding-left: 40px; justify-content: flex-start!important; }
.active { width: 100%; justify-content: flex-start!important; }
}
@media screen and ( min-width: 1117px ) {
.case-family_tabs li:hover, .case-family_tabs li:active { background : #ffb3d7; border-radius: 16px; color: white; }
}
.btn { height: 45px!important; margin-top: 4px; align-items: center;}
.card-grid .ico-external { background-size: 18px!important; }
.bg-legal-page-curve {
background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/634978415/bg-curve-legal.svg");
background-position: top right; background-repeat: no-repeat; background-size: contain;}
#introduction-legal .intro-paragraph { display: flex; flex-direction: column; justify-content: center; }
.case-family_tabs ul { list-style: none; }
.case-family_tabs li {display: flex; align-items: center; justify-content: center; list-style: none; height: 72px; cursor: pointer; padding-right: 40px; padding-left: 40px;}
.case-family_tabs li:first-child { padding-left: 40px; }
.case-family_tabs li:last-child { padding-right: 40px; }
.case-family_tabs a { text-decoration: none; color: black; text-align: center; line-height: 1;}
.case-family_tabs { display: flex; justify-content: space-between; align-items: center; padding: 8px; border-radius: 20px; list-style: none; background: #f6f5f7; }
.case-family_tabs .active {background: #cd1d8b; display: flex; align-items: center; border-radius: 16px; color: white; padding-top: 16px; padding-bottom: 16px; }
.case-family_tabs .active a {color: white;}
/* cards */
.tab-cards-container { display: flex; flex-direction: row; gap: 1.375rem; margin-left: 0; flex-wrap: wrap;}
.tab-cards-container div { min-height: 49px; }
.tab-cards-container .col-3 { min-width: 331px; }
.card-grid-body { padding: 23px; }
.card-grid-body > p:first-child { display: none; }
.card-grid-body > p:last-child { display: none; }
.card-grid-header { display: flex; flex-direction: row; gap: 11px; align-items: center; margin-bottom: 16px;}
.card-grid-header p { margin: 0; font-size: 15px;}
.card-grid-body { display: flex; flex-direction: column; justify-content: space-around; }
.card-grid-footer { display: flex; flex-direction: column; justify-content: center; }
.msa-content { display: flex; flex-direction: column; }
#four-terms h3 { font-size: 32px; margin-bottom: 0;}
.term-header { display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem;}
.msa-content-description p:first-child { display: none; }
.msa-content-description { padding-top: 0!important; }
.term-header > img { width: 49px; }
|