Skip to content

Commit

Permalink
Merge pull request #544 from SergioCasCeb/reduce-example-padding-sergio
Browse files Browse the repository at this point in the history 
Reduced the examples padding
  • Loading branch information
@egekorkan
egekorkan authored Dec 10, 2023
2 parents 26ea33e + 5907ed9 commit 0525001
Show file tree
Hide file tree
Showing 3 changed files with 35 additions and 27 deletions.
32 changes: 18 additions & 14 deletions packages/web-new/src/styles/_examples-menu.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -322,24 +322,26 @@
background-color: var(--clr-neutral-50);
border-radius: 5px;
width: fit-content;
padding: 2rem;
padding: .5rem;
box-shadow: 0px 0px 5px 0px var(--clr-shadow);
transition: box-shadow 250ms ease-in-out;

&__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
gap: 1rem;

&--name {
width: 100%;
flex: 1;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 2rem;
gap: 1rem;
margin: 0 1rem;
cursor: pointer;
transition: all 250ms ease-in-out 250ms;
transition: all 250ms ease-in-out;

.example-icon{
width: 1.8rem;
Expand All @@ -361,7 +363,7 @@
background-color: transparent;
border: none;
border-left: 2px solid var(--clr-primary-500);
padding: 1rem 1rem 1rem 2rem;
padding: 1rem 1rem 1rem 1.5rem;
cursor: pointer;

i {
Expand All @@ -378,13 +380,19 @@
}
}

&:hover{
box-shadow: 0px 0px 10px 0px var(--clr-shadow);
}

&__content {
pointer-events: none;
display: flex;
flex-direction: column;
align-items: center;
align-items: flex-start;
justify-content: center;
flex-wrap: wrap;
padding: 0 1rem;
transition: padding 250ms ease-in-out 250ms;
}

&__description {
Expand All @@ -406,7 +414,7 @@
gap: 2rem;
height: 0;
opacity: 0;
transition: opacity 250ms ease-in-out 0ms, height 250ms ease-in-out 250ms, ;
transition: opacity 250ms ease-in-out 0ms, height 250ms ease-in-out 250ms;

button {
width: 100%;
Expand Down Expand Up @@ -458,14 +466,10 @@

.example.open {

.example__name {
border-bottom: 2px solid var(--clr-primary-500);
padding-bottom: 2rem;
transition: all 250ms ease-in-out 0s;
}

.example__content {
pointer-events: all;
padding: 0 1rem 1rem 1rem;
transition: padding 250ms ease-in-out 0s;
}

.example__description {
Expand Down
28 changes: 16 additions & 12 deletions packages/web-new/src/styles/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1939,24 +1939,26 @@ main .console {
border-radius: 5px;
width: -moz-fit-content;
width: fit-content;
padding: 2rem;
padding: 0.5rem;
box-shadow: 0px 0px 5px 0px var(--clr-shadow);
transition: box-shadow 250ms ease-in-out;
}
.examples-menu .examples-menu-container .examples-container__td .examples-category__container .example__header, .examples-menu .examples-menu-container .examples-container__tm .examples-category__container .example__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
gap: 1rem;
}
.examples-menu .examples-menu-container .examples-container__td .examples-category__container .example__header--name, .examples-menu .examples-menu-container .examples-container__tm .examples-category__container .example__header--name {
width: 100%;
flex: 1;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 2rem;
gap: 1rem;
margin: 0 1rem;
cursor: pointer;
transition: all 250ms ease-in-out 250ms;
transition: all 250ms ease-in-out;
}
.examples-menu .examples-menu-container .examples-container__td .examples-category__container .example__header--name .example-icon, .examples-menu .examples-menu-container .examples-container__tm .examples-category__container .example__header--name .example-icon {
width: 1.8rem;
Expand All @@ -1973,7 +1975,7 @@ main .console {
background-color: transparent;
border: none;
border-left: 2px solid var(--clr-primary-500);
padding: 1rem 1rem 1rem 2rem;
padding: 1rem 1rem 1rem 1.5rem;
cursor: pointer;
}
.examples-menu .examples-menu-container .examples-container__td .examples-category__container .example__header--quick i, .examples-menu .examples-menu-container .examples-container__tm .examples-category__container .example__header--quick i {
Expand All @@ -1984,13 +1986,18 @@ main .console {
.examples-menu .examples-menu-container .examples-container__td .examples-category__container .example__header--quick:hover i, .examples-menu .examples-menu-container .examples-container__tm .examples-category__container .example__header--quick:hover i {
color: var(--clr-primary-700);
}
.examples-menu .examples-menu-container .examples-container__td .examples-category__container .example:hover, .examples-menu .examples-menu-container .examples-container__tm .examples-category__container .example:hover {
box-shadow: 0px 0px 10px 0px var(--clr-shadow);
}
.examples-menu .examples-menu-container .examples-container__td .examples-category__container .example__content, .examples-menu .examples-menu-container .examples-container__tm .examples-category__container .example__content {
pointer-events: none;
display: flex;
flex-direction: column;
align-items: center;
align-items: flex-start;
justify-content: center;
flex-wrap: wrap;
padding: 0 1rem;
transition: padding 250ms ease-in-out 250ms;
}
.examples-menu .examples-menu-container .examples-container__td .examples-category__container .example__description, .examples-menu .examples-menu-container .examples-container__tm .examples-category__container .example__description {
height: 0;
Expand Down Expand Up @@ -2050,13 +2057,10 @@ main .console {
border-color: var(--clr-primary-700);
color: var(--clr-neutral-50);
}
.examples-menu .examples-menu-container .examples-container__td .examples-category__container .example.open .example__name, .examples-menu .examples-menu-container .examples-container__tm .examples-category__container .example.open .example__name {
border-bottom: 2px solid var(--clr-primary-500);
padding-bottom: 2rem;
transition: all 250ms ease-in-out 0s;
}
.examples-menu .examples-menu-container .examples-container__td .examples-category__container .example.open .example__content, .examples-menu .examples-menu-container .examples-container__tm .examples-category__container .example.open .example__content {
pointer-events: all;
padding: 0 1rem 1rem 1rem;
transition: padding 250ms ease-in-out 0s;
}
.examples-menu .examples-menu-container .examples-container__td .examples-category__container .example.open .example__description, .examples-menu .examples-menu-container .examples-container__tm .examples-category__container .example.open .example__description {
height: 9rem;
Expand Down
Loading

0 comments on commit 0525001

Please sign in to comment.