Commit fc728074 authored by Eric Eastwood's avatar Eric Eastwood

Add responsive breakpoints for smaller devices

parent 4f428c17
......@@ -1848,7 +1848,7 @@ return /******/ (function(modules) { // webpackBootstrap
// module
exports.push([module.id, ".gitter-hidden{display:none}.gitter-icon{width:24px;height:24px;fill:currentColor}.gitter-chat-embed{z-index:100;position:fixed;top:0;left:60%;bottom:0;right:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;background-color:#fff;border-left:1px solid #333;box-shadow:-12px 0 18px 0 rgba(50,50,50,.3);-webkit-transition:-webkit-transform .3s cubic-bezier(.16,.22,.22,1.7);transition:transform .3s cubic-bezier(.16,.22,.22,1.7)}@context border-box{.gitter-chat-embed{background-color:#fff}}.gitter-chat-embed.is-collapsed:not(.is-loading){-webkit-transform:translateX(110%);-ms-transform:translateX(110%);transform:translateX(110%)}.gitter-chat-embed:after{content:'';z-index:-1;position:absolute;top:0;left:100%;bottom:0;right:-100%;background-color:#fff}@context border-box{.gitter-chat-embed:after{background-color:#fff}}.gitter-chat-embed>iframe{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;width:100%;height:100%;border:0}.gitter-chat-embed-loading-wrapper{position:absolute;top:0;left:0;bottom:0;right:0;display:none;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.is-loading .gitter-chat-embed-loading-wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.gitter-chat-embed-loading-indicator{color:rgba(0,0,0,.75);-webkit-animation:spin 2s infinite linear;animation:spin 2s infinite linear}@-webkit-keyframes spin{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(359.9deg);transform:rotate(359.9deg)}}@keyframes spin{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(359.9deg);transform:rotate(359.9deg)}}.gitter-chat-embed-action-bar{position:absolute;top:0;right:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;color:#3a3133;color:rgba(58,49,51,.65)}.gitter-chat-embed-action-bar:hover{color:#3a3133}.gitter-chat-embed-action-bar-item{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;width:100%;padding:8px 16px;background:rgba(255,255,255,.5);border:0;color:inherit;font-size:48px;font-weight:700;cursor:pointer;cursor:hand;-webkit-transition:all .2s ease;transition:all .2s ease}.gitter-chat-embed-action-bar-item:hover,.gitter-chat-embed-action-bar-item:focus{outline:none;box-shadow:inset 0 32px 32px -32px rgba(0,0,0,.25)}.gitter-chat-embed-action-bar-item:active{box-shadow:inset 0 32px 72px -32px rgba(0,0,0,.25);color:#f68d42}.gitter-open-chat-button{z-index:100;position:fixed;bottom:0;right:10px;padding:1em 3em;background-color:#36bc98;border:0;border-top-left-radius:.5em;border-top-right-radius:.5em;color:#fff;text-align:center;text-decoration:none;cursor:pointer;cursor:hand;-webkit-transition:-webkit-transform .3s ease,background-color .3s ease;transition:transform .3s ease,background-color .3s ease}.gitter-open-chat-button:hover,.gitter-open-chat-button:focus{background-color:#3ea07f}.gitter-open-chat-button:focus{box-shadow:0 0 8px rgba(62,160,127,.6);outline:none}.gitter-open-chat-button.is-collapsed{-webkit-transform:translateY(120%);-ms-transform:translateY(120%);transform:translateY(120%)}", ""]);
exports.push([module.id, ".gitter-hidden{display:none}.gitter-icon{width:24px;height:24px;fill:currentColor}.gitter-chat-embed{z-index:100;position:fixed;top:0;left:60%;bottom:0;right:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;background-color:#fff;border-left:1px solid #333;box-shadow:-12px 0 18px 0 rgba(50,50,50,.3);-webkit-transition:-webkit-transform .3s cubic-bezier(.16,.22,.22,1.7);transition:transform .3s cubic-bezier(.16,.22,.22,1.7)}@context border-box{.gitter-chat-embed{background-color:#fff}}.gitter-chat-embed.is-collapsed:not(.is-loading){-webkit-transform:translateX(110%);-ms-transform:translateX(110%);transform:translateX(110%)}.gitter-chat-embed:after{content:'';z-index:-1;position:absolute;top:0;left:100%;bottom:0;right:-100%;background-color:#fff}@context border-box{.gitter-chat-embed:after{background-color:#fff}}@media(max-width:1150px){.gitter-chat-embed{left:45%}}@media(max-width:944px){.gitter-chat-embed{left:30%}}@media(max-width:600px){.gitter-chat-embed{left:15%}}@media(max-width:500px){.gitter-chat-embed{left:0}}.gitter-chat-embed>iframe{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;width:100%;height:100%;border:0}.gitter-chat-embed-loading-wrapper{position:absolute;top:0;left:0;bottom:0;right:0;display:none;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.is-loading .gitter-chat-embed-loading-wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.gitter-chat-embed-loading-indicator{color:rgba(0,0,0,.75);-webkit-animation:spin 2s infinite linear;animation:spin 2s infinite linear}@-webkit-keyframes spin{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(359.9deg);transform:rotate(359.9deg)}}@keyframes spin{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(359.9deg);transform:rotate(359.9deg)}}.gitter-chat-embed-action-bar{position:absolute;top:0;right:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;color:#3a3133;color:rgba(58,49,51,.65)}.gitter-chat-embed-action-bar:hover{color:#3a3133}.gitter-chat-embed-action-bar-item{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;width:100%;padding:8px 16px;background:rgba(255,255,255,.5);border:0;color:inherit;font-size:48px;font-weight:700;cursor:pointer;cursor:hand;-webkit-transition:all .2s ease;transition:all .2s ease}.gitter-chat-embed-action-bar-item:hover,.gitter-chat-embed-action-bar-item:focus{outline:none;box-shadow:inset 0 32px 32px -32px rgba(0,0,0,.25)}.gitter-chat-embed-action-bar-item:active{box-shadow:inset 0 32px 72px -32px rgba(0,0,0,.25);color:#f68d42}.gitter-open-chat-button{z-index:100;position:fixed;bottom:0;right:10px;padding:1em 3em;background-color:#36bc98;border:0;border-top-left-radius:.5em;border-top-right-radius:.5em;color:#fff;text-align:center;text-decoration:none;cursor:pointer;cursor:hand;-webkit-transition:-webkit-transform .3s ease,background-color .3s ease;transition:transform .3s ease,background-color .3s ease}.gitter-open-chat-button:hover,.gitter-open-chat-button:focus{background-color:#3ea07f}.gitter-open-chat-button:focus{box-shadow:0 0 8px rgba(62,160,127,.6);outline:none}.gitter-open-chat-button.is-collapsed{-webkit-transform:translateY(120%);-ms-transform:translateY(120%);transform:translateY(120%)}", ""]);
// exports
......
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -2,6 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sidecar Basic Example</title>
<link href="../common.css" rel="stylesheet">
......
......@@ -2,6 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sidecar Basic Example</title>
<link href="../common.css" rel="stylesheet">
......
......@@ -53,6 +53,19 @@
background-color: var(--background-color);
}
@media (max-width: 1150px) {
left: 45%;
}
@media (max-width: 944px) {
left: 30%;
}
@media (max-width: 600px) {
left: 15%;
}
@media (max-width: 500px) {
left: 0;
}
& > iframe {
flex: 1;
width: 100%;
......@@ -195,4 +208,4 @@
}
}
}
\ No newline at end of file
}
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment