Unverified Commit cab93cea authored by Jean M's avatar Jean M
Browse files

CSS improvements for small screens

parent 2003936d
......@@ -27,41 +27,39 @@ a:hover {
/* ------------- */
#share-buttons > a > svg {
border: 8px solid #000;
height: 2.6em;
width: 2.6em;
float: left;
border: 8px solid transparent;
fill: #12ACE9; }
#share-buttons > a:hover > svg {
cursor: pointer;
background: #F94A96;
fill: #fff; }
#share-icon:after {
content: "";
display: block;
clear: both; }
#share-buttons > a:hover > svg {
cursor: pointer;
background: #F94A96;
fill: #fff; }
#share-icon {
height: 2.6em;
width: 2.6em;
border: 8px solid transparent;
position: relative;
float: left; }
#share-icon:after {
content: "";
display: block;
clear: both; }
.popup-container .popup-button > div {
position: relative;
float: left; }
.popup-container .popup-button > div > svg {
height: 2.6em;
width: 2.6em;
border: 8px solid transparent;
fill: #12ACE9;
}
.popup-container .popup-button > div:hover > svg {
cursor: pointer;
background: #F94A96;
fill: #fff; }
.popup-container .popup-button > div > svg {
height: 2.6em;
width: 2.6em;
border: 8px solid transparent;
fill: #12ACE9; }
.popup-container .popup-button > div:hover > svg {
cursor: pointer;
background: #F94A96;
fill: #fff; }
.popup-container .popup {
position: fixed;
top: 0;
......@@ -82,53 +80,56 @@ a:hover {
top: 150%;
transition: 250ms all;
text-align: left;
border-radius: 10px;
border: 1px solid #45474A; }
@media only screen and (max-width: 25em) {
.popup-container .popup .popup-inner {
width: 100%; } }
@media only screen and (min-width: 44.813em) {
.popup-container .popup .popup-inner {
width: 400px; } }
.popup-container .popup .popup-inner .popup-title {
padding: 15px 15px 0 15px;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
border-bottom: solid #b5b5b5;
border-bottom-width: thin; }
.popup-container .popup .popup-inner .popup-title h1 {
font-size: 1.2em;
margin-top: 0; }
.popup-container .popup .popup-inner .popup-title .popup-close-btn {
cursor: pointer;
background: #45474A;
opacity: .6;
font-weight: bold;
display: block;
line-height: 24px;
padding: 0 15px;
font-size: 14px;
color: #fff;
border-radius: 3px; }
border-radius: 10px; }
@media only screen and (max-width: 32em) {
.popup-container .popup .popup-inner {
width: 100%; } }
@media only screen and (min-width: 32em) and (max-width: 44.813em) {
.popup-container .popup .popup-inner {
width: 70%; } }
@media only screen and (min-width: 44.813em) {
.popup-container .popup .popup-inner {
width: 400px; } }
.popup-container .popup .popup-inner .popup-title {
padding: 15px 15px 0 15px;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
border-bottom: solid #b5b5b5;
border-bottom-width: thin; }
.popup-container .popup .popup-inner .popup-title h1 {
font-size: 1.2em;
margin-top: 0; }
.popup-container .popup .popup-inner .popup-title .popup-close-btn {
cursor: pointer;
background: #45474A;
opacity: .6;
font-weight: bold;
display: block;
line-height: 24px;
padding: 0 15px;
color: #fff;
border-radius: 3px; }
.popup-container .popup .popup-inner .popup-title .popup-close-btn:hover {
background: #45474A;
opacity: 1;
color: #fff; }
.popup-container .popup .popup-inner .popup-footer {
margin-top: 10px;
padding: 15px;
float: right;
font-weight: bold; }
.popup-container .popup .popup-inner .popup-footer .popup-share-btn {
cursor: pointer;
font-weight: bold;
background: #12ACE9;
padding: 10px 15px;
color: #f5f5f5;
border-radius: 3px;
border: 1px solid transparent; }
.popup-container .popup .popup-inner .popup-footer {
margin-top: 10px;
padding: 15px;
float: right;
font-weight: bold; }
.popup-container .popup .popup-inner .popup-footer .popup-share-btn {
cursor: pointer;
font-weight: bold;
font-size: 1.0em;
line-height: 3em;
background: #12ACE9;
padding: 0 15px 0 15px;
color: #f5f5f5;
border-radius: 3px;
border: 1px solid transparent; }
.popup-container .popup .popup-inner .popup-footer .popup-share-btn:hover {
background: #F94A96; }
.popup-container .popup .popup-inner .popup-footer .popup-close-btn {
......@@ -136,22 +137,23 @@ a:hover {
color: #f5f5f5;
background: #45474A;
opacity: .6;
padding: 10px 15px;
line-height: 3em;
padding: 0 15px 0 15px;
margin-right: 5px;
border-radius: 3px;
display: inline-block;
border: 1px solid transparent; }
.popup-container .popup .popup-inner .popup-footer .popup-close-btn:hover {
opacity: 1;
background: #45474A; }
.popup-container .popup .popup-inner .popup-content {
padding: 15px; }
.popup-container .popup .popup-inner .popup-content input {
border: 1px solid #ddd;
border-radius: 3px;
line-height: 34px;
padding: 0 15px;
font-size: 14px;
box-sizing: border-box; }
.popup-container .popup .popup-inner .popup-content {
padding: 15px; }
.popup-container .popup .popup-inner .popup-content input {
border: 1px solid #ddd;
border-radius: 3px;
line-height: 34px;
padding: 0 15px;
box-sizing: border-box; }
.popup-container .popup .popup-inner .popup-content input[type=text]:focus {
border-color: #45474A; }
.popup-container .popup .transparent-label {
......@@ -169,12 +171,10 @@ a:hover {
visibility: visible; }
.popup-container > input:checked + .popup .popup-inner {
top: 50%; }
.form-control {
width: 100%;
margin-top: 8px;
margin-bottom: 10px; }
.form-check-radio {
margin-top: 10px; }
.form-check-radio li {
......
Supports Markdown
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