135 lines
2.9 KiB
SCSS
135 lines
2.9 KiB
SCSS
|
@import "foundation/base";
|
||
|
|
|
||
|
|
#qrdiv * {
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
#qrformdiv {
|
||
|
|
text-align: left;
|
||
|
|
padding: .5em;
|
||
|
|
clear: both;
|
||
|
|
|
||
|
|
@media #{$medium-up} {
|
||
|
|
padding: .5em 1em;
|
||
|
|
max-width: 52rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
// .de means warnings/alerts.
|
||
|
|
.de {
|
||
|
|
font-size: small;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
input, button, textarea, select {
|
||
|
|
margin-bottom: 3px;
|
||
|
|
margin-top: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
input[type="button"], button {
|
||
|
|
// Avoids double-tap zoom when tapping "random" repeatedly
|
||
|
|
touch-action: manipulation;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Avoid *dramatic woodchuck* zoom on mobile
|
||
|
|
@media (pointer: coarse) {
|
||
|
|
select, textarea, input[type="text"] {
|
||
|
|
font-size: 16px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// If no grid: vertical stack. ID -> icon preview -> icon controls.
|
||
|
|
.qr-meta {
|
||
|
|
|
||
|
|
display: grid;
|
||
|
|
grid-column-gap: 5px;
|
||
|
|
grid-template-columns: auto 1fr;
|
||
|
|
grid-template-rows: auto auto auto;
|
||
|
|
grid-template-areas:
|
||
|
|
"name name"
|
||
|
|
"icon more"
|
||
|
|
"icon iconctl";
|
||
|
|
.block-icon {
|
||
|
|
margin-bottom: 3px;
|
||
|
|
grid-area: icon;
|
||
|
|
align-self: self-end;
|
||
|
|
width: 55px;
|
||
|
|
height: 55px;
|
||
|
|
|
||
|
|
button {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.block-icon-controls {
|
||
|
|
grid-area: iconctl;
|
||
|
|
}
|
||
|
|
.ljuser {
|
||
|
|
grid-area: name;
|
||
|
|
margin-bottom: 2px;
|
||
|
|
font-size: smaller;
|
||
|
|
}
|
||
|
|
#submitmoreopts {
|
||
|
|
grid-area: more;
|
||
|
|
justify-self: start;
|
||
|
|
align-self: self-end;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.qr-subject {
|
||
|
|
display: flex;
|
||
|
|
align-items: flex-end;
|
||
|
|
|
||
|
|
#subject {
|
||
|
|
// size=50 in html is a presentational hint for width, so need to
|
||
|
|
// set width to SOMETHING to keep it from messing up the flex.
|
||
|
|
width: 70%;
|
||
|
|
min-width: 0; // let it shrink
|
||
|
|
flex-grow: 1;
|
||
|
|
flex-shrink: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.qr-markup {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: flex-end;
|
||
|
|
|
||
|
|
& > div {
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.qr-body {
|
||
|
|
#body {
|
||
|
|
width: 100%;
|
||
|
|
-webkit-overflow-scrolling: touch;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.qr-footer {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row-reverse;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
align-items: flex-start;
|
||
|
|
|
||
|
|
input {
|
||
|
|
margin-left: 5px;
|
||
|
|
float: right;
|
||
|
|
|
||
|
|
@supports (display: flex) {
|
||
|
|
float: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
textarea, select, input[type="text"] {
|
||
|
|
margin-right: 0; // Fix for old site scheme.
|
||
|
|
}
|
||
|
|
|
||
|
|
.invisible {
|
||
|
|
// Fix for old site scheme; a ".comment .invisible" rule was setting position: relative.
|
||
|
|
position: absolute;
|
||
|
|
}
|
||
|
|
}
|