mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2024-12-23 17:40:23 +03:00
Improved styles
This commit is contained in:
parent
6abc0e7d02
commit
2be771cbcc
5 changed files with 12 additions and 21 deletions
|
@ -1,5 +1,4 @@
|
||||||
@import '../utils/base';
|
@import '../utils/base';
|
||||||
@import '../utils/mixins/box-shadow';
|
|
||||||
@import '../utils/mixins/vertical-align';
|
@import '../utils/mixins/vertical-align';
|
||||||
|
|
||||||
$asideMenuMobileWidth: 280px;
|
$asideMenuMobileWidth: 280px;
|
||||||
|
@ -26,8 +25,7 @@ $asideMenuMobileWidth: 280px;
|
||||||
width: $asideMenuMobileWidth !important;
|
width: $asideMenuMobileWidth !important;
|
||||||
transition: left 300ms;
|
transition: left 300ms;
|
||||||
top: $headerHeight - 3px;
|
top: $headerHeight - 3px;
|
||||||
|
box-shadow: -10px 0 50px 11px rgba(0, 0, 0, .55);
|
||||||
@include box-shadow(-10px 0 50px 11px rgba(0, 0, 0, .55));
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,4 +0,0 @@
|
||||||
@mixin border-radius($radius) {
|
|
||||||
border-radius: $radius;
|
|
||||||
-webkit-border-radius: $radius;
|
|
||||||
}
|
|
|
@ -1,4 +0,0 @@
|
||||||
@mixin box-shadow($shadow) {
|
|
||||||
-webkit-box-shadow: $shadow;
|
|
||||||
box-shadow: $shadow;
|
|
||||||
}
|
|
8
src/utils/mixins/fit-with-margin.scss
Normal file
8
src/utils/mixins/fit-with-margin.scss
Normal file
|
@ -0,0 +1,8 @@
|
||||||
|
@mixin fit-with-margin($margin) {
|
||||||
|
$offset: $margin * 2;
|
||||||
|
|
||||||
|
width: calc(100% - #{$offset});
|
||||||
|
max-width: calc(100% - #{$offset});
|
||||||
|
height: calc(100% - #{$offset});
|
||||||
|
margin: $margin;
|
||||||
|
}
|
|
@ -1,24 +1,17 @@
|
||||||
@import '../../utils/base';
|
@import '../../utils/base';
|
||||||
|
@import '../../utils/mixins/fit-with-margin';
|
||||||
|
|
||||||
.map-modal__modal {
|
.map-modal__modal {
|
||||||
@media (min-width: $mdMin) {
|
@media (min-width: $mdMin) {
|
||||||
$margin: 20px;
|
$margin: 20px;
|
||||||
$offset: $margin * 2;
|
|
||||||
|
|
||||||
width: calc(100% - #{$offset});
|
@include fit-with-margin($margin);
|
||||||
max-width: calc(100% - #{$offset});
|
|
||||||
height: calc(100% - #{$offset});
|
|
||||||
margin: $margin;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: $smMax) {
|
@media (max-width: $smMax) {
|
||||||
$margin: 10px;
|
$margin: 10px;
|
||||||
$offset: $margin * 2;
|
|
||||||
|
|
||||||
width: calc(100% - #{$offset});
|
@include fit-with-margin($margin);
|
||||||
max-width: calc(100% - #{$offset});
|
|
||||||
height: calc(100% - #{$offset});
|
|
||||||
margin: $margin;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue