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

 
Line 1: Line 1:
−
@media (min-width : 1200px) {
+
@media (min-width: 1200px) {
−
.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(.8);
+
    -webkit-transform: scale(0.8);
−
-moz-transform: scale(.8);
+
    -moz-transform: scale(0.8);
−
-ms-transform: scale(.8);
+
    -ms-transform: scale(0.8);
−
-o-transform: scale(.8);
+
    -o-transform: scale(0.8);
−
transform: scale(.8);
+
    transform: scale(0.8);
−
-webkit-transition: visibility 500ms, opacity 500ms, -webkit-transform 500ms cubic-bezier(.43, .26, .11, .99);
+
    -webkit-transition: visibility 500ms, opacity 500ms, -webkit-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);
+
    -moz-transition: visibility 500ms, opacity 500ms, -moz-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);
+
    -o-transition: visibility 500ms, opacity 500ms, -o-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);
+
    -ms-transition: visibility 500ms, opacity 500ms, -ms-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);
+
    transition: visibility 500ms, opacity 500ms, transform 500ms cubic-bezier(0.43, 0.26, 0.11, 0.99);
−
}
+
  }
−
 
+
  .navbar-nav .dropdown.megamenu:hover div.dropdown-menu,
−
.navbar-nav .dropdown.megamenu:hover div.dropdown-menu,
+
  .navbar-nav .dropdown:hover div.dropdown-menu {
−
.navbar-nav .dropdown:hover div.dropdown-menu {
+
    opacity: 1;
−
opacity: 1;
+
    visibility: visible;
−
visibility: visible;
+
    color: #777;
−
color: #777;
+
    -webkit-transform: scale(1);
−
-webkit-transform: scale(1);
+
    -moz-transform: scale(1);
−
-moz-transform: scale(1);
+
    -ms-transform: scale(1);
−
-ms-transform: scale(1);
+
    -o-transform: scale(1);
−
-o-transform: scale(1);
+
    transform: scale(1);
−
transform: scale(1);
+
  }
−
}
+
  .navbar-nav .dropdown-backdrop {
−
 
+
    visibility: hidden;
−
.navbar-nav .dropdown-backdrop {
+
  }
−
visibility: hidden;
+
−
}
+
 
}
 
}
−
 
−
@media only screen and (min-width: 768px) and (max-width: 991px) {}
 
−
 
 
@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 {
−
.navbar-header .navbar-brand a {
+
    padding: 6px 8px;
−
padding: 6px 8px;
+
  }
−
}
+
  #hero-area {
−
 
+
    padding: 140px 0;
−
#hero-area {
+
  }
−
padding: 140px 0;
+
  #hero-area .btn {
−
}
+
    margin-top: 8px;
−
 
+
  }
−
#hero-area .btn {
+
  #about {
−
margin-top: 8px;
+
    padding: 70px 0;
−
}
+
  }
−
 
+
  #about .block {
−
#about {
+
    padding: 0;
−
padding: 70px 0;
+
  }
−
}
+
  figure .buttons {
−
 
+
    left: 16%;
−
#about .block {
+
  }
−
padding: 0;
+
  #feature .media {
−
}
+
    margin: 0 0 35px;
−
 
+
  }
−
figure .buttons {
+
  #footer .copyright {
−
left: 16%;
+
    text-align: center;
−
}
+
  }
−
 
+
  #footer .social {
−
#feature .media {
+
    text-align: center;
−
margin: 0 0 35px;
+
  }
−
}
+
  .dropdown-menu > ul > li > a {
−
 
+
    display: block;
−
#footer .copyright {
+
    font-size: 14px;
−
text-align: center;
+
    font-weight: 400;
−
}
+
    line-height: normal;
−
 
+
    text-decoration: none;
−
#footer .social {
+
    padding: 15px;
−
text-align: center;
+
    color: #333;
−
}
+
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
−
 
+
  }
−
.dropdown-menu > ul > li > a {
+
  .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);
+
  .navbar-collapse {
−
}
+
    background: #333333;
−
 
+
  }
−
.dropdown-menu > ul {
+
  #top-bar .main-menu li > a {
−
list-style: none;
+
    color: #fff;
−
padding: 0 15px;
+
    padding: 21px 10px;
−
margin: -5px auto 0;
+
    background: transparent;
−
background: #fff;
+
  }
−
background-color: rgba(255,255,255,0.95);
+
  #top-bar .dropdown-menu > ul {
−
box-shadow: 0 2px 0.09px rgba(0,0,0,0.15);
+
    list-style: none;
−
}
+
    padding: 0 15px;
−
 
+
    margin: -5px auto 0;
−
.navbar-collapse {
+
    background: #fff;
−
background: #333333;
+
    background-color: rgba(255, 255, 255, 0.95);
−
}
+
    box-shadow: 0 2px 0.09px rgba(0, 0, 0, 0.15);
−
 
+
  }
−
#top-bar .main-menu li > a {
+
  #top-bar .dropdown-menu > ul > li > a {
−
color: #fff;
+
    display: block;
−
padding: 21px 10px;
+
    font-size: 14px;
−
background: transparent;
+
    font-weight: 400;
−
}
+
    line-height: normal;
−
 
+
    text-decoration: none;
−
#top-bar .dropdown-menu > ul {
+
    padding: 15px;
−
list-style: none;
+
    color: #333;
−
padding: 0 15px;
+
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
−
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);
+
−
}
+
 
}
 
}
−
@media only screen and (min-width: 480px) and (max-width: 767px) {}
 

Latest revision as of 23:06, 18 October 2017

@media (min-width: 1200px) { 

 .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(0.8);
   -moz-transform: scale(0.8);
   -ms-transform: scale(0.8);
   -o-transform: scale(0.8);
   transform: scale(0.8);
   -webkit-transition: visibility 500ms, opacity 500ms, -webkit-transform 500ms cubic-bezier(0.43, 0.26, 0.11, 0.99);
   -moz-transition: visibility 500ms, opacity 500ms, -moz-transform 500ms cubic-bezier(0.43, 0.26, 0.11, 0.99);
   -o-transition: visibility 500ms, opacity 500ms, -o-transform 500ms cubic-bezier(0.43, 0.26, 0.11, 0.99);
   -ms-transition: visibility 500ms, opacity 500ms, -ms-transform 500ms cubic-bezier(0.43, 0.26, 0.11, 0.99);
   transition: visibility 500ms, opacity 500ms, transform 500ms cubic-bezier(0.43, 0.26, 0.11, 0.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;
 }

} @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);
 }

}