mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-06-07 18:14:57 +02:00
Code Issues Releases Wiki Activity

onboard responsiveness

Browse Source
This commit is contained in:
Kushagra Gour 2018-06-22 13:58:53 +05:30
parent 7cd3902898
commit 0807c10b0b
2 changed files with 13 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/OnboardingModal.jsx
View File

@ -11,8 +11,8 @@ export function OnboardingModal(props) {
<h1 style="margin-top:20px">Welcome to Web Maker</h1> <h1 style="margin-top:20px">Welcome to Web Maker</h1>
</div> </div>
<div class="flex" style="margin-top:40px;"> <div class="flex--desk" style="margin-top:40px;">
<div class="onboard-step show-when-app"> <div class="onboard-step show-when-app hide-on-mobile">
<div class="tac"> <div class="tac">
<svg class="onboard-step__icon" viewBox="0 0 24 24"> <svg class="onboard-step__icon" viewBox="0 0 24 24">
<path d="M13.64,21.97C13.14,22.21 12.54,22 12.31,21.5L10.13,16.76L7.62,18.78C7.45,18.92 7.24,19 7,19A1,1 0 0,1 6,18V3A1,1 0 0,1 7,2C7.24,2 7.47,2.09 7.64,2.23L7.65,2.22L19.14,11.86C19.57,12.22 19.62,12.85 19.27,13.27C19.12,13.45 18.91,13.57 18.7,13.61L15.54,14.23L17.74,18.96C18,19.46 17.76,20.05 17.26,20.28L13.64,21.97Z" /> <path d="M13.64,21.97C13.14,22.21 12.54,22 12.31,21.5L10.13,16.76L7.62,18.78C7.45,18.92 7.24,19 7,19A1,1 0 0,1 6,18V3A1,1 0 0,1 7,2C7.24,2 7.47,2.09 7.64,2.23L7.65,2.22L19.14,11.86C19.57,12.22 19.62,12.85 19.27,13.27C19.12,13.45 18.91,13.57 18.7,13.61L15.54,14.23L17.74,18.96C18,19.46 17.76,20.05 17.26,20.28L13.64,21.97Z" />

33
src/style.css
View File

@ -137,6 +137,12 @@ p {
} }
} }
@media screen and (min-width: 501px) {
.show-on-mobile {
display: none;
}
}
hr { hr {
background: 0; background: 0;
border: 0; border: 0;
@ -201,6 +207,7 @@ textarea {
cursor: pointer; cursor: pointer;
letter-spacing: 0.2px; letter-spacing: 0.2px;
line-height: 1; line-height: 1;
white-space: nowrap;
transition: box-shadow 0.2s ease; transition: box-shadow 0.2s ease;
} }
@ -571,6 +578,7 @@ body > #demo-frame {
line-height: 20px; line-height: 20px;
height: 20px; height: 20px;
letter-spacing: 0.6px; letter-spacing: 0.6px;
white-space: nowrap;
color: #9297b3; color: #9297b3;
border-radius: 3px; border-radius: 3px;
margin-left: 10px; margin-left: 10px;
@ -1231,17 +1239,6 @@ body > #demo-frame {
border-radius: 10px; border-radius: 10px;
box-shadow: 0 16px 22px rgba(0, 0, 0, 0.1); box-shadow: 0 16px 22px rgba(0, 0, 0, 0.1);
flex: 1; flex: 1;
opacity: 0;
animation: onboard-step-show 0.6s ease forwards;
animation-delay: 0.1s;
}
.onboard-step:nth-child(2) {
animation-delay: 0.2s;
}
.onboard-step:nth-child(3) {
animation-delay: 0.4s;
} }
.onboard-step__icon { .onboard-step__icon {
@ -1252,17 +1249,6 @@ body > #demo-frame {
height: 80px; height: 80px;
} }
@keyframes onboard-step-show {
from {
transform: translateY(10px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.autocomplete-dropdown { .autocomplete-dropdown {
border-top-left-radius: 0; border-top-left-radius: 0;
border-top-right-radius: 0; border-top-right-radius: 0;
@ -1499,6 +1485,9 @@ body:not(.is-app) .show-when-app {
body { body {
font-size: 70%; font-size: 70%;
} }
.flex--desk {
display: flex;
}
.main-header { .main-header {
overflow-x: auto; overflow-x: auto;
} }