mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-23 09:30:31 +03:00
Code Issues Projects Releases Packages Wiki Activity

Improved styles

Browse source
This commit is contained in:
Alejandro Celaya 2019-01-07 13:45:16 +01:00
parent 6abc0e7d02
commit 2be771cbcc
5 changed files with 12 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/common/AsideMenu.scss
View file

@ -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));
} }
} }

4
src/utils/mixins/border-radius.scss
View file

@ -1,4 +0,0 @@
@mixin border-radius($radius) {
border-radius: $radius;
-webkit-border-radius: $radius;
}

4
src/utils/mixins/box-shadow.scss
View file

@ -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
View 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;
}

13
src/visits/helpers/MapModal.scss
View file

@ -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;
} }
} }