MissnationBlazor/MissNationSharedUI/wwwroot/assets/sass/layout/_responsive.scss

1001 lines
22 KiB
SCSS

/*------------------------------------------------------------------
Responsive Stylesheet
Project: Massive - Multipurpose Responsive Theme
Build: Bootstrap 3 +
Author: ThemeBucket
-------------------------------------------------------------------*/
/*------------------------------------------------------------------
Table of contents
1. Small Desktop
2. Tablet Landscape
3. Tablet Portrait
4. Phone
5. Small Phone
-------------------------------------------------------------------*/
/* -------------------------------
Small desktop
------------------------------- */
@media screen and (max-width: 1366px) {
}
@media screen and (max-width: 1200px) {
}
@media screen and (max-width: 1199px) {
}
/* -------------------------------
Tablet Landscape
------------------------------- */
@media screen and (max-width: 1024px) {
.login-box.gray-bg {
margin-bottom: 20px;
}
}
@media screen and (max-width: 992px) {
/*portfolio grid*/
.portfolio.col-2 .portfolio-item,
.portfolio.col-3 .portfolio-item,
.portfolio.col-4 .portfolio-item,
.portfolio.col-5 .portfolio-item,
.portfolio.col-6 .portfolio-item {
width: 33.3333333%;
/*width: 50%;*/
}
.social-link.pull-right {
float: left !important;
margin-top: 10px;
}
#footer.dark .secondary-footer .social-link a {
margin: 0 15px 0 0;
}
.f-list {
margin-bottom: 40px !important;
}
.clients.grid-2 li {
width: 50%;
}
.clients.grid-3 li, .clients.grid-4 li, .clients.grid-5 li, .clients.grid-6 li {
width: 33.33%;
}
.clients.angle-box.grid-2 li {
width: 46%;
}
.clients.angle-box.grid-3 li, .clients.angle-box.grid-4 li, .clients.angle-box.grid-5 li, .clients.angle-box.grid-6 li {
width: 29.33%;
}
.feature-bg-box {
margin-bottom: 50px;
}
}
@media screen and (max-width: 800px) {
/*portfolio grid*/
.portfolio.col-2 .portfolio-item,
.portfolio.col-3 .portfolio-item,
.portfolio.col-4 .portfolio-item,
.portfolio.col-5 .portfolio-item,
.portfolio.col-6 .portfolio-item {
/*width: 33.3333333%;*/
width: 50%;
}
.testimonial.grid-2 li, .img-post.col-2 .item, .img-post.col-3 .item, .img-post.col-4 .item {
width: 100%;
}
.subscribe-info, .subscribe-form {
width: 90%;
}
.subscribe-info {
margin-bottom: 30px;
display: inline-block;
}
.post-parallax .dark-overlay {
display: none;
}
.v-middle {
padding-bottom: 30px;
}
.post-list-aside {
margin-bottom: 50px;
}
.feature-border-box {
margin-bottom: 50px;
display: inline-block;
}
.bs-hero.full-screen .carousel-inner .item img {
height: 100vh;
width: 100%;
}
.lift-off {
display: none;
}
}
/* -------------------------------
Tablet Portrait
------------------------------- */
@media screen and (max-width: 768px) {
//header {
// top:0;
//}
.page-title{
margin-top: 47px;
}
.menuzord-responsive.menuzord {
padding: 0
}
.menuzord-responsive .logo-brand {
font-size: 20px;
line-height: 2.55;
}
.menuzord-responsive .showhide {
margin: 0
}
.menuzord-responsive .menuzord-menu {
width: 100%;
float: left!important
}
.menuzord-responsive .menuzord-menu.scrollable {
overflow-y: auto;
-webkit-overflow-scrolling: touch
}
.menuzord-responsive .menuzord-menu.scrollable>.scrollable-fix {
display: block
}
.menuzord-responsive .menuzord-menu>li {
width: 100%;
display: block;
position: relative
}
.menuzord-responsive .menuzord-menu>li>a {
width: 100%;
padding: 12px 20px;
display: block;
border-bottom: solid 1px #f0f0f0
}
.menuzord-responsive .menuzord-menu>li:first-child>a {
border-top: solid 1px #f0f0f0
}
.menuzord-responsive .menuzord-menu ul.dropdown,
.menuzord-responsive .menuzord-menu ul.dropdown li ul.dropdown {
width: 100%;
left: 0;
position: static;
border: none;
background: #fff;
float: left
}
.menuzord-responsive .menuzord-menu ul.dropdown li {
position: relative
}
.menuzord-responsive .menuzord-menu ul.dropdown li a {
border-bottom: solid 1px #f0f0f0
}
.menuzord-responsive .menuzord-menu.menuzord-indented>li>ul.dropdown>li>a {
padding-left: 40px!important
}
.menuzord-responsive .menuzord-menu.menuzord-indented>li>ul.dropdown>li>ul.dropdown>li>a {
padding-left: 60px!important
}
.menuzord-responsive .menuzord-menu.menuzord-indented>li>ul.dropdown>li>ul.dropdown>li>ul.dropdown>li>a {
padding-left: 80px!important
}
.menuzord-responsive .menuzord-menu.menuzord-indented>li>ul.dropdown>li:hover>a {
/*padding-left: 50px!important*/
}
.menuzord-responsive .menuzord-menu.menuzord-indented>li>ul.dropdown>li>ul.dropdown>li:hover>a {
padding-left: 70px!important
}
.menuzord-responsive .menuzord-menu.menuzord-indented>li>ul.dropdown>li>ul.dropdown>li>ul.dropdown>li:hover>a {
padding-left: 90px!important
}
.menuzord-responsive .menuzord-menu li .indicator {
width: 60px;
height: 45px;
position: absolute;
right: 0;
top: 0;
font-size: 22px;
text-align: center;
line-height: 43px;
border-left: solid 1px #f5f5f5
}
.menuzord-responsive .menuzord-menu li ul.dropdown li .indicator {
height: 38px;
right: 0;
top: 0;
font-size: 18px;
line-height: 36px
}
.menuzord-responsive .menuzord-menu>li>.megamenu {
width: 100%!important;
left: 0!important;
position: static;
border-top: none;
border-bottom: solid 1px #f0f0f0
}
.menuzord-responsive .menuzord-menu>li>.megamenu .megamenu-row [class*=col] {
float: none;
display: block;
width: 100%!important;
margin-left: 0;
margin-top: 15px
}
.menuzord-responsive .menuzord-menu>li>.megamenu .megamenu-row,
.menuzord-responsive .menuzord-menu>li>.megamenu .megamenu-row:first-child [class*=col]:first-child {
margin-top: 0
}
.menuzord-responsive .menuzord-menu>li.search form {
width: 100%;
margin: 4px 0;
padding: 10px 16px!important
}
.menuzord-responsive .menuzord-menu>li.search form input[type=text],
.menuzord-responsive .menuzord-tabs-content,
.menuzord-responsive .menuzord-tabs-nav {
width: 100%
}
//#header.transparent-header .light-header,
//#header.transparent-header {
// background: #fff !important;
//}
//
//#header.transparent-header .dark-header {
// background: rgba(10, 10, 10, 1) !important;
//}
/*-------------------------*/
/* Mneu items */
/*-------------------------*/
.menuzord-responsive .menuzord-menu > li > a{
padding: 12px 20px !important;
line-height: 20px;
}
/* Dropdown indicators */
.menuzord-responsive .menuzord-menu li ul.dropdown li .indicator{
border: none;
}
/* Dropdown */
.menuzord-responsive .menuzord-menu ul.dropdown,
.menuzord-responsive .menuzord-menu ul.dropdown li ul.dropdown{
background: #fff;
}
/* Dropdown items */
.menuzord-responsive .menuzord-menu ul.dropdown li a{
border: none;
}
//.light.menuzord-menu > li > a, .light.menuzord-menu > li > a > i, header .dark-header .menuzord-menu > li > a, header .dark-header .menuzord-menu > li > a > i {
// color: #333;
//}
//
//header.sticky .menuzord-menu>li>a {
// line-height: 20px;
//}
//
//
//header .logo-brand img, header.nav-center-align .logo-brand img {
// height: 50px;
//}
//
//
//header.transparent-header.sticky + #fullscreen-banner {
// margin-top: -50px;
//}
//
//header.transparent-header + #fullscreen-banner {
// margin-top: 0px;
//}
//
//header + #fullscreen-banner {
// margin-top: -50px;
//}
//
//.dark-header.header-bottom-border,
//.light-header.header-bottom-border {
// height: auto;
// border: none;
//}
.menuzord-menu li .indicator i.fa-angle-down:before {
content: "\f107";
}
/*----*/
//
//header {
// height: auto;
// position: fixed;
// z-index: 1200;
//}
//
//header .light-header {
// border-bottom: 1px solid #f5f5f5;
//}
//
//header li.nav-icon .indicator {
// display: block;
//}
//
//header li.nav-icon i {
// font-size: 22px;
//}
//
//.nav-center-align,
//.nav-block-left {
// text-align: left;
// position: fixed;
//}
//
//.nav-center-align.m-bot-10,
//.nav-center-align.m-bot-15,
//.nav-center-align.m-bot-20,
//.nav-center-align.m-bot-25,
//.nav-center-align.m-bot-30,
//.nav-center-align.m-bot-40,
//.nav-block-left.m-bot-10,
//.nav-block-left.m-bot-15,
//.nav-block-left.m-bot-20,
//.nav-block-left.m-bot-25,
//.nav-block-left.m-bot-30,
//.nav-block-left.m-bot-40
//
//{
// display: inline;
//}
//
//.nav-center-align .border-tb,
//.nav-block-left .border-tb {
// border: none;
//}
//
//header li.nav-icon i,
//.nav-center-align .menuzord-menu > li > a,
//header.nav-center-align li.nav-icon i,
//.nav-block-left .menuzord-menu > li > a,
//header.nav-block-left li.nav-icon i{
// line-height: 20px;
//}
.top-ads {
display: none;
}
//.nav-block-left .menuzord-menu {
// height: auto;
//}
.portfolio-filter li {
display: inline-block;
line-height: 40px;
}
ul.menuzord-menu {
background: #fff;
}
.login-box.gray-bg {
margin-bottom: 20px;
}
.count-down .c-grid, .count-down-alt .c-grid {
margin: 10px;
float: left;
}
.count-icon {
right: 40px;
}
.feature-bg-box {
margin-bottom: 50px !important;
}
.catering-form input,
.catering-form button,
.catering-form select {
width: 100% !important;
margin-bottom: 10px;
}
.catering-form .form-group, header.nav-center-align .logo-brand img {
margin: 0;
}
header.nav-center-align .logo-brand img {
height: 40px;
}
.cart-info .megamenu-quarter-width {
width: auto !important;
}
.boxed .wrapper,
.boxed header.sticky,
.boxed header.sticky .header-sticky,
.boxed header.transparent-header {
width: 100%;
}
.banner-box h1, .banner-title h1 {
font-size: 30px;
}
.banner-box h3, .banner-title h3, h3 {
font-size: 18px;
}
h1 {
font-size: 26px;
}
h2 {
font-size: 20px;
}
.b-lg-txt {
font-size: 40px !important;
}
.post-single .post-desk {
height: auto;
}
.nav-center-align .logo-brand, .nav-center-align .menuzord-menu, .nav-center-align .menuzord-menu > li {
float: left;
}
/**/
.travel-form.icon-tabs .nav > li > a {
padding: 30px 25px;
}
}
@media screen and (max-width: 767px) {
.page-title .breadcrumb {
left: 15px;
margin: 20px 0 0;
right: auto;
}
.page-content {
padding: 50px 0;
}
.heading-title {
margin-bottom: 50px;
}
.promo-info {
padding-right: 0px;
}
.promo-btn {
margin-top: 0;
position: relative;
right: 0;
top: 0;
margin-top: 20px;
}
.fun-factor {
padding: 30px 0;
}
.post-grid {
margin: 0;
}
.post-grid .col-lg-1, .post-grid .col-lg-10, .post-grid .col-lg-11, .post-grid .col-lg-12, .post-grid .col-lg-2, .post-grid .col-lg-3, .post-grid .col-lg-4, .post-grid .col-lg-5, .post-grid .col-lg-6, .post-grid .col-lg-7, .post-grid .col-lg-8, .post-grid .col-lg-9, .post-grid .col-md-1, .post-grid .col-md-10, .post-grid .col-md-11, .post-grid .col-md-12, .post-grid .col-md-2, .post-grid .col-md-3, .post-grid .col-md-4, .post-grid .col-md-5, .post-grid .col-md-6, .post-grid .col-md-7, .post-grid .col-md-8, .post-grid .col-md-9, .post-grid .col-sm-1, .post-grid .col-sm-10, .post-grid .col-sm-11, .post-grid .col-sm-12, .post-grid .col-sm-2, .post-grid .col-sm-3, .post-grid .col-sm-4, .post-grid .col-sm-5, .post-grid .col-sm-6, .post-grid .col-sm-7, .post-grid .col-sm-8, .post-grid .col-sm-9, .post-grid .col-xs-1, .post-grid .col-xs-10, .post-grid .col-xs-11, .post-grid .col-xs-12, .post-grid .col-xs-2, .post-grid .col-xs-3, .post-grid .col-xs-4, .post-grid .col-xs-5, .post-grid .col-xs-6, .post-grid .col-xs-7, .post-grid .col-xs-8, .post-grid .col-xs-9 {
padding-left: 15px;
padding-right: 15px;
}
.post-desk.pad-left-less {
padding-left: 40px !important;
}
.portfolio-filter li {
display: inline-block;
line-height: 40px;
}
.page-title {
text-align: center;
}
.page-title .breadcrumb {
left: 0 !important;
right: 0 !important;
top: 0 !important;
margin: 10px 0 0 !important;
position: relative !important;
}
.footer-3 .f-logo-center,
.footer-4 .f-logo-center{
left: 40px !important;
}
.clients.grid-2 li, .clients.grid-3 li, .clients.grid-4 li, .clients.grid-5 li, .clients.grid-6 li {
width: 50%;
}
.clients.angle-box.grid-2 li, .clients.angle-box.grid-3 li, .clients.angle-box.grid-4 li, .clients.angle-box.grid-5 li, .clients.angle-box.grid-6 li {
width: 46%;
}
.testimonial.grid-2 li,
.subscribe-info, .subscribe-form,
.c-info-row .c-info,
.c-info-row .c-slide,
.nav > li,
.featured-box .one-third {
width: 100%;
}
.half-txt {
width: 80%;
}
.icon-box-tabs .nav-pills > li + li {
margin-left: 0;
}
.icon-box-tabs .nav-pills > li {
margin-bottom: 10px;
text-align: center;
}
.subscribe-info, .featured-item {
margin-bottom: 30px;
display: inline-block;
width: 100%;
}
.subscribe-form input, .subscribe-box.text-center .subscribe-form input {
margin-bottom: 10px;
display: inline-block;
}
.subscribe-form input, .subscribe-form .btn {
width: 100% !important;
}
.error-info {
display: inline-block;
width: 100%;
padding-top: 30px;
margin-top: 60px;
padding-left: 0;
border-left: none;
border-top: 1px solid #ddd;
text-align: center;
}
.maintenance-banner img, .responsive-img img {
width: 100%;
height: auto;
}
.feature-border-box {
margin-bottom: 50px;
display: inline-block;
}
#portfolio-carousel.owl-theme .owl-controls,
#portfolio-carousel-alt.owl-theme .owl-controls{
bottom: -48px;
left: 0;
margin-top: 10px;
position: absolute;
right: 0;
text-align: center;
top: auto;
}
.count-down .c-grid, .count-down-alt .c-grid {
margin: 20px;
}
.count-icon {
right: 40px;
}
.p-quantity, .featured-box .one-third:nth-child(2) {
padding: 0;
}
.img-post .post-desk {
padding: 10px;
}
.side-object .content {
padding: 100px 0;
text-align: center;
width: 100%;
}
.side-object .object {
display: none;
}
.bs-hero.full-screen .carousel-inner .item img {
height: 100%;
width: 100%;
}
.btn {
margin-bottom: 5px;
}
.btn-medium {
font-size: 12px;
}
.intro-title h2 {
font-size: 20px;
}
.intro-title p {
font-size: 12px;
}
.intro-title p span {
font-size: 20px;
}
.tp-caption .btn {
padding: 5px;
font-size: 10px;
}
//header.transparent-header.sticky + #fullscreen-banner,
//header.transparent-header + #fullscreen-banner,
//header + #fullscreen-banner {
// top: 0px;
//}
/**/
.travel-form .form-group {
width: 100%;
}
.travel-form.icon-tabs .nav>li>a {
padding: 10px 5px;
font-size: 12px;
}
.travel-form.icon-tabs li i {
font-size: 20px;
}
.travel-form .nav > li {
width: auto;
margin-right: 5px;
}
.travel-form .form-control, .travel-form .btn {
height: 30px;
}
.travel-form .form-group {
margin-bottom: 0px;
}
.travel-form label {
display: inline-block;
margin-bottom: 0;
font-weight: normal;
font-size: 11px;
}
.travel-form .btn {
margin-top: 10px;
}
.travel-form .btn {
line-height: 10px;
}
.travel-booking + .body-content {
margin-top: 100px;
}
.travel-form {
position: static;
margin-top: 20px;
}
.travel-form-bg-light {
padding: 24px 0;
}
/**/
.bs-hero.full-screen .carousel.slide .carousel-control {
width: 30%;
margin-top: 0px;
margin-bottom: 0px;
}
.fashion-title h1 {
font-size: 25px;
font-weight: 100;
letter-spacing: 5px;
margin-bottom: 0;
}
.bs-hero.full-screen .carousel-inner .item img {
height: 100vh;
width: 100%;
}
.fashion-footer .subscribe-form input {
width: 100% !important;
}
.fashion-footer ul {
margin: 20px 0 30px 0;
display: block;
}
.fashion-footer ul,
.fashion-footer .social-link {
text-align: center;
}
.bs-hero.full-screen .carousel-inner .item .bs-info-center {
margin-left: -50%;
width: 100%;
}
.bs-hero.full-screen .carousel-inner .item .bs-info-right {
width: 100%;
}
.bs-hero.full-screen .carousel-inner .item .bs-info-right {
top: 45%;
right: 0%;
left: 0;
text-align: center;
}
}
/* -------------------------------
Phone
------------------------------- */
@media screen and (max-width: 480px) {
/*portfolio grid*/
.portfolio.col-2 .portfolio-item,
.portfolio.col-3 .portfolio-item,
.portfolio.col-4 .portfolio-item,
.portfolio.col-5 .portfolio-item,
.portfolio.col-6 .portfolio-item,
.testimonial.grid-2 li{
width: 100%;
/*width: 50%;*/
}
.error-parallax .error-avatar img {
width: 50%;
height: auto;
}
.error-parallax .error-avatar {
display: block;
margin-bottom:20px;
margin-top: 80px;
}
.error-parallax .error-info {
border-left: none;
border-top: none;
display: inline-block;
margin-top: 0;
padding-left: 0;
padding-top: 0;
}
/**/
.coming-soon-logo img {
width: 30%;
}
.count-down .c-grid, .count-down-alt .c-grid {
margin: 10px 30px;
}
}
/* -------------------------------
Small Phone
------------------------------- */
@media screen and (max-width: 479px) {
.clients.grid-2 li, .clients.grid-3 li, .clients.grid-4 li, .clients.grid-5 li, .clients.grid-6 li, .testimonial.grid-2 li {
width: 100%;
}
.clients.angle-box.grid-2 li, .clients.angle-box.grid-3 li, .clients.angle-box.grid-4 li, .clients.angle-box.grid-5 li, .clients.angle-box.grid-6 li {
width: 96%;
}
.error-avatar img {
width: 100%;
height: auto;
}
.error-parallax .error-avatar img {
width: 50%;
height: auto;
}
.error-parallax .error-avatar {
display: block;
margin-bottom:20px;
margin-top: 80px;
}
.error-parallax .error-info {
border-left: none;
border-top: none;
display: inline-block;
margin-top: 0;
padding-left: 0;
padding-top: 0;
}
.login-box, .login-social-link a,
.c-info-row .c-info,
.c-info-row .c-slide{
width: 100%;
}
.login-social-link a {
margin-bottom:15px;
display: block;
}
#portfolio-carousel.owl-theme .owl-controls,
#portfolio-carousel-alt.owl-theme .owl-controls{
bottom: -48px;
left: 0;
margin-top: 10px;
position: absolute;
right: 0;
text-align: center;
top: auto;
}
.count-down .c-grid, .count-down-alt .c-grid {
margin: 10px 0;
width: 100%;
float: left;
}
.count-icon {
right: 40px;
}
.count-down.circle .c-grid,
.count-down-alt.circle .c-grid {
border-radius: 0% !important;
}
.count-down.round .c-grid,
.count-down-alt.round .c-grid {
border-radius: 0px !important;
}
.tp-caption .btn {
padding: 5px;
font-size: 6px;
}
/**/
.count-down .c-grid,
.count-down-alt .c-grid {
height: 70px;
padding-top: 5px;
width: 40%;
}
.count-down .c-value,
.count-down-alt .c-value {
font-size: 20px;
}
.count-down .c-title,
.count-down-alt .c-title {
font-size: 12px;
letter-spacing: 3px;
}
.count-down .c-grid, .count-down-alt .c-grid {
margin: 10px;
}
}