Skip to content

Commit eaccf9a

Browse files
dkamburovdkamburov
authored
Merge pull request #32 from IgniteUI/vnext
Merge pull request #31 from IgniteUI/mtihova/grid-demos-headers
2 parents cafca84 + 82b6d00 commit eaccf9a

File tree

3 files changed

+218
-153
lines changed

3 files changed

+218
-153
lines changed

‎src/assets/icons.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,4 @@
1-
export const FILE_DOWNLOAD = `<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 24 24"><path d="M10.41 11.21V3.616c0-.43.167-.84.466-1.144A1.578 1.578 0 0 1 12 2c.422 0 .826.17 1.125.473.298.304.466.715.466 1.144v7.586l2.195-2.282a1.49 1.49 0 0 1 1.05-.455 1.47 1.47 0 0 1 1.06.434l.022.021c.284.294.443.689.443 1.1 0 .412-.16.807-.443 1.1l-4.81 4.972a1.496 1.496 0 0 1-1.069.454h-.084a1.47 1.47 0 0 1-1.066-.454L6.076 11.12a1.586 1.586 0 0 1-.44-1.098c0-.41.158-.805.44-1.098a1.49 1.49 0 0 1 1.05-.457 1.47 1.47 0 0 1 1.06.432l.025.025 2.199 2.284Z"/><path d="M20.41 14.729a1.59 1.59 0 0 0-1.592 1.591v1.613a.886.886 0 0 1-.884.884H6.07a.892.892 0 0 1-.89-.884V16.32a1.591 1.591 0 0 0-3.181 0v1.618A4.087 4.087 0 0 0 6.066 22h11.868A4.07 4.07 0 0 0 22 17.931V16.32a1.59 1.59 0 0 0-1.59-1.591Z"/></svg>`;
1+
export const FILE_DOWNLOAD = `<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 24 24"><path fill="black" d="M10.41 11.21V3.616c0-.43.167-.84.466-1.144A1.578 1.578 0 0 1 12 2c.422 0 .826.17 1.125.473.298.304.466.715.466 1.144v7.586l2.195-2.282a1.49 1.49 0 0 1 1.05-.455 1.47 1.47 0 0 1 1.06.434l.022.021c.284.294.443.689.443 1.1 0 .412-.16.807-.443 1.1l-4.81 4.972a1.496 1.496 0 0 1-1.069.454h-.084a1.47 1.47 0 0 1-1.066-.454L6.076 11.12a1.586 1.586 0 0 1-.44-1.098c0-.41.158-.805.44-1.098a1.49 1.49 0 0 1 1.05-.457 1.47 1.47 0 0 1 1.06.432l.025.025 2.199 2.284Z"/><path fill="black" d="M20.41 14.729a1.59 1.59 0 0 0-1.592 1.591v1.613a.886.886 0 0 1-.884.884H6.07a.892.892 0 0 1-.89-.884V16.32a1.591 1.591 0 0 0-3.181 0v1.618A4.087 4.087 0 0 0 6.066 22h11.868A4.07 4.07 0 0 0 22 17.931V16.32a1.59 1.59 0 0 0-1.59-1.591Z"/></svg>`;
2+
export const FULL_SCREEN = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M4 4h6M4 4v6M20 20h-6M20 20v-6M20 4h-6M20 4v6M4 20h6M4 20v-6"/></svg>`;
3+
export const VIEW_MORE = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M7 17L17 7"/><path d="M17 7H7"/><path d="M17 7V17"/></svg>`;
4+
export const EXIT_FULL_SCREEN = `<svg width="24" height="24" viewBox="0 0 20 20" fill="none" stroke="black" stroke-width="2" stroke-linecap="butt" stroke-linejoin="miter" xmlns="http://www.w3.org/2000/svg"><line x1="5.5" y1="2" x2="5.5" y2="6.5" /><line x1="5.5" y1="6.5" x2="1" y2="6.5" /><line x1="14.5" y1="2" x2="14.5" y2="6.5" /><line x1="14.5" y1="6.5" x2="19" y2="6.5" /><line x1="5.5" y1="17" x2="5.5" y2="12.5" /><line x1="5.5" y1="12.5" x2="1" y2="12.5" /><line x1="14.5" y1="17" x2="14.5" y2="12.5" /><line x1="14.5" y1="12.5" x2="19" y2="12.5" /></svg>`

‎src/views/home/home-view.scss‎

Lines changed: 62 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,8 @@
3030

3131
.tab-container {
3232
width: 100%;
33-
min-height: 132px;
3433
overflow: hidden;
3534
flex-shrink: 0;
36-
padding: 16px;
3735
display: flex;
3836
flex-direction: row;
3937
justify-content: space-between;
@@ -48,150 +46,112 @@
4846
}
4947

5048
.tab-item-container {
51-
height: 100%;
49+
width: 100%;
50+
height: 72px;
5251
display: inline-flex;
5352
}
5453

5554
.tab-item {
55+
align-items: center;
5656
height: 100%;
5757
display: flex;
5858
flex-grow: 1;
5959
flex-basis: 0;
60-
flex-direction: column;
61-
justify-content: space-between;
60+
flex-direction: row;
61+
justify-content: center;
6262
gap: 8px;
6363
padding: 12px;
6464
cursor: pointer;
6565
user-select: none;
66-
border-bottom: 1px solid var(--ig-gray-300);
66+
color: black;
6767

6868
&--selected {
6969
border-bottom: 3px solid var(--ig-primary-500);
70+
color: var(--ig-primary-500) !important;
7071
}
7172

7273
&:hover {
73-
background: hsl(from var(--ig-gray-100) h s l/0.5);
74+
background-color: var(--ig-gray-200);
7475
}
7576
}
7677

7778
.tab-header {
7879
display: flex;
7980
flex-direction: row;
8081
gap: 8px;
81-
color: var(--ig-gray-900);
82-
font-size: 20px;
82+
font-size: 16px;
8383
font-weight: 600;
84-
line-height: 24px;
84+
line-height: 20px;
8585
letter-spacing: 0.15px;
8686
--ig-size: var(--ig-size-medium);
87-
88-
&--disabled {
89-
color: var(--ig-gray-700) !important;
90-
}
9187
}
9288

93-
.tab-content {
94-
display: flex;
95-
flex-direction: column;
96-
gap: 4px;
97-
color: var(--ig-gray-900);
98-
font-size: 14px;
99-
font-weight: 400;
100-
font-family: "aktiv-grotesk", sans-serif;
101-
line-height: 20px;
102-
letter-spacing: 0.25px;
103-
104-
&--disabled {
105-
color: var(--ig-gray-700) !important;
106-
}
89+
.tabs-info-wrapper-element {
90+
width: 100%;
10791
}
10892

109-
.tab-actions {
93+
.current-tab-info {
11094
display: flex;
111-
flex-direction: row;
112-
align-items: center;
11395
justify-content: space-between;
114-
--ig-size: var(--ig-size-small);
115-
--disabled-icon-color: #ffffff;
116-
117-
igc-icon-button.button--disabled::part(base) {
118-
background-color: var(--ig-gray-600);
119-
color: #ffffff;
120-
&:hover {
121-
background-color: var(--ig-gray-800);
122-
}
96+
gap: 2rem;
97+
width: 100%;
98+
height: 90px;
99+
padding: 20px 24px;
100+
border: 1px solid #D6D6D6;
101+
102+
.sample-info {
103+
height: 58px;
104+
display: flex;
105+
flex-direction: column;
106+
row-gap: 8px;
123107
}
124108

125-
igc-icon-button.button--enabled::part(base) {
126-
background-color: #212121;
127-
color: #ffffff;
128-
&:hover {
129-
background-color: var(--ig-gray-600);
130-
}
109+
.tab-description {
110+
font-weight: 300;
111+
font-size: 12px;
112+
line-height: 100%;
113+
letter-spacing: 0%;
131114
}
132115

133-
a {
134-
width: unset;
135-
padding-bottom: 2px;
136-
transition: background-size 350ms;
137-
background: linear-gradient(0deg, var(--bg-color), var(--bg-color)) no-repeat right bottom / 0 var(--bg-h);
138-
--bg-h: 2px;
139-
--bg-color: var(--ig-primary-500);
140-
141-
&:where(:hover, :focus-visible) {
142-
background-size: 100% var(--bg-h);
143-
background-position-x: left;
116+
.sample-actions {
117+
display: flex;
118+
gap: 8px;
119+
align-items: center;
120+
line-height: 100%;
121+
font-size: 14px;
122+
123+
.theme-info {
124+
display: flex;
125+
flex-direction: column;
126+
justify-content: center;
127+
font-weight: 600;
128+
letter-spacing: 0.15px;
129+
height: 40px;
130+
padding-right: 8px;
131+
border-right: 1px solid #D6D6D6;
144132
}
145133

146-
&.link--disabled {
147-
color: var(--ig-primary-200);
148-
--bg-color: var(--ig-primary-200);
134+
.action-buttons {
135+
display: flex;
136+
justify-content: space-between;
137+
gap: 16px;
138+
139+
.custom-button::part(base) {
140+
color: black;
141+
border-color: #D6D6D6;
142+
text-transform: unset;
149143

150-
&:hover {
151-
color: var(--ig-primary-500);
152-
--bg-color: var(--ig-primary-500);
144+
igc-icon::part(icon) {
145+
color: black;
146+
}
153147
}
154148
}
155149
}
156150
}
157151

158-
.learn-text {
159-
text-decoration: none;
160-
color: var(--ig-primary-500);
161-
font-size: 14px;
162-
font-weight: 700;
163-
font-family: "aktiv-grotesk", sans-serif;
164-
line-height: 20px;
165-
}
166-
167-
.tooltip {
168-
position: relative;
169-
display: inline-block;
170-
171-
& .tooltip--text {
172-
visibility: hidden;
173-
background: #85888fe6;
174-
box-shadow: rgba(36, 37, 44, 0.2) 0px 2px 2px 0px;
175-
color: white;
176-
padding: 4px 8px;
177-
font-size: 0.625rem;
178-
border-radius: 4px;
179-
min-height: 24px;
180-
top: 100%;
181-
left: 50%;
182-
width: 120px;
183-
transform: translateX(-50%) translateY(5px);
184-
text-align: center;
185-
position: absolute;
186-
z-index: 1;
187-
font-family: var(--ig-font-family);
188-
opacity: 0;
189-
transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
190-
}
191-
&:hover > .tooltip--text {
192-
opacity: 1;
193-
transform: translateX(-50%) translateY(0);
194-
visibility: visible;
195-
transition-delay: 1s;
196-
}
152+
:-webkit-full-screen {
153+
width: 100vw;
154+
height: 100vh;
155+
overflow: auto;
156+
background: white;
197157
}

0 commit comments

Comments
 (0)