aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass/include
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/sass/include')
-rw-r--r--client/src/sass/include/_miniature.scss28
-rw-r--r--client/src/sass/include/_mixins.scss4
-rw-r--r--client/src/sass/include/_variables.scss14
3 files changed, 21 insertions, 25 deletions
diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss
index 457a7151c..426263444 100644
--- a/client/src/sass/include/_miniature.scss
+++ b/client/src/sass/include/_miniature.scss
@@ -178,32 +178,20 @@ $play-overlay-width: 18px;
178 178
179// Use margin by default, or padding if $margin is false 179// Use margin by default, or padding if $margin is false
180@mixin fluid-videos-miniature-margins ($margin: true, $min-margin: 0) { 180@mixin fluid-videos-miniature-margins ($margin: true, $min-margin: 0) {
181 --fluidVideosMiniatureMargins: #{pvar(--horizontalMarginContent)};
182
181 @if $margin { 183 @if $margin {
182 margin-left: $not-expanded-horizontal-margins !important; 184 margin-left: var(--fluidVideosMiniatureMargins) !important;
183 margin-right: $not-expanded-horizontal-margins !important; 185 margin-right: var(--fluidVideosMiniatureMargins) !important;
184 } @else { 186 } @else {
185 padding-left: $not-expanded-horizontal-margins !important; 187 padding-left: var(--fluidVideosMiniatureMargins) !important;
186 padding-right: $not-expanded-horizontal-margins !important; 188 padding-right: var(--fluidVideosMiniatureMargins) !important;
187 } 189 }
188 190
189 @media screen and (max-width: $mobile-view) { 191 @media screen and (max-width: $mobile-view) {
190 width: auto; 192 --fluidVideosMiniatureMargins: $min-margin;
191 193
192 @if $margin { 194 width: auto;
193 margin: $min-margin !important;
194 } @else {
195 padding: $min-margin !important;
196 }
197 }
198
199 @media screen and (min-width: #{breakpoint(fhd)}) {
200 @if $margin {
201 margin-left: 6vw !important;
202 margin-right: 6vw !important;
203 } @else {
204 padding-left: 6vw !important;
205 padding-right: 6vw !important;
206 }
207 } 195 }
208} 196}
209 197
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index b3190a4e3..58920ce36 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -856,7 +856,7 @@
856 } 856 }
857} 857}
858 858
859@mixin admin-sub-header-responsive ($horizontal-margins) { 859@mixin admin-sub-header-responsive {
860 flex-direction: column; 860 flex-direction: column;
861 861
862 .form-sub-title { 862 .form-sub-title {
@@ -871,7 +871,7 @@
871 white-space: nowrap; 871 white-space: nowrap;
872 height: 50px; 872 height: 50px;
873 padding: 10px 0; 873 padding: 10px 0;
874 width: calc(100vw - #{$horizontal-margins*2}); 874 width: 100%;
875 875
876 a { 876 a {
877 margin-left: 5px; 877 margin-left: 5px;
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index 532eaf650..8c5e75864 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -34,7 +34,7 @@ $green: #39CC0B;
34$grey-actor-name: #777272; 34$grey-actor-name: #777272;
35 35
36$expanded-horizontal-margins: 150px; 36$expanded-horizontal-margins: 150px;
37$not-expanded-horizontal-margins: 30px; 37$not-expanded-horizontal-margins: 60px;
38 38
39$button-height: 30px; 39$button-height: 30px;
40 40
@@ -122,11 +122,19 @@ $variables: (
122 --supportButtonHeartColor: var(--supportButtonHeartColor), 122 --supportButtonHeartColor: var(--supportButtonHeartColor),
123 123
124 --embedForegroundColor: var(--embedForegroundColor), 124 --embedForegroundColor: var(--embedForegroundColor),
125 --embedBigPlayBackgroundColor: var(--embedBigPlayBackgroundColor) 125 --embedBigPlayBackgroundColor: var(--embedBigPlayBackgroundColor),
126
127 --horizontalMarginContent: var(--horizontalMarginContent),
128 --mainColWidth: var(--mainColWidth)
126); 129);
127 130
131// SASS type check our CSS variables
128@function pvar($variable) { 132@function pvar($variable) {
129 @return map-get($variables, $variable); 133 @if map-has-key($variables, $variable) {
134 @return map-get($variables, $variable);
135 } @else {
136 @error "ERROR: Variable #{$variable} does not exist";
137 }
130} 138}
131 139
132/*** z-index groups ***/ 140/*** z-index groups ***/