Skip to content

Commit

Permalink
feat: add paragraph history carousel, review scss and add features to…
Browse files Browse the repository at this point in the history 
… ct page
  • Loading branch information
@arturu
arturu committed Mar 27, 2024
1 parent a340f55 commit f73d540
Show file tree
Hide file tree
Showing 11 changed files with 346 additions and 161 deletions.
4 changes: 2 additions & 2 deletions composer.libraries.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,13 @@
"type": "package",
"package": {
"name": "ouitoulia/skenografia-dist",
"version": "1.19.1",
"version": "1.20.0",
"type": "drupal-library",
"extra": {
"installer-name": "ouitoulia-skenografia"
},
"dist": {
"url": "https://github.com/ouitoulia/skenografia/releases/download/1.19.1/skenografia.zip",
"url": "https://github.com/ouitoulia/skenografia/releases/download/1.20.0/skenografia.zip",
"type": "zip"
}
}
Expand Down
4 changes: 2 additions & 2 deletions skenografia.libraries.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ custom:

# Bootstrap-italia library if you use a CDN
cdn:
version: 1.19.1
version: 1.20.0
css:
theme:
/libraries/ouitoulia-skenografia/css/bootstrap-italia.min.css: { minified: true }
Expand All @@ -24,7 +24,7 @@ cdn:

# Skenografia toc_js custom loader
toc:
version: 1.19.1
version: 1.20.0
js:
/libraries/ouitoulia-skenografia/js/toc_js_loader.min.js: { minified: true }
#dist/js/toc_js_loader.min.js: { }
Expand Down
2 changes: 1 addition & 1 deletion src/scss/custom/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ $purplelight-dark: mix($purplelight, $petrol, 10) !default;
$greendark: #0e865c !default; // diverso in 2.3.0 originale 0e8a5c
$bluelectric: #0d00ff !default;
$bluelectric-dark: #0a00cb !default;
$bluedark: #30465c !default;
$bluedark: #001a33!default; // #30465c
$bluedark-petrol: mix(#00112c, $petrol, 52%) !default; // #27415b == #27415b
$secondary-green: #00615e !default;
// scss-docs-end color-variables
Expand Down
216 changes: 112 additions & 104 deletions src/scss/custom/r-engineering/components/_splide.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,71 +4,100 @@
// --------------------------------------------------
/* INIZIO STILI SPLIDE */

.splide .splide__arrow {
text-align: center;
-webkit-tap-highlight-color: transparent;
background: none;
border: 1px solid;
opacity: 1;
}
.splide {
// Non necessario. Fornito da bootstrap-italia v2
//.splide__arrow {
// text-align: center;
// -webkit-tap-highlight-color: transparent;
// background: none;
// border: 1px solid;
// opacity: 1;
//}

.splide__arrow:disabled {
opacity: 0.3;
}

.splide__arrow:disabled {
opacity: 0.3;
}
.splide__arrow .disabled {
opacity: 0.5;
cursor: default;
}

.splide .splide__arrow:not(:disabled):hover {
border: 2px solid;
}
.splide__arrow:not(:disabled):hover {
border: 2px solid;
}

.splide .splide__arrow [class*='splide__arrow--'] {
color: #51758d;
font-size: 1.68em;
margin: 0px;
padding: 0px;
background: none;
display: inline-block;
cursor: pointer;
}
.splide__arrow [class*='splide__arrow--'] {
color: var(--bs-petrol);
font-size: 1.68em;
margin: 0;
padding: 0;
background: none;
display: inline-block;
cursor: pointer;
}

.splide__arrow [class*='splide__arrow--']:hover {
background: none;
color: var(--bs-petrol);
text-decoration: none;
}

.splide .splide__arrow [class*='splide__arrow--']:hover {
background: none;
color: #51758d;
text-decoration: none;
}
.splide__arrow.disabled+.splide__pagination {
margin-top: 10px;
}

.splide .splide__arrow .disabled {
opacity: 0.5;
cursor: default;
}
.splide__track {
padding-bottom: 20px;
}

.splide .splide__slide .card {
height: 100%;
}
.splide__pagination {
text-align: center;
-webkit-tap-highlight-color: transparent;
position: relative;
bottom: 0;
}

.splide .splide__arrow.disabled+.splide__pagination {
margin-top: 10px;
}
.splide__pagination {

.splide__pagination__page {
//display: inline-block;
//zoom: 1;
//display: inline;
width: 12px;
height: 12px;
margin: 0 5px 0 5px;
background: transparent;
border: 2px solid var(--bs-petrol);
display: block;
-webkit-backface-visibility: visible;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
opacity: 0.5;

&.is-active,
&:hover {
background: var(--bs-petrol);
border: 2px solid var(--bs-petrol);
opacity: 1;
transform: none;
}
}

.splide .splide__track {
padding-bottom: 20px;
}
}

//.splide__list {
// padding: 0 5px !important;
//}

.splide .splide__pagination {
text-align: center;
-webkit-tap-highlight-color: transparent;
position: relative;
bottom: 0;
}

/* .splide .splide__pagination .splide__pagination__page{
display: inline-block;
zoom: 1;
*display: inline;
} */
.splide .splide__slide .card {
height: 100%;
}

/* .splide__list {
padding: 0 5px !important;
} */

.splide__track--nav>.splide__list>.splide__slide.is-active {
border: 0;
Expand All @@ -78,21 +107,6 @@
border: 0;
}

.splide .splide__pagination .splide__pagination__page {
width: 12px;
height: 12px;
margin: 0 5px 0 5px;
background: transparent;
border: 2px solid #51758d;
display: block;
-webkit-backface-visibility: visible;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
opacity: 0.5;
}

@media (min-width: 1300px) {
.simple-two-carousel.big .splide__pagination li:nth-child(-n+2) {
/* display: none; */
Expand All @@ -101,27 +115,19 @@

.bg-bluelectric .splide .splide__pagination .splide__pagination__page,
.bg-bluelectricdark .splide .splide__pagination .splide__pagination__page {
border-color: #ffffff;
}

.splide .splide__pagination__page.is-active,
.splide .splide__pagination__page:hover {
background: #51758d;
border: 2px solid #51758d;
opacity: 1;
transform: none;
border-color: var(--bs-white);
}

.bg-bluelectricdark .splide .splide__pagination .splide__pagination__page.is-active,
.bg-bluelectricdark .splide .splide__pagination .splide__pagination__page:hover {
border-color: #ffffff;
background: #ffffff;
border-color: var(--bs-white);
background: var(--bs-white);
}

.bg-bluelectric .splide .splide__pagination .splide__pagination__page.is-active,
.bg-bluelectric .splide .splide__pagination .splide__pagination__page:hover {
border-color: #ffffff;
background: #ffffff;
border-color: var(--bs-white);
background: var(--bs-white);
}

.splide .splide__pagination .splide__arrow--prev,
Expand Down Expand Up @@ -159,72 +165,72 @@

.redbrown .splide .splide__arrows .splide__arrow--prev svg,
.redbrown .splide .splide__arrows .splide__arrow--next svg {
fill: #D1344C;
fill: var(--bs-redbrown);
}

.redbrown .splide .didascalia-text {
background-color: #D1344C;
background-color: var(--bs-redbrown);
}

.redbrown .splide__arrow {
color: #D1344C;
color: var(--bs-redbrown);
}

.bluelectric .splide .splide__arrows .splide__arrow--prev svg,
.bluelectric .splide .splide__arrows .splide__arrow--next svg {
fill: #0D00FF;
fill: var(--bs-bluelectric);
}

.bluelectric .didascalia-text {
background-color: #0D00FF;
background-color: var(--bs-bluelectric);
}

.bluelectric .splide__arrow {
color: #0D00FF;
color: var(--bs-bluelectric);
}

.bg-bluelectric .splide .splide__arrows .splide__arrow--prev svg,
.bg-bluelectric .splide .splide__arrows .splide__arrow--next svg {
fill: #ffffff;
fill: var(--bs-white);
}

.section-bluedark .splide .splide__arrows .splide__arrow--prev svg,
.section-bluedark .splide .splide__arrows .splide__arrow--next svg {
fill: #ffffff;
fill: var(--bs-white);
}

.greendark .splide .splide__arrows .splide__arrow--prev svg,
.greendark .splide .splide__arrows .splide__arrow--next svg {
fill: #0E865C;
fill: var(--bs-greendark);
}

.greendark .didascalia-text {
background-color: #0E865c;
background-color: var(--bs-greendark);
}

.greendark .splide__arrow svg {
fill: #0E865C;
fill: var(--bs-greendark);
}

.greendark .splide__arrow {
color: #0E865c;
color: var(--bs-greendark);
}

.section-bluedark .splide__arrow svg,
.bg-bluelectricdark .splide__arrow svg {
fill: #ffffff;
fill: var(--bs-white);
;
}

.section-bluedark .splide__arrow,
.bg-bluelectricdark .splide__arrow {
color: #ffffff;
color: var(--bs-white);
}

.didascalia-text {
bottom: 0;
font-size: .88rem;
color: white;
color: var(--bs-white);
max-width: 100%;
}

Expand Down Expand Up @@ -330,14 +336,14 @@
display: flex;
align-items: center;
justify-content: center;
color: #0D00FF !important;
color: var(--bs-bluelectric) !important;
}

.carousel-classroom .splide__arrows .splide__arrow--prev svg,
.carousel-classroom .splide__arrows .splide__arrow--next svg {
width: 50%;
height: 100%;
fill: #0D00FF !important;
fill: var(--bs-bluelectric) !important;
}

.carousel-classroom .splide__arrows .splide__arrow--next {
Expand All @@ -362,7 +368,7 @@
}

.redbrown .year-carousel .splide__slide .dot-text {
color: #D1344C;
color: var(--bs-redbrown);
}

.year-carousel .splide__slide .dot-text:before {
Expand All @@ -372,7 +378,7 @@
right: 0;
width: 100%;
height: 1px;
background-color: #D1344C;
background-color: var(--bs-redbrown);
}

.year-carousel .splide__slide:first-child .dot-text:before {
Expand All @@ -387,14 +393,16 @@
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
border: 1px solid #D1344C;
border: 1px solid var(--bs-redbrown);
border-radius: 50%;
z-index: 1;
background-color: #ffffff;
background-color: var(--bs-white);
}

.bg-blue-dark .year-carousel .splide__slide .dot-text:after {
background-color: #001a33;
// @todo: il selettore forse è errato, è usato dappertutto bg-bluedark
.bg-blue-dark .year-carousel .splide__slide .dot-text:after,
.bg-bluedark .year-carousel .splide__slide .dot-text:after {
background-color: var(--bs-bluedark);
}

.year-carousel .splide__arrow--prev {
Expand Down
Loading

0 comments on commit f73d540

Please sign in to comment.