Difference between revisions of "Team:Edinburgh OG/CSS:responsive"

(Created page with "/* Responsive styles ================================================== */ /* Large Devices, Wide Screens */ @media (min-width: 1200px) { →‎Dropdown animation: .navbar-...")
 
Line 2: Line 2:
 
================================================== */
 
================================================== */
 
/* Large Devices, Wide Screens */
 
/* Large Devices, Wide Screens */
−
@media (min-width: 1200px) {
+
@media (min-width : 1200px) {
−
  /* Dropdown animation */
+
/* Dropdown animation */
−
  .navbar-nav .dropdown-menu,
+
.navbar-nav .dropdown-menu,
−
  .navbar-nav .dropdown.megamenu div.dropdown-menu {
+
.navbar-nav .dropdown.megamenu div.dropdown-menu {
−
    background: none;
+
background: none;
−
    border: 0;
+
border: 0;
−
    box-shadow: none;
+
box-shadow: none;
−
    display: block;
+
display: block;
−
    opacity: 0;
+
opacity: 0;
−
    z-index: 1;
+
z-index: 1;
−
    visibility: hidden;
+
visibility: hidden;
−
    -webkit-transform: scale(0.8);
+
-webkit-transform: scale(.8);
−
    -moz-transform: scale(0.8);
+
-moz-transform: scale(.8);
−
    -ms-transform: scale(0.8);
+
-ms-transform: scale(.8);
−
    -o-transform: scale(0.8);
+
-o-transform: scale(.8);
−
    transform: scale(0.8);
+
transform: scale(.8);
−
    -webkit-transition: visibility 500ms, opacity 500ms, -webkit-transform 500ms cubic-bezier(0.43, 0.26, 0.11, 0.99);
+
-webkit-transition: visibility 500ms, opacity 500ms, -webkit-transform 500ms cubic-bezier(.43, .26, .11, .99);
−
    -moz-transition: visibility 500ms, opacity 500ms, -moz-transform 500ms cubic-bezier(0.43, 0.26, 0.11, 0.99);
+
-moz-transition: visibility 500ms, opacity 500ms, -moz-transform 500ms cubic-bezier(.43, .26, .11, .99);
−
    -o-transition: visibility 500ms, opacity 500ms, -o-transform 500ms cubic-bezier(0.43, 0.26, 0.11, 0.99);
+
-o-transition: visibility 500ms, opacity 500ms, -o-transform 500ms cubic-bezier(.43, .26, .11, .99);
−
    -ms-transition: visibility 500ms, opacity 500ms, -ms-transform 500ms cubic-bezier(0.43, 0.26, 0.11, 0.99);
+
-ms-transition: visibility 500ms, opacity 500ms, -ms-transform 500ms cubic-bezier(.43, .26, .11, .99);
−
    transition: visibility 500ms, opacity 500ms, transform 500ms cubic-bezier(0.43, 0.26, 0.11, 0.99);
+
transition: visibility 500ms, opacity 500ms, transform 500ms cubic-bezier(.43, .26, .11, .99);
−
  }
+
}
−
  .navbar-nav .dropdown:hover div.dropdown-menu,
+
 
−
  .navbar-nav .dropdown.megamenu:hover div.dropdown-menu {
+
.navbar-nav .dropdown.megamenu:hover div.dropdown-menu,
−
    opacity: 1;
+
.navbar-nav .dropdown:hover div.dropdown-menu {
−
    visibility: visible;
+
opacity: 1;
−
    color: #777;
+
visibility: visible;
−
    -webkit-transform: scale(1);
+
color: #777;
−
    -moz-transform: scale(1);
+
-webkit-transform: scale(1);
−
    -ms-transform: scale(1);
+
-moz-transform: scale(1);
−
    -o-transform: scale(1);
+
-ms-transform: scale(1);
−
    transform: scale(1);
+
-o-transform: scale(1);
−
  }
+
transform: scale(1);
−
  .navbar-nav .dropdown-backdrop {
+
}
−
    visibility: hidden;
+
 
−
  }
+
.navbar-nav .dropdown-backdrop {
 +
visibility: hidden;
 +
}
 
}
 
}
 
/* Tablet Layout: 768px.
 
/* Tablet Layout: 768px.
Line 46: Line 48:
 
cols    1    2      3      4      5      6      7      8
 
cols    1    2      3      4      5      6      7      8
 
px      68    160    252    344    436    528    620    712    */
 
px      68    160    252    344    436    528    620    712    */
 +
@media only screen and (min-width: 768px) and (max-width: 991px) {}
 
/* Mobile Layout: 320px.
 
/* Mobile Layout: 320px.
 
Gutters: 24px.
 
Gutters: 24px.
Line 54: Line 57:
 
px      68    160    252    */
 
px      68    160    252    */
 
@media only screen and (max-width: 767px) {
 
@media only screen and (max-width: 767px) {
−
  .title {
+
.title {
−
    font-size: 40px;
+
font-size: 40px;
−
  }
+
}
−
  .navbar-header .navbar-brand a {
+
 
−
    padding: 6px 8px;
+
.navbar-header .navbar-brand a {
−
  }
+
padding: 6px 8px;
−
  #hero-area {
+
}
−
    padding: 140px 0;
+
 
−
  }
+
#hero-area {
−
  #hero-area .btn {
+
padding: 140px 0;
−
    margin-top: 8px;
+
}
−
  }
+
 
−
  #about {
+
#hero-area .btn {
−
    padding: 70px 0;
+
margin-top: 8px;
−
  }
+
}
−
  #about .block {
+
 
−
    padding: 0;
+
#about {
−
  }
+
padding: 70px 0;
−
  figure .buttons {
+
}
−
    left: 16%;
+
 
−
  }
+
#about .block {
−
  #feature .media {
+
padding: 0;
−
    margin: 0px 0px 35px;
+
}
−
  }
+
 
−
  #footer .copyright {
+
figure .buttons {
−
    text-align: center;
+
left: 16%;
−
  }
+
}
−
  #footer .social {
+
 
−
    text-align: center;
+
#feature .media {
−
  }
+
margin: 0 0 35px;
−
  .dropdown-menu > ul > li > a {
+
}
−
    display: block;
+
 
−
    font-size: 14px;
+
#footer .copyright {
−
    font-weight: 400;
+
text-align: center;
−
    line-height: normal;
+
}
−
    text-decoration: none;
+
 
−
    padding: 15px;
+
#footer .social {
−
    color: #333;
+
text-align: center;
−
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+
}
−
  }
+
 
−
  .dropdown-menu > ul {
+
.dropdown-menu > ul > li > a {
−
    list-style: none;
+
display: block;
−
    padding: 0 15px;
+
font-size: 14px;
−
    margin-left: auto;
+
font-weight: 400;
−
    margin-right: auto;
+
line-height: normal;
−
    margin-bottom: 0;
+
text-decoration: none;
−
    margin-top: -5px;
+
padding: 15px;
−
    background: #fff;
+
color: #333;
−
    background-color: rgba(255, 255, 255, 0.95);
+
border-bottom: 1px solid rgba(0,0,0,0.1);
−
    box-shadow: 0 2px 0.09px rgba(0, 0, 0, 0.15);
+
}
−
  }
+
 
−
  .navbar-collapse {
+
.dropdown-menu > ul {
−
    background: #333333;
+
list-style: none;
−
  }
+
padding: 0 15px;
−
  #top-bar .main-menu li > a {
+
margin: -5px auto 0;
−
    color: #fff;
+
background: #fff;
−
    padding: 21px 10px;
+
background-color: rgba(255,255,255,0.95);
−
    background: transparent;
+
box-shadow: 0 2px 0.09px rgba(0,0,0,0.15);
−
  }
+
}
−
  #top-bar .dropdown-menu > ul {
+
 
−
    list-style: none;
+
.navbar-collapse {
−
    padding: 0 15px;
+
background: #333333;
−
    margin-left: auto;
+
}
−
    margin-right: auto;
+
 
−
    margin-bottom: 0;
+
#top-bar .main-menu li > a {
−
    margin-top: -5px;
+
color: #fff;
−
    background: #fff;
+
padding: 21px 10px;
−
    background-color: rgba(255, 255, 255, 0.95);
+
background: transparent;
−
    box-shadow: 0 2px 0.09px rgba(0, 0, 0, 0.15);
+
}
−
  }
+
 
−
  #top-bar .dropdown-menu > ul > li > a {
+
#top-bar .dropdown-menu > ul {
−
    display: block;
+
list-style: none;
−
    font-size: 14px;
+
padding: 0 15px;
−
    font-weight: 400;
+
margin: -5px auto 0;
−
    line-height: normal;
+
background: #fff;
−
    text-decoration: none;
+
background-color: rgba(255,255,255,0.95);
−
    padding: 15px;
+
box-shadow: 0 2px 0.09px rgba(0,0,0,0.15);
−
    color: #333;
+
}
−
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+
 
−
  }
+
#top-bar .dropdown-menu > ul > li > a {
 +
display: block;
 +
font-size: 14px;
 +
font-weight: 400;
 +
line-height: normal;
 +
text-decoration: none;
 +
padding: 15px;
 +
color: #333;
 +
border-bottom: 1px solid rgba(0,0,0,0.1);
 +
}
 
}
 
}
 
/* Wide Mobile Layout: 480px.
 
/* Wide Mobile Layout: 480px.
Line 142: Line 154:
 
cols    1    2      3      4      5
 
cols    1    2      3      4      5
 
px      68    160    252    344    436    */
 
px      68    160    252    344    436    */
 +
@media only screen and (min-width: 480px) and (max-width: 767px) {}

Revision as of 23:03, 18 October 2017

/* Responsive styles ================================================== */ /* Large Devices, Wide Screens */ @media (min-width : 1200px) { /* Dropdown animation */ .navbar-nav .dropdown-menu, .navbar-nav .dropdown.megamenu div.dropdown-menu { background: none; border: 0; box-shadow: none; display: block; opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: scale(.8); -moz-transform: scale(.8); -ms-transform: scale(.8); -o-transform: scale(.8); transform: scale(.8); -webkit-transition: visibility 500ms, opacity 500ms, -webkit-transform 500ms cubic-bezier(.43, .26, .11, .99); -moz-transition: visibility 500ms, opacity 500ms, -moz-transform 500ms cubic-bezier(.43, .26, .11, .99); -o-transition: visibility 500ms, opacity 500ms, -o-transform 500ms cubic-bezier(.43, .26, .11, .99); -ms-transition: visibility 500ms, opacity 500ms, -ms-transform 500ms cubic-bezier(.43, .26, .11, .99); transition: visibility 500ms, opacity 500ms, transform 500ms cubic-bezier(.43, .26, .11, .99); }

.navbar-nav .dropdown.megamenu:hover div.dropdown-menu, .navbar-nav .dropdown:hover div.dropdown-menu { opacity: 1; visibility: visible; color: #777; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); }

.navbar-nav .dropdown-backdrop { visibility: hidden; } } /* Tablet Layout: 768px. Gutters: 24px. Outer margins: 28px. Inherits styles from: Default Layout.

cols 1 2 3 4 5 6 7 8 px 68 160 252 344 436 528 620 712 */ @media only screen and (min-width: 768px) and (max-width: 991px) {} /* Mobile Layout: 320px. Gutters: 24px. Outer margins: 34px. Inherits styles from: Default Layout.

cols 1 2 3 px 68 160 252 */ @media only screen and (max-width: 767px) { .title { font-size: 40px; }

.navbar-header .navbar-brand a { padding: 6px 8px; }

#hero-area { padding: 140px 0; }

#hero-area .btn { margin-top: 8px; }

#about { padding: 70px 0; }

#about .block { padding: 0; }

figure .buttons { left: 16%; }

#feature .media { margin: 0 0 35px; }

#footer .copyright { text-align: center; }

#footer .social { text-align: center; }

.dropdown-menu > ul > li > a { display: block; font-size: 14px; font-weight: 400; line-height: normal; text-decoration: none; padding: 15px; color: #333; border-bottom: 1px solid rgba(0,0,0,0.1); }

.dropdown-menu > ul { list-style: none; padding: 0 15px; margin: -5px auto 0; background: #fff; background-color: rgba(255,255,255,0.95); box-shadow: 0 2px 0.09px rgba(0,0,0,0.15); }

.navbar-collapse { background: #333333; }

#top-bar .main-menu li > a { color: #fff; padding: 21px 10px; background: transparent; }

#top-bar .dropdown-menu > ul { list-style: none; padding: 0 15px; margin: -5px auto 0; background: #fff; background-color: rgba(255,255,255,0.95); box-shadow: 0 2px 0.09px rgba(0,0,0,0.15); }

#top-bar .dropdown-menu > ul > li > a { display: block; font-size: 14px; font-weight: 400; line-height: normal; text-decoration: none; padding: 15px; color: #333; border-bottom: 1px solid rgba(0,0,0,0.1); } } /* Wide Mobile Layout: 480px. Gutters: 24px. Outer margins: 22px. Inherits styles from: Default Layout, Mobile Layout.

cols 1 2 3 4 5 px 68 160 252 344 436 */ @media only screen and (min-width: 480px) and (max-width: 767px) {}