Skip to content

Commit d9ee005

Browse files
smnandresmnandre
committed
wip stuff
1 parent 835b48a commit d9ee005

33 files changed

+746
-320
lines changed

‎ux.symfony.com/assets/images/icons/book-text.svg‎

Lines changed: 5 additions & 0 deletions
Loading

‎ux.symfony.com/assets/images/icons/circle-check.svg‎

Lines changed: 1 addition & 1 deletion
Loading

‎ux.symfony.com/assets/images/icons/support.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎ux.symfony.com/assets/images/icons/symfonycast.svg‎

Lines changed: 5 additions & 0 deletions
Loading

‎ux.symfony.com/assets/styles/app.scss‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
@import "../../vendor/twbs/bootstrap/scss/buttons";
2929
@import "../../vendor/twbs/bootstrap/scss/transitions";
3030
@import "../../vendor/twbs/bootstrap/scss/dropdown";
31-
// @import "../../vendor/twbs/bootstrap/scss/button-group";
31+
@import "../../vendor/twbs/bootstrap/scss/button-group";
3232
@import "../../vendor/twbs/bootstrap/scss/nav";
3333
@import "../../vendor/twbs/bootstrap/scss/navbar";
3434
@import "../../vendor/twbs/bootstrap/scss/card";
@@ -68,12 +68,15 @@
6868
@import "components/DocsLink";
6969
@import "components/file_tree";
7070
@import "components/Icon";
71+
@import "components/IconGrid";
72+
@import "components/IconCard";
73+
@import "components/IconSearch";
74+
@import "components/IconSetCard";
7175
@import "components/PackageHeader";
7276
@import "components/PackageBox";
7377
@import "components/Terminal";
7478
@import "components/TerminalCommand";
7579
@import "components/ThemeSwitcher";
76-
@import "components/Icons";
7780

7881
// Utilities
7982
@import "utilities/arrow";

‎ux.symfony.com/assets/styles/components/_DemoCard.scss‎

Lines changed: 0 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -22,28 +22,6 @@
2222
box-shadow: 0 0.125rem 2rem .25rem var(--bs-secondary-bg-subtle);
2323
}
2424

25-
.DemoCard__badge {
26-
position: absolute;
27-
right: .75rem;
28-
top: .75rem;
29-
color: var(--bs-body-color);
30-
padding: .25rem;
31-
font-size: .8rem;
32-
text-transform: initial;
33-
background: linear-gradient(113.84deg, #D65831 0%, #D2D631 36.52%, #31D673 71.83%, #3aa3ff 100%);
34-
background: var(--gradient);
35-
border-radius: 50%;
36-
animation: linear 2000s infinite alternate;
37-
}
38-
@keyframes badge--rotation {
39-
0% {
40-
transform: rotate(0deg)
41-
}
42-
100% {
43-
transform: rotate(180deg)
44-
}
45-
}
46-
4725
.DemoCard__media {
4826
border-top-left-radius: var(--radius);
4927
border-top-right-radius: var(--radius);

‎ux.symfony.com/assets/styles/components/_IconCard.scss‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
2+
.IconCard {
3+
display: grid;
4+
border-radius: 0.75rem;
5+
border: 1px solid var(--bs-secondary-bg-subtle);
6+
background: rgb(255 255 255 / 50%);
7+
padding: 0.5rem;
8+
aspect-ratio: 1;
9+
position: relative;
10+
transition: 150ms linear;
11+
}
12+
.IconCard:hover {
13+
transition: 250ms ease-in-out;
14+
transform: scale(1.05);
15+
}
16+
17+
.IconCard a {
18+
padding-block-end: 1rem;
19+
display: grid;
20+
place-items: center;
21+
align-content: center;
22+
}
23+
.Icons-icon a::after {
24+
position: absolute;
25+
top: 0;
26+
right: 0;
27+
bottom: 0;
28+
left: 0;
29+
z-index: 1;
30+
content: "";
31+
}
32+
.IconCard__icon {
33+
width: 50%;
34+
max-width: 2.5rem;
35+
height: auto;
36+
display: block;
37+
}
38+
.IconCard__prefix {
39+
position: absolute;
40+
inset: .5rem .5rem auto;
41+
display: block;
42+
text-align: center;
43+
font-size: .7rem;
44+
font-family: var(--font-family-code);
45+
letter-spacing: -1px;
46+
opacity: .25;
47+
line-height: 1.1;
48+
}
49+
.IconCard__name {
50+
position: absolute;
51+
inset: auto .5rem .5rem;
52+
display: block;
53+
text-align: center;
54+
font-size: .7rem;
55+
font-family: var(--font-family-code);
56+
opacity: .25;
57+
line-height: 1.1;
58+
}
59+
60+
61+
62+
[data-bs-theme="dark"] {
63+
.IconCard {
64+
background: rgb(0 0 0 / 50%);
65+
}
66+
.IconCard__icon {
67+
filter: invert(1) hue-rotate(180deg);
68+
}
69+
}
70+
71+
.Icons-icon:hover {
72+
fill: #f4645f;
73+
}

‎ux.symfony.com/assets/styles/components/_IconGrid.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.IconGrid {
2+
--min: 10rem;
3+
display: grid;
4+
grid-template-columns: repeat(auto-fill, minmax(var(--min), 1fr));
5+
gap: 1.5rem;
6+
justify-content: center;
7+
align-items: center;
8+
}

‎ux.symfony.com/assets/styles/components/_IconSearch.scss‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
// -----------------------------------------------------------------
2+
// IconSearch
3+
// -----------------------------------------------------------------
4+
5+
.IconSearch {
6+
7+
}
8+
9+
.IconSearch__Input {
10+
11+
border: 1px solid var(--bs-secondary-bg-subtle);
12+
13+
&:focus {
14+
border-color: var(--bs-primary);
15+
box-shadow: none;
16+
outline: revert;
17+
}
18+
}

‎ux.symfony.com/assets/styles/components/_IconSetCard.scss‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
// -----------------------------------------------------------------
2+
// IconSetCard
3+
// -----------------------------------------------------------------
4+
5+
.IconSetCard {
6+
--radius: .75rem;
7+
position: relative;
8+
9+
--hue: calc(var(--index) * 65);
10+
11+
--hue: calc(var(--index) * 77);
12+
13+
--iconset-color: lch(70% 110 var(--hue, 240));
14+
--iconset-color-bg: lch(80% 30 var(--hue, 240));
15+
16+
color: var(--iconset-color);
17+
18+
display: flex;
19+
flex-direction: column;
20+
21+
border-radius: var(--radius);
22+
border: 1px solid var(--bs-secondary-bg-subtle);
23+
24+
transition: transform 250ms ease-in-out, box-shadow 250ms ease-in-out;
25+
transform: translateY(0);
26+
box-shadow: 0 0 0 transparent;
27+
28+
}
29+
.IconSetCard:hover {
30+
transform: translateY(-.25rem);
31+
box-shadow: 0 0.125rem 2rem .25rem var(--bs-secondary-bg-subtle);
32+
}
33+
34+
.IconSetCard__media {
35+
border-top-left-radius: var(--radius);
36+
border-top-right-radius: var(--radius);
37+
display: grid;
38+
width: 100%;
39+
min-height: 100px;
40+
aspect-ratio: 5/3;
41+
overflow: hidden;
42+
background: var(--iconset-color-bg);
43+
place-content: stretch;
44+
}
45+
46+
.IconSetCard__icons {
47+
max-height: 100%;
48+
width: 100%;
49+
border-radius: .25rem;
50+
opacity: .80;
51+
place-content: stretch;
52+
display: grid;
53+
grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
54+
justify-content: stretch;
55+
align-items: stretch;
56+
}
57+
.IconSetCard__icon {
58+
display: grid;
59+
place-items: center;
60+
61+
box-shadow: 0px 0px 1px 0px #0007;
62+
63+
img {
64+
width: 50%;
65+
max-width: 24px;
66+
height: auto;
67+
display: block;
68+
mix-blend-mode: overlay;
69+
opacity: .8;
70+
//filter: drop-shadow(2px 1px var(--iconset-color));
71+
}
72+
}
73+
74+
.IconSetCard__icon:nth-child(even) {
75+
background: rgb(0 0 0 / 0.03);
76+
}
77+
.IconSetCard__icon:nth-child(odd) {
78+
background: rgb(255 255 255 / 0.03);
79+
}
80+
81+
.IconSetCard__content {
82+
padding: .75rem 1rem;
83+
flex: 1;
84+
border-bottom-left-radius: var(--radius);
85+
border-bottom-right-radius: var(--radius);
86+
gap: .5rem;
87+
display: flex;
88+
flex-direction: row;
89+
align-items: center;
90+
justify-content: space-between;
91+
}
92+
93+
.IconSetCard__title {
94+
font-size: 1.1rem;
95+
font-weight: 700;
96+
margin: 0;
97+
font-family: var(--font-family-title);
98+
padding: .25rem;
99+
color: var(--bs-body-color);
100+
a {
101+
color: inherit;
102+
}
103+
}
104+
105+
.IconSetCard__total {
106+
font-size: 0.9rem;
107+
font-stretch: semi-condensed;
108+
color: var(--bs-body-color);
109+
110+
em {
111+
color: var(--iconset-color);
112+
font-family: var(--font-family-code);
113+
font-style: normal;
114+
font-weight: 500;
115+
}
116+
117+
span {
118+
font-size: .75rem;
119+
}
120+
}
121+
122+
.IconSetCard__description {
123+
font-size: 0.9rem;
124+
font-stretch: semi-condensed;
125+
font-weight: 400;
126+
transition: all 250ms ease-in-out;
127+
opacity: .65;
128+
line-height: 1.4;
129+
padding: .25rem;
130+
margin: 0;
131+
}
132+
.IconSetCard:hover .IconSetCard__description {
133+
opacity: .85;
134+
}

0 commit comments

Comments
 (0)