scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2025-02-17 00:21:20 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Merge pull request #2079 from LiFaytheGoblin/2065/title-too-long-warning

Browse source 
Implemented design for title-too-long-warning
This commit is contained in:
Linda 2018-09-18 13:20:13 -04:00 committed by GitHub
commit d0d7bba70e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 23 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
src/views/preview/preview.scss
View file

@ -6,6 +6,12 @@ $player-width: 482px;
$player-height: 406px;
$stage-width: 480px;
/* screen sizes */
$small: "screen and (max-width : #{$mobile}-1)";
$medium: "screen and (min-width : #{$mobile}) and (max-width : #{$tablet}-1)";
$big: "screen and (min-width : #{$tablet})";
$medium-and-small: "screen and (max-width : #{$tablet}-1)";
/* override view padding for share banner */
#view {
padding: 0;
@ -29,7 +35,7 @@ $stage-width: 480px;
&.has-error {
.validation-message {
transform: translate(22rem, 0);
right: 0;
}
}
@ -73,7 +79,6 @@ $stage-width: 480px;
.title {
margin-left: 1rem;
/* width: inherit; Inherits the width of whatever this is in. This works well for the preview page and might need to change if used in a different context*/
min-width: 0;
text-align: left;
font-size: .8rem;
@ -81,12 +86,11 @@ $stage-width: 480px;
}
.validation-message {
$arrow-border-width: 1rem;
display: block;
position: absolute;
top: 0;
left: 0;
margin-left: $arrow-border-width;
z-index: 1;
$arrow-border-width: 1rem;
margin-top: $arrow-border-width;
border: 1px solid $active-gray;
border-radius: 5px;
background-color: $ui-orange;
@ -97,13 +101,18 @@ $stage-width: 480px;
color: $type-white;
font-size: 1rem;
@media #{$medium-and-small} {
margin-top: calc($arrow-border-width / 2);
width: 100%;
}
&:before {
display: block;
position: absolute;
top: 1rem;
left: -$arrow-border-width / 2;
top: -.5rem;
left: calc(50% - calc(#{$arrow-border-width} / 2));
transform: rotate(45deg);
transform: rotate(135deg);
border-bottom: 1px solid $active-gray;
border-left: 1px solid $active-gray;
@ -114,6 +123,10 @@ $stage-width: 480px;
height: $arrow-border-width;
content: "";
@media #{$medium-and-small} {
display: none;
}
}
}
@ -458,7 +471,7 @@ $stage-width: 480px;
content: "";
}
}
.studio-button {
&:before {
background-image: url("/svgs/project/studio-add-white.svg");