scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-23 07:38:07 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

validation messages can position on the left

Browse source
This commit is contained in:
Ben Wheeler 2019-08-21 03:54:17 +02:00
parent ae8f5a1e90
commit 16e1a46997
1 changed files with 19 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/components/forms/validation-message.scss
View file

@ -1,8 +1,9 @@
@import "../../colors"; @import "../../colors";
@import "../../frameless"; @import "../../frameless";
$arrow-border-width: 1rem;
.validation-message { .validation-message {
$arrow-border-width: 1rem;
display: block; display: block;
position: absolute; position: absolute;
top: 0; top: 0;
@ -37,6 +38,23 @@
} }
} }
.validation-left {
left: unset;
right: 0;
margin-left: unset;
margin-right: $arrow-border-width;
transform: translate(-16rem, 0);
&:before {
left: unset;
right: -$arrow-border-width / 2;
border-top: 1px solid $active-gray;
border-right: 1px solid $active-gray;
border-bottom: none;
border-left: none;
}
}
@media #{$intermediate-and-smaller} { @media #{$intermediate-and-smaller} {
.validation-message { .validation-message {
position: relative; position: relative;