flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Readapt the misuse of BEM, Code organization

Browse Source 
- -- is only for a modifier, not a child "child". Use master__child without the parent__ in it to make it more readable.
https://www.smashingmagazine.com/2016/06/battling-bem-extended-edition-common-problems-and-how-to-avoid-them/
- Redefine atom design components
This commit is contained in:
Félix Péault
2020-02-29 18:32:32 +01:00
parent 70ce97e9bc
commit 76c8c31c89
17 changed files with 387 additions and 391 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
src/style/organisms/_photos.scss
View File

@@ -26,16 +26,6 @@
transform: rotate(-90deg) translateX(-100%);
}
// Container
&--wrap {
@include breakpoint (md) {
position: sticky;
z-index: 10;
top: 32px;
height: 100%;
}
}
p {
font-size: rem(12px);
color: $color-lightgray;
@@ -49,6 +39,16 @@
}
}
// Container
&__sidewrap {
@include breakpoint (md) {
position: sticky;
z-index: 10;
top: 32px;
height: 100%;
}
}
// Each photo
.photo {
position: relative;
@@ -87,14 +87,15 @@
}
// Image
.photo__image {
justify-content: flex-end;
&--date {
.photo {
&__image {
justify-content: flex-end;
}
&__date {
right: 100%;
left: -30px;
}
&--number {
&__number {
right: 77%;
left: auto;
text-align: right;
@@ -104,7 +105,7 @@
}
// Number
&__image--number {
&__number {
@include breakpoint (sm) {
transform: translate(-50%, var(--translate));
will-change: transform;
@@ -185,23 +186,21 @@
}
}
// Image
&__image {
&--img {
border-radius: 8px;
}
&--number {
font-size: rem(96px);
bottom: -88px;
right: 24px;
z-index: 1;
transform: none;
top: auto;
left: auto;
}
&--date {
display: none;
}
// Image informations
&__img {
border-radius: 8px;
}
&__number {
font-size: rem(96px);
bottom: -88px;
right: 24px;
z-index: 1;
transform: none;
top: auto;
left: auto;
}
&__date {
display: none;
}
}