Refactor scss (#6913)

* Refactoring scss

introduce scss variables for the media modal
fix css block structure corresponding to react components
fix flex layouts
remove background image of the loaded image on the media modal

* Fix typo
This commit is contained in:
Yuto Tokunaga 2018-03-26 20:59:21 +09:00 committed by Eugen Rochko
parent 605a92b460
commit f691afaae9
2 changed files with 26 additions and 28 deletions

View file

@ -1435,14 +1435,19 @@
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex;
align-items: center;
justify-content: center;
&.image-loader--loading { .image-loader__preview-canvas {
display: flex; max-width: $media-modal-media-max-width;
align-content: center; max-height: $media-modal-media-max-height;
background: url('../images/void.png') repeat;
object-fit: contain;
}
.image-loader__preview-canvas { &.image-loader--loading .image-loader__preview-canvas {
filter: blur(2px); filter: blur(2px);
}
} }
&.image-loader--amorphous .image-loader__preview-canvas { &.image-loader--amorphous .image-loader__preview-canvas {
@ -1455,7 +1460,16 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
align-content: center; align-items: center;
justify-content: center;
img {
max-width: $media-modal-media-max-width;
max-height: $media-modal-media-max-height;
width: auto;
height: auto;
object-fit: contain;
}
} }
.navigation-bar { .navigation-bar {
@ -3422,27 +3436,6 @@ a.status-card {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative; position: relative;
img,
canvas,
video {
max-width: 100%;
/*
put margins on top and bottom of image to avoid the screen coverd by
image.
*/
max-height: 80%;
width: auto;
height: auto;
margin: auto;
}
img,
canvas {
display: block;
background: url('../images/void.png') repeat;
object-fit: contain;
}
} }
.media-modal__closer { .media-modal__closer {

View file

@ -30,3 +30,8 @@ $ui-highlight-color: $classic-highlight-color !default; // Vibrant
// Language codes that uses CJK fonts // Language codes that uses CJK fonts
$cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW; $cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW;
// Variables for components
$media-modal-media-max-width: 100%;
// put margins on top and bottom of image to avoid the screen covered by image.
$media-modal-media-max-height: 80%;