Skip to content

Commit beecab8

Browse files
dewanshDTdewanshDT
committed
added the mobile styles
1 parent aa886a9 commit beecab8

File tree

3 files changed

+177
-55
lines changed

3 files changed

+177
-55
lines changed

‎client/styles/base/_base.scss

Lines changed: 38 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -2,41 +2,50 @@
22
box-sizing: border-box;
33
}
44

5-
html, body {
5+
html,
6+
body {
67
font-size: #{$base-font-size}px;
78
}
89

910
/*Scrollbar theming */
1011
/* width */
11-
::-webkit-scrollbar {
12-
width: 10px;
13-
}
14-
/* Track */
15-
::-webkit-scrollbar-track {
16-
@include themify() {
17-
color: getThemifyVariable('modal-border-color');
12+
@media (min-width: 550px) {
13+
::-webkit-scrollbar {
14+
width: 10px;
15+
}
16+
/* Track */
17+
::-webkit-scrollbar-track {
18+
@include themify() {
19+
color: getThemifyVariable("modal-border-color");
20+
}
21+
}
22+
/* Handle */
23+
::-webkit-scrollbar-thumb {
24+
background: #888;
25+
}
26+
/* Handle on hover */
27+
::-webkit-scrollbar-thumb:hover {
28+
background: #555;
1829
}
19-
}
20-
/* Handle */
21-
::-webkit-scrollbar-thumb {
22-
background: #888;
23-
}
24-
/* Handle on hover */
25-
::-webkit-scrollbar-thumb:hover {
26-
background: #555;
2730
}
2831

29-
body, input, textarea {
32+
body,
33+
input,
34+
textarea {
3035
@include themify() {
31-
color: getThemifyVariable('primary-text-color');
36+
color: getThemifyVariable("primary-text-color");
3237
}
3338
}
3439

35-
body, input, textarea, button {
40+
body,
41+
input,
42+
textarea,
43+
button {
3644
font-family: Montserrat, sans-serif;
3745
}
3846

39-
.root-app, .app {
47+
.root-app,
48+
.app {
4049
min-height: 100%;
4150
height: 100%;
4251
}
@@ -47,28 +56,29 @@ a {
4756
}
4857
}
4958

50-
input, button {
59+
input,
60+
button {
5161
font-size: 1rem;
5262
}
5363

5464
input,
5565
textarea {
5666
padding: #{5 / $base-font-size}rem;
57-
border: 1px solid ;
67+
border: 1px solid;
5868
border-radius: 2px;
5969
padding: #{10 / $base-font-size}rem;
6070
@include themify() {
61-
color: getThemifyVariable('input-text-color');
62-
background-color: getThemifyVariable('input-background-color');
63-
border-color: getThemifyVariable('input-border-color');
71+
color: getThemifyVariable("input-text-color");
72+
background-color: getThemifyVariable("input-background-color");
73+
border-color: getThemifyVariable("input-border-color");
6474
}
6575
}
6676

6777
input::selection,
6878
textarea::selection {
6979
@include themify() {
70-
color: getThemifyVariable('input-selection-text-color');
71-
background-color: getThemifyVariable('input-selection-background-color');
80+
color: getThemifyVariable("input-selection-text-color");
81+
background-color: getThemifyVariable("input-selection-background-color");
7282
}
7383
}
7484

@@ -81,7 +91,7 @@ input[type="submit"] {
8191

8292
button[type="submit"]:disabled,
8393
input[type="submit"]:disabled {
84-
cursor: not-allowed;
94+
cursor: not-allowed;
8595
}
8696

8797
button {

‎client/styles/components/_dashboard-header.scss

Lines changed: 66 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,62 @@
44
flex: 1;
55
overflow: hidden;
66
display: flex;
7-
flex-direction:column;
7+
flex-direction: column;
8+
9+
@media (max-width: 770px) {
10+
padding: 0;
11+
12+
.dashboard-header__nav {
13+
display: flex;
14+
flex-direction: column;
15+
padding: #{10 / $base-font-size}rem #{16 / $base-font-size}rem;
16+
gap: #{10 / $base-font-size}rem;
17+
18+
.dashboard-header__tabs {
19+
border-bottom: none;
20+
padding-top: #{12 / $base-font-size}rem;
21+
}
22+
.dashboard-header__tab__title {
23+
font-weight: bold;
24+
font-size: #{15 / $base-font-size}rem;
25+
26+
@include themify() {
27+
color: getThemifyVariable("inactive-text-color");
28+
opacity: 0.7;
29+
}
30+
}
31+
32+
.dashboard-header__tab--selected {
33+
.dashboard-header__tab__title {
34+
@include themify() {
35+
color: getThemifyVariable("primary-text-color");
36+
opacity: 1;
37+
}
38+
}
39+
}
40+
41+
.dashboard-header__actions {
42+
padding: 0;
43+
44+
> :first-child {
45+
display: none;
46+
}
47+
48+
> *:not(:first-child) {
49+
margin-left: 0;
50+
width: 100%;
51+
52+
.searchbar__input {
53+
width: 100%;
54+
}
55+
}
56+
}
57+
}
58+
59+
.dashboard-header__header__title {
60+
display: none;
61+
}
62+
}
863
}
964

1065
.dashboard-header__header {
@@ -20,24 +75,26 @@
2075
.dashboard-header__tabs {
2176
display: flex;
2277
padding-top: #{24 / $base-font-size}rem;
23-
78+
2479
@include themify() {
25-
border-bottom: 1px solid getThemifyVariable('inactive-text-color');
80+
border-bottom: 1px solid getThemifyVariable("inactive-text-color");
2681
}
2782
}
2883

2984
.dashboard-header__tab {
3085
@include themify() {
31-
color: getThemifyVariable('inactive-text-color');
86+
color: getThemifyVariable("inactive-text-color");
3287
border-bottom: #{4 / $base-font-size}rem solid transparent;
3388

3489
padding: 0;
3590
margin-right: #{26 / $base-font-size}rem;
3691

37-
&:hover, &:focus, &.dashboard-header__tab--selected {
38-
color: getThemifyVariable('primary-text-color');
39-
border-bottom-color: getThemifyVariable('nav-hover-color');
40-
cursor: pointer;
92+
&:hover,
93+
&:focus,
94+
&.dashboard-header__tab--selected {
95+
color: getThemifyVariable("primary-text-color");
96+
border-bottom-color: getThemifyVariable("nav-hover-color");
97+
cursor: pointer;
4198
}
4299
}
43100

@@ -59,10 +116,7 @@
59116

60117
.dashboard-header__tab__title > * {
61118
display: inline-block;
62-
padding: 0 #{5 /$base-font-size}rem #{5 /$base-font-size}rem;
63-
}
64-
65-
.dashboard-header__nav {
119+
padding: 0 #{5 / $base-font-size}rem #{5 / $base-font-size}rem;
66120
}
67121

68122
.dashboard-header__actions {

‎client/styles/components/_sketch-list.scss

Lines changed: 73 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,69 @@
22
overflow-y: auto;
33
max-width: 100%;
44
min-height: 100%;
5+
6+
@media (max-width: 770px) {
7+
@include themify() {
8+
background-color: getThemifyVariable("modal-background-color");
9+
}
10+
11+
.sketches-table {
12+
display: flex;
13+
flex-direction: column;
14+
padding: #{13 / $base-font-size}rem;
15+
height: 100%;
16+
overflow-y: auto;
17+
18+
thead {
19+
display: none;
20+
}
21+
22+
tbody {
23+
display: flex;
24+
flex-direction: column;
25+
gap: #{12 / $base-font-size}rem;
26+
27+
.sketches-table__row {
28+
margin: 0;
29+
position: relative;
30+
display: flex;
31+
flex-wrap: wrap;
32+
padding: #{15 / $base-font-size}rem;
33+
height: fit-content;
34+
gap: #{8 / $base-font-size}rem;
35+
36+
@include themify() {
37+
border: 1px solid getThemifyVariable("modal-border-color");
38+
background-color: getThemifyVariable("search-background-color") !important;
39+
}
40+
41+
> th {
42+
padding-left: 0;
43+
width: 100%;
44+
font-weight: bold;
45+
margin-bottom: #{8 / $base-font-size}rem;
46+
}
47+
48+
> td {
49+
padding-left: 0;
50+
width: 30%;
51+
}
52+
53+
.sketch-list__dropdown-column {
54+
position: absolute;
55+
top: 0;
56+
right: 0;
57+
width: auto;
58+
}
59+
}
60+
}
61+
}
62+
}
563
}
664

765
.sketches-table {
866
width: 100%;
9-
67+
1068
max-height: 100%;
1169
border-spacing: 0;
1270
& .sketch-list__dropdown-column {
@@ -21,7 +79,7 @@
2179
top: 0;
2280
z-index: 1;
2381
@include themify() {
24-
background-color: getThemifyVariable('background-color');
82+
background-color: getThemifyVariable("background-color");
2583
}
2684
}
2785

@@ -36,7 +94,7 @@
3694

3795
& svg {
3896
@include themify() {
39-
fill: getThemifyVariable('inactive-text-color')
97+
fill: getThemifyVariable("inactive-text-color");
4098
}
4199
}
42100
}
@@ -45,17 +103,17 @@
45103
border-bottom: 2px dashed transparent;
46104
padding: #{3 / $base-font-size}rem 0;
47105
@include themify() {
48-
color: getThemifyVariable('inactive-text-color')
106+
color: getThemifyVariable("inactive-text-color");
49107
}
50108
}
51109

52110
.sketches-table__header--selected {
53111
@include themify() {
54-
border-color: getThemifyVariable('logo-color');
112+
border-color: getThemifyVariable("logo-color");
55113
}
56114
}
57115

58-
.sketches-table thead th:nth-child(1){
116+
.sketches-table thead th:nth-child(1) {
59117
padding-left: #{12 / $base-font-size}rem;
60118
}
61119

@@ -67,7 +125,7 @@
67125

68126
.sketches-table__row:nth-child(odd) {
69127
@include themify() {
70-
background: getThemifyVariable('table-row-stripe-color');
128+
background: getThemifyVariable("table-row-stripe-color");
71129
}
72130
}
73131

@@ -81,7 +139,7 @@
81139

82140
.sketches-table__row a {
83141
@include themify() {
84-
color: getThemifyVariable('primary-text-color');
142+
color: getThemifyVariable("primary-text-color");
85143
}
86144
}
87145

@@ -92,22 +150,22 @@
92150
.sketches-table thead {
93151
font-size: #{12 / $base-font-size}rem;
94152
@include themify() {
95-
color: getThemifyVariable('inactive-text-color')
153+
color: getThemifyVariable("inactive-text-color");
96154
}
97155
}
98156

99157
.sketches-table th {
100158
font-weight: normal;
101159
}
102160

103-
104161
.sketch-list__dropdown-button {
105-
width:#{25 / $base-font-size}rem;
106-
height:#{25 / $base-font-size}rem;
162+
width: #{25 / $base-font-size}rem;
163+
height: #{25 / $base-font-size}rem;
107164
@include themify() {
108-
& polygon, & path {
109-
fill: getThemifyVariable('inactive-text-color');
110-
}
165+
& polygon,
166+
& path {
167+
fill: getThemifyVariable("inactive-text-color");
168+
}
111169
}
112170
}
113171

0 commit comments

Comments
 (0)