mirror of
https://github.com/GuerillaStudio/souvenir.git
synced 2025-01-20 22:10:20 +00:00
style(capture options): Adapt for mobile landscape ratio
This commit is contained in:
parent
615dd875ce
commit
4844a4a28b
3 changed files with 22 additions and 5 deletions
|
@ -92,7 +92,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.options__panel.active {
|
.options__panel.active {
|
||||||
transform: translateY(0);
|
transform: translate(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.option__panelOption,
|
.option__panelOption,
|
||||||
|
|
|
@ -98,14 +98,15 @@
|
||||||
.capture-switch,
|
.capture-switch,
|
||||||
.capture-switch:visited {
|
.capture-switch:visited {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: calc(50% - 3rem);
|
top: calc(50% - 2.5rem);
|
||||||
right: 0;
|
right: 0;
|
||||||
|
display: block;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
line-height: 1;
|
line-height: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.capture-switch svg {
|
.capture-switch svg {
|
||||||
|
|
|
@ -47,7 +47,6 @@
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
margin-top: auto;
|
margin-top: auto;
|
||||||
margin-bottom: auto;
|
margin-bottom: auto;
|
||||||
padding-left: 2rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.capture-progress {
|
.capture-progress {
|
||||||
|
@ -64,7 +63,7 @@
|
||||||
.capture-switch:visited {
|
.capture-switch:visited {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: calc(50% - 3rem);
|
right: calc(50% - 2.5rem);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Options
|
/* Options
|
||||||
|
@ -88,6 +87,23 @@
|
||||||
margin-bottom: .5rem;
|
margin-bottom: .5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Option panel */
|
||||||
|
|
||||||
|
.options__panel {
|
||||||
|
top: 0;
|
||||||
|
right: 1rem;
|
||||||
|
bottom: 0;
|
||||||
|
left: 1rem;
|
||||||
|
flex-direction: column;
|
||||||
|
width: auto;
|
||||||
|
transform: translateX(-12rem) translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.option__panelOption {
|
||||||
|
width: 100%;
|
||||||
|
height: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
/* Progress bar
|
/* Progress bar
|
||||||
-------------------------------------------------------------- */
|
-------------------------------------------------------------- */
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue