cobuild-angular-stack/assets/css/media.less

Base stack angular sass jade gulp

@media (min-width: 1200px) {
    #kitchen {
        .item-mesa {
            width: 235px;

            .product {
                height: 180px;
            }

            .purchased-label {
                position: absolute;
                top: 0;
                left: 0;
                z-index: 1;
                margin-top:10px;
                margin-left:10px;
            }
        }
    }
}
@media (max-width: 1200px) {
    .cont-card{
      padding-left: 0%;
      padding-right:0%;
    }
}


@media (min-width: 1280px) {
    #kitchen {
        .item-mesa {
            width: 260px;

            .purchased-label {
                position: absolute;
                top: 0;
                left: 0;
                z-index: 1;
                margin-top:10px;
                margin-left:10px;
            }
        }
    }
}

@media (max-width: 1040px) {
    .fs-val{
      font-size: 40px;
    }
    .recommend{
        max-width: 170px !important;
    }
}


@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1)  {

  .kitchen-header .navbar-nav .item-nav {
      margin-left: 0px;
  }

  .guest-main .form-map .form{
      min-height:420px;
  }

  .guest-main .form-map .map{
      min-height:420px;
  }

}



@media (min-width: 768px) and (max-width:992px) {
    .kitchen-header .margin-left {
        margin-left: 0;
    }
    #kitchen .bg-cover .main-header .amp {
        font-size: 95px;
        margin: 0 10px;
    }
    .kitchen-header .navbar-nav .item-nav {
        margin-left: 0px;
    }
    .new-product-container .main-image {
        height: 320px;
        margin: 0 auto 20px;
        max-width: 80%;
    }
    #new-product {
        .create-form .align-bottom {
            margin-top: 20px;
        }
        .update-form .align-bottom {
            margin-top: 20px;
        }
        .actions {
            margin-top: 20px;
        }
    }
    .new-product-container .delete-button {
        margin-left: 0!important;
    }
    .new-product-container .carousel-container {
        margin: 0 auto 30px;
        max-width: 80%;
    }
    .new-product-container .item-name {
        margin-top: 30px;
        font-size: 26px;
        margin-right: 30px;
    }
    .new-product-container .item-price {
        margin-right: 30px;
        font-size: 36px;
    }
    .new-product-container .item-description {
        margin-right: 30px;
        font-size: 17px;
    }
    .new-product-container #item-description {
        margin: 20px auto;
    }
    .new-product-container .select-catalogo {
        margin-left: 85px;
    }
    #new-product .carousel .carousel-item .remove {
        right: 0;
    }
}

@media (max-width: 767px) {
    .recommend{
        max-width: 180px;
    }
    tags-input {
        margin-top: 10px;
    }
    .kitchen-footer {
        background-color: #fcfcfc;
        border-top: none !important;
        height: auto !important;
        .footer-container {
            padding: 12px 15px 0;
            margin: 0;
        }
        .footer-links {
            float: none;
            .footer-menu {
                padding: 0;
                li {
                    display: block;
                    padding: 4px;
                }
            }
            .footer-phones {
                padding: 0;
                li {
                    margin: 0;
                    display: block;
                    padding: 4px;
                }
            }
        }
        .social-media {
            text-align: center;
        }
        .mobile-container {
            background-color: white;
            width: 100%;
            margin: 20px auto 0;
            border: 1px solid @color-pale-gray;
            border-radius: 6px 6px 0 0;
            padding: 10px 10px 20px;
        }
        .footer-info {
            float: none;
            width: 100%;
            padding: 0 10px;
        }
    }
    .body-checkout .btn {
        width: 100%;
    }
    .guest-main {
        margin-top: -40px;
    }
    #new-product .carousel .carousel-item .remove {
        right: 0;
    }
    .new-product-container #item-description {
        margin: 20px auto;
    }
    .body-checkout #currency {
        height: 30px;
        font-size: 10px;
        padding: 6px;
        border-radius: 4px;
        margin-left: 20px;
    }
    .header-checkout .btn-active {
        width: 100%;
    }
    .new-product-container {
        margin-left: -15px;
        margin-right: -15px;
        h3 {
            width: 80%;
        }
        .actions {
            margin-top: 20px;
        }
    }
    #kitchen .filters {
        height: 85vh;
        border-bottom: 1px solid rgb( 224, 224, 229);
    }
    .header-checkout .btn {
        font-size: 13px;
    }
    .gift-thanks {
        margin-left: 30px;
        margin-right: 30px;
    }
    .gift-thanks .subtitle {
        margin: auto;
        margin-bottom: 10px;
    }
    .gift-thanks .container-thanks {
        display: block;
        margin-bottom: 10px;
    }
    .gift-thanks .image-container {
        margin: auto;
        height: 180px;
        width: 180px;
        margin-bottom: 20px;
    }
    .gift-thanks .image {
        height: 145px;
    }
    .gift-thanks .from {
        margin: auto;
    }
    .user-photos .banners-grid {
        margin: 40px -15px 0px -15px;
    }
    .header-list .section-description .flex-center {
        display: block;
    }
    .header-list .section-description .input-group {
        width: 85%;
        margin-bottom: 5px;
        .btn-group,
        button {
            width: 100%;
        }
    }
    .kitchen-header .logo img {
        width: 120px;
    }
    #kitchen .form-map .form .flex-center {
        display: block;
    }

    .main-kitchen {
        margin-top: 105px;
    }
    .kitchen-header .navbar-nav .item-nav {
        margin-left: 0;
        padding: 0;
        height: inherit;
    }
    .kitchen-header .navbar-nav .item-nav a {
        padding: 10px;
    }
    #kitchen .bg-cover {
        margin-right: 0;
        margin-left: 0;
    }
    #kitchen .mensaje-bienvenida {
        width: 90%;
    }
    #kitchen .bg-cover .main-header .name {
        font-size: 25px;
        width: 50%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    #kitchen .bg-cover .main-header .amp {
        font-size: 50px;
        margin: 0 10px;
    }
    #kitchen .bg-cover .main-header .padding-right {
        padding-right: 20px;
    }
    #kitchen .bg-cover .main-header .padding-left {
        padding-left: 20px;
    }
    .kitchen-header {
        height: 65px;
    }
    #kitchen .form-map .form {
        width: 100%;
        margin-top: 20px;
    }
    .kitchen-footer {
        height: 100%;
    }
    .kitchen-footer .info-footer {
        height: 35px;
    }
    .kitchen-footer .links-footer,
    .kitchen-footer .phones-footer ul {
        display: block;
        padding: 0;
    }
    .kitchen-footer .phones-footer ul li {
        text-align: left;
        width: 100%;
        padding: 10px 0;
    }
    .kitchen-footer .links-footer li {
        padding: 10px 0;
    }
    .kitchen-footer .container-footer {
        margin-top: 20px;
    }
    #kitchen .filters {
        position: relative;
        height: auto;
        label {
            width: auto;
            border: none;
            margin-right: 15px;
        }
        hr {
            margin: 5px auto;
        }
        .form-group {
            border: none;
            min-height: 40px;
            margin-bottom: 0;
            &:first-child {
                margin-top: 20px;
                margin-bottom: 20px;
            }
            select {
                display: inline-block;
                width: 70%;
                vertical-align: middle;
                position: relative;
                border: none;
                float: right;
                margin-top: -10px;
            }
        }
        .slider {
            width: ~'calc(100% - 65px)';
            span {
                width: 100%;
                text-align: center;
                display: block;
            }
        }
        .input-group {
            input {
                color: @color-cool-gray;
                height: 42px;
                border: 1px solid @color-white-two;
                border-radius: 4px 0 0 4px;
            }
            .btn {
                line-height: 34px;
            }
        }
    }
    #kitchen .item-mesa {
        width: 100%;

        .icon-mesa {
            position: absolute;
            right: 0;
        }
        .left {
            width: 60%;
            height: 100%;
            float: left;
        }
        .right {
            width: 40%;
            height: 90%;
            float: right;
            border-left: 1px solid @color-white;
            margin: 2.5% 0 0;
        }
        .product {

            border-radius: 0;
        }
        .item-description {
            border: none;
            line-height: 1.6em;
            div {
                width: 100%;
                display: block;
                margin-bottom: 10px;
            }
        }
        .purchased-label {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            margin-top:10px;
            margin-left:10px;
        }
    }
    footer .brand {
        text-align: center;
    }
    div #font-30{
        font-size: 22px!important;
    }
    .car-p{
        padding-top: 10px!important;
    }

    .fs-val{
      font-size: 30px;
    }

    .payment-text{
        font-size: 15px;
    }

    .prepay-title{
        font-size: 20px;
    }
}

.title-x {
    font-size: 27pt;
}