styles: add mobile support
This commit is contained in:
parent
cdab411e4b
commit
171bba517d
|
@ -5,6 +5,9 @@
|
||||||
padding: 10px 24px;
|
padding: 10px 24px;
|
||||||
margin-left: $button-margin-left;
|
margin-left: $button-margin-left;
|
||||||
margin-right: $button-margin-right;
|
margin-right: $button-margin-right;
|
||||||
|
// Needed because on mobile buttons can get vertical
|
||||||
|
margin-top: $button-margin-vertical;
|
||||||
|
margin-bottom: $button-margin-vertical;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
|
@ -12,6 +12,7 @@
|
||||||
border-radius: $dialog-radius;
|
border-radius: $dialog-radius;
|
||||||
box-shadow: $shadow-large;
|
box-shadow: $shadow-large;
|
||||||
padding: $dialog-inset;
|
padding: $dialog-inset;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
p {
|
p {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
@ -52,3 +53,14 @@
|
||||||
transform: translateY(-#{$dialog-height});
|
transform: translateY(-#{$dialog-height});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* When the screen cannot accomodate the full dialog (e.g. mobile)
|
||||||
|
*/
|
||||||
|
@media screen and ( max-width: $dialog-width ) {
|
||||||
|
.ReactModal__Content_My {
|
||||||
|
width: 100vw;
|
||||||
|
left: 0;
|
||||||
|
top: $dialog-margin / 2;
|
||||||
|
}
|
||||||
|
}
|
|
@ -15,6 +15,7 @@
|
||||||
box-shadow: $shadow-medium;
|
box-shadow: $shadow-medium;
|
||||||
border-radius: $content-radius;
|
border-radius: $content-radius;
|
||||||
padding: $content-inset;
|
padding: $content-inset;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
.switch-wrapper, .switch-wrapper > div {
|
.switch-wrapper, .switch-wrapper > div {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@ -31,7 +32,10 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.content-buttons {
|
.content-buttons {
|
||||||
margin-top: $content-inset;
|
// Cancel the vertical margin of the first and last button row
|
||||||
|
// (but not all the other rows, when they are arranged in multiple rows)
|
||||||
|
margin-top: $content-inset - $button-margin-vertical;
|
||||||
|
margin-bottom: -$button-margin-vertical;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -45,3 +49,20 @@
|
||||||
padding-bottom: calc((100vh - #{$content-height}) / 2);
|
padding-bottom: calc((100vh - #{$content-height}) / 2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* when screen is smaller than the normal content area, e,g, mobile
|
||||||
|
*/
|
||||||
|
@media screen and ( max-width: $content-width ) {
|
||||||
|
.content {
|
||||||
|
width: 100vw;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and ( max-height: $content-height + $content-padding ) {
|
||||||
|
.content-wrapper {
|
||||||
|
padding-top: $content-padding / 2;
|
||||||
|
padding-bottom: $content-padding / 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -12,6 +12,7 @@ $editable-radius: 2px;
|
||||||
$button-radius: 3px;
|
$button-radius: 3px;
|
||||||
$button-margin-right: 0px;
|
$button-margin-right: 0px;
|
||||||
$button-margin-left: 5px;
|
$button-margin-left: 5px;
|
||||||
|
$button-margin-vertical: 5px;
|
||||||
// Dialogs
|
// Dialogs
|
||||||
$dialog-width: 500px;
|
$dialog-width: 500px;
|
||||||
$dialog-height: 200px;
|
$dialog-height: 200px;
|
||||||
|
|
|
@ -21,7 +21,10 @@ module.exports = {
|
||||||
plugins: [
|
plugins: [
|
||||||
new HtmlWebpackPlugin({
|
new HtmlWebpackPlugin({
|
||||||
inlineSource: '.(js|css)$', // embed all javascript and css inline
|
inlineSource: '.(js|css)$', // embed all javascript and css inline
|
||||||
title: 'Angry.Im Pastebin'
|
title: 'Angry.Im Pastebin',
|
||||||
|
meta: {
|
||||||
|
viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no'
|
||||||
|
}
|
||||||
}),
|
}),
|
||||||
new HtmlWebpackInlineSourcePlugin()
|
new HtmlWebpackInlineSourcePlugin()
|
||||||
],
|
],
|
||||||
|
|
Loading…
Reference in a new issue