Skip to content

Commit

Permalink
Added template for access box - Esports' box
Browse files Browse the repository at this point in the history
  • Loading branch information
@ruben-padilla-ithinkupc
ruben-padilla-ithinkupc committed Jun 17, 2024
1 parent f0cb16b commit 5c6f993
Show file tree
Hide file tree
Showing 9 changed files with 896 additions and 1 deletion.
181 changes: 181 additions & 0 deletions src/genweb6/theme/theme/scss/templates/_accessbox.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,181 @@
.accessbox-template {

&.btn-banner {
align-items: flex-start;
background: #fff;
padding: 2px 72px 2px 20px;
min-height: 80px;
color: var(--bs-body-color);
position: relative;
overflow: hidden;
display: flex;
justify-content: center;
flex-direction: column;
transition: all .25s ease-out;
margin: 0 0 24px;
transform: scale(1.0, 1.0) perspective(1px) translateZ(0px);
text-decoration: none;

&.btn-banner-stretch {
align-items: stretch;
}

/* Square icon (hidden on mobile) */
&[target="_blank"]:after {
content: "\e91c";

@media (max-width: 420px) {
display: none;
}
}

/* Square icon (Mobiles only) */
&[target="_blank"] h2::after {

@media (max-width: 420px) {
content: " \e91c";
font-family: "upc-icones";
font-size: 100%;
position: relative;
top: 1px;
}
}

img {
object-fit: cover;
left: 0;
top: 0;
width: 100%;
height: 100%;
position: absolute;
z-index: 0;
transition: all .5s ease;
}

&.compat-object-fit {
// fallback habilitat per l'script d'objectfit i fer que es vegi bé a IE
background-size: cover;
background-position: center;
}

h2 {
font-size: var(--gw-font-size-xl);
font-weight: 900;
margin: 0;
margin: -3px -6px -6px;
padding: 3px 6px;
z-index: 1;
display: inline-table;
position: relative;
color: var(--bs-body-color);
}

p {
font-size:var(--gw-font-size-s);
font-weight: 300;
margin: 6px -6px -3px;
padding: 3px 6px;
position: relative;
z-index: 1;
}

p,
&:hover p {
-webkit-font-smoothing: subpixel-antialiased;
tramsform: translateZ(0px);
}

img+h2,
img~p {
background: rgba(255, 255, 255, .8);
-webkit-backdrop-filter: blur(1px);
transition: all .25s ease-in;
}

&:hover,
&:focus {
box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 5px 10px rgba(0, 0, 0, .1), 0 10px 20px rgba(0, 0, 0, .05);
color: #252525;
transition: all .25s ease-in;
text-decoration: none;
//transform: perspective(1px) scale(1.00775,1.00775) translateZ(0px);
transform: perspective(25rem) scale(1.03);
-webkit-font-smoothing: subpixel-antialiased;

& img+h2,
& img~p {
background: rgba(255, 255, 255, .85);
-webkit-backdrop-filter: blur(3px);
transition: all .25s ease-in;
}

& img {
width: 101%;
height: 101%;
transition: all .5s ease;
}
}
}

&.btn-banner-large {
height: 280px;
padding: 0;
justify-content: flex-end;

div:not(.butonera) {
padding: 10px 20px 10px 20px;
background: rgba(243, 243, 243, 0.95);
z-index: 0;
height: 80px;
bottom: 0;
position: relative;
overflow: hidden;
display: flex;
justify-content: center;
flex-direction: column;
transition: all .25s ease-out;
min-height: 80px;
height: auto;
.btn {
font-size:15px;
}
}

&::before,
&::after {
bottom: 22px;
top: auto;

}

&::after {
border-color: var(--bs-primary);
}
.butonera {
.btn {
font-size:16px;
}
}
}

.link-banner {

.btn-banner-large {
height: auto;

div {
background-color: #ffffff;
border: 2px solid var(--bs-primary);

h2 {
color: var(--bs-primary);
font-weight: 500;
}
}

&:after {
background: var(--bs-gray-100);
}
}
}
}
1 change: 1 addition & 0 deletions src/genweb6/theme/theme/scss/templates/_templates.scss
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
@import "carousel";
@import "slider";
@import "accessbox";
170 changes: 170 additions & 0 deletions src/genweb6/theme/theme/stylesheets/templates/accesbox.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,170 @@
/* line 3, ../../scss/templates/accesbox.scss */
.accessbox-template.btn-banner {
align-items: flex-start;
background: #fff;
padding: 2px 72px 2px 20px;
min-height: 80px;
color: var(--bs-body-color);
position: relative;
overflow: hidden;
display: flex;
justify-content: center;
flex-direction: column;
transition: all .25s ease-out;
margin: 0 0 24px;
transform: scale(1, 1) perspective(1px) translateZ(0px);
text-decoration: none;
/* Square icon (hidden on mobile) */
/* Square icon (Mobiles only) */
}
/* line 19, ../../scss/templates/accesbox.scss */
.accessbox-template.btn-banner.btn-banner-stretch {
align-items: stretch;
}
/* line 24, ../../scss/templates/accesbox.scss */
.accessbox-template.btn-banner[target="_blank"]:after {
content: "\e91c";
}
@media (max-width: 420px) {
/* line 24, ../../scss/templates/accesbox.scss */
.accessbox-template.btn-banner[target="_blank"]:after {
display: none;
}
}
@media (max-width: 420px) {
/* line 33, ../../scss/templates/accesbox.scss */
.accessbox-template.btn-banner[target="_blank"] h2::after {
content: " \e91c";
font-family: "upc-icones";
font-size: 100%;
position: relative;
top: 1px;
}
}
/* line 44, ../../scss/templates/accesbox.scss */
.accessbox-template.btn-banner img {
object-fit: cover;
left: 0;
top: 0;
width: 100%;
height: 100%;
position: absolute;
z-index: 0;
transition: all .5s ease;
}
/* line 55, ../../scss/templates/accesbox.scss */
.accessbox-template.btn-banner.compat-object-fit {
background-size: cover;
background-position: center;
}
/* line 61, ../../scss/templates/accesbox.scss */
.accessbox-template.btn-banner h2 {
font-size: var(--gw-font-size-xl);
font-weight: 900;
margin: 0;
margin: -3px -6px -6px;
padding: 3px 6px;
z-index: 1;
display: inline-table;
position: relative;
color: var(--bs-body-color);
}
/* line 73, ../../scss/templates/accesbox.scss */
.accessbox-template.btn-banner p {
font-size: var(--gw-font-size-s);
font-weight: 300;
margin: 6px -6px -3px;
padding: 3px 6px;
position: relative;
z-index: 1;
}
/* line 82, ../../scss/templates/accesbox.scss */
.accessbox-template.btn-banner p, .accessbox-template.btn-banner:hover p {
-webkit-font-smoothing: subpixel-antialiased;
tramsform: translateZ(0px);
}
/* line 88, ../../scss/templates/accesbox.scss */
.accessbox-template.btn-banner img + h2,
.accessbox-template.btn-banner img ~ p {
background: rgba(255, 255, 255, 0.8);
-webkit-backdrop-filter: blur(1px);
transition: all .25s ease-in;
}
/* line 95, ../../scss/templates/accesbox.scss */
.accessbox-template.btn-banner:hover, .accessbox-template.btn-banner:focus {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 5px 10px rgba(0, 0, 0, 0.1), 0 10px 20px rgba(0, 0, 0, 0.05);
color: #252525;
transition: all .25s ease-in;
text-decoration: none;
transform: perspective(25rem) scale(1.03);
-webkit-font-smoothing: subpixel-antialiased;
}
/* line 105, ../../scss/templates/accesbox.scss */
.accessbox-template.btn-banner:hover img + h2, .accessbox-template.btn-banner:hover img ~ p, .accessbox-template.btn-banner:focus img + h2, .accessbox-template.btn-banner:focus img ~ p {
background: rgba(255, 255, 255, 0.85);
-webkit-backdrop-filter: blur(3px);
transition: all .25s ease-in;
}
/* line 112, ../../scss/templates/accesbox.scss */
.accessbox-template.btn-banner:hover img, .accessbox-template.btn-banner:focus img {
width: 101%;
height: 101%;
transition: all .5s ease;
}
/* line 120, ../../scss/templates/accesbox.scss */
.accessbox-template.btn-banner-large {
height: 280px;
padding: 0;
justify-content: flex-end;
}
/* line 125, ../../scss/templates/accesbox.scss */
.accessbox-template.btn-banner-large div:not(.butonera) {
padding: 10px 20px 10px 20px;
background: rgba(243, 243, 243, 0.95);
z-index: 0;
height: 80px;
bottom: 0;
position: relative;
overflow: hidden;
display: flex;
justify-content: center;
flex-direction: column;
transition: all .25s ease-out;
min-height: 80px;
height: auto;
}
/* line 139, ../../scss/templates/accesbox.scss */
.accessbox-template.btn-banner-large div:not(.butonera) .btn {
font-size: 15px;
}
/* line 144, ../../scss/templates/accesbox.scss */
.accessbox-template.btn-banner-large::before, .accessbox-template.btn-banner-large::after {
bottom: 22px;
top: auto;
}
/* line 151, ../../scss/templates/accesbox.scss */
.accessbox-template.btn-banner-large::after {
border-color: var(--bs-primary);
}
/* line 155, ../../scss/templates/accesbox.scss */
.accessbox-template.btn-banner-large .butonera .btn {
font-size: 16px;
}
/* line 163, ../../scss/templates/accesbox.scss */
.accessbox-template .link-banner .btn-banner-large {
height: auto;
}
/* line 166, ../../scss/templates/accesbox.scss */
.accessbox-template .link-banner .btn-banner-large div {
background-color: #ffffff;
border: 2px solid var(--bs-primary);
}
/* line 170, ../../scss/templates/accesbox.scss */
.accessbox-template .link-banner .btn-banner-large div h2 {
color: var(--bs-primary);
font-weight: 500;
}
/* line 176, ../../scss/templates/accesbox.scss */
.accessbox-template .link-banner .btn-banner-large:after {
background: var(--bs-gray-100);
}
Loading

0 comments on commit 5c6f993

Please sign in to comment.