diff --git a/examples/web/index.css b/examples/web/index.css index 4b0f9cafb8600d5505c9ec3e791d349348415b7e..fc4edd1ecb12f0696f93872660a92dae70f8547f 100644 --- a/examples/web/index.css +++ b/examples/web/index.css @@ -385,6 +385,7 @@ p { -moz-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.24); -khtml-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.24); -webkit-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.24); + margin-top: 30px; max-width: 100%; padding: 24px 24px 24px 24px; text-align: left; @@ -394,17 +395,17 @@ p { -moz-transform: scale(0.96); -khtml-transform: scale(0.96); -webkit-transform: scale(0.96); - margin-top: 30px; transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.5s cubic-bezier(0.075, 0.82, 0.165, 1); - -o-transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);; - -ms-transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);; - -moz-transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);; - -khtml-transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);; - -webkit-transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);; + -o-transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.5s cubic-bezier(0.075, 0.82, 0.165, 1); + -ms-transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.5s cubic-bezier(0.075, 0.82, 0.165, 1); + -moz-transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.5s cubic-bezier(0.075, 0.82, 0.165, 1); + -khtml-transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.5s cubic-bezier(0.075, 0.82, 0.165, 1); + -webkit-transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.5s cubic-bezier(0.075, 0.82, 0.165, 1); width: 480px; } .modal-container.visible > .modal { + margin-top: 0px; pointer-events: all; transform: scale(1); -o-transform: scale(1); @@ -412,13 +413,12 @@ p { -moz-transform: scale(1); -khtml-transform: scale(1); -webkit-transform: scale(1); - margin-top: 0px; transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.4s cubic-bezier(0.075, 0.82, 0.165, 1); - -o-transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);; - -ms-transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);; - -moz-transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);; - -khtml-transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);; - -webkit-transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);; + -o-transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.4s cubic-bezier(0.075, 0.82, 0.165, 1); + -ms-transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.4s cubic-bezier(0.075, 0.82, 0.165, 1); + -moz-transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.4s cubic-bezier(0.075, 0.82, 0.165, 1); + -khtml-transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.4s cubic-bezier(0.075, 0.82, 0.165, 1); + -webkit-transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.4s cubic-bezier(0.075, 0.82, 0.165, 1); } .modal-container > .modal .modal-top-buttons { @@ -451,9 +451,9 @@ p { } .modal-container > .modal .modal-buttons > .button.simple { + display: inline-block; margin-right: 12px; min-width: 120px; - display: inline-block; } .modal-container > .modal .modal-buttons > .button.simple:last-child { diff --git a/examples/web/react/components/panel-split/panel-split.css b/examples/web/react/components/panel-split/panel-split.css index 88edf704fcd6e49a1661e1496a2aa8cb9f632066..8b927d8ac1efa3429a0445bb849f7eae4be7f5ed 100644 --- a/examples/web/react/components/panel-split/panel-split.css +++ b/examples/web/react/components/panel-split/panel-split.css @@ -2,6 +2,12 @@ display: flex; } +@media only screen and (max-width: 1120px) { + .panel-split { + flex-direction: column; + } +} + .panel-split > .side-left { display: flex; flex: 1 0; @@ -15,3 +21,10 @@ min-width: 580px; padding: 0px 24px 0px 24px; } + +@media only screen and (max-width: 1120px) { + .panel-split > .side-right { + min-width: unset; + padding: 0px 0px 0px 0px; + } +}