honeymoose
/
sp-dev-fx-webparts
mirror of https://github.com/pnp/sp-dev-fx-webparts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update HeroWebpart.module.scss 

Update to hero styling for the different layout options
This commit is contained in:
Omar 2021-07-28 12:46:32 +01:00
parent 5ee69a21e5
commit 94a7f97ab5
1 changed files with 37 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
samples/react-hero-webpart/src/webparts/heroWebpart/components/HeroWebpart.module.scss
View File

@ -72,21 +72,6 @@
} }
} }
.carouselContent{
color:"[theme: themeSecondary, default: #0078d7]";
min-height:600px;
height:600px;
}
.carouselButtonsContainer{
color:"[theme: themeSecondary, default: #0078d7]";
}
.carouselContentOne, .carouselContentTwo, .carouselContentThree, .carouselContentFour{
color:"[theme: themeSecondary, default: #0078d7]";
min-height:530px;
height:530px;
}
.heroTitleHover{ .heroTitleHover{
@include ms-font-xl; @include ms-font-xl;
padding-bottom: 10px; padding-bottom: 10px;
@ -264,6 +249,43 @@
} }
} }
:global(.heroThree) .heroItem .flexcontainer:nth-child(2) {
.heroTitle {
font-size: 24px;
}
.heroTitleHover{
font-size: 22px;
}
.info{
font-size: 18px;
}
}
:global(.heroFour) .heroItem .flexcontainer:nth-child(2){
.heroTitle {
font-size: 20px;
}
.heroTitleHover{
font-size: 18px;
}
.info{
font-size: 14px;
}
}
:global(.heroFive) .heroItem .flexcontainer:nth-child(2){
.heroTitle {
font-size: 20px;
}
.heroTitleHover{
font-size: 18px;
}
.info{
font-size: 14px;
}
}
@media all and (max-width: 768px) { @media all and (max-width: 768px) {
.heroItem { .heroItem {
flex-direction: column; flex-direction: column;