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

}