scss SCSS代码

Posted 2021-05-18

#publication_uploader
{
  .progress{
    height: 40px;
    line-height: 40px;
    background: #ccc;
    .progress-bar{
      font-size: 16px;
      font-style: italic;
      line-height: 40px;
      width: 100%;
      white-space: nowrap;
      &.preparing{
        color: #333 !important;
      }

    }
  }

  .process_slide
  {
    .gallery
    {
      margin-bottom: 26px;
      max-height: 300px;
      min-height: 120px;
      overflow: auto;
      padding: 20px 0;
      text-align: center;

      .g_item {
        border: 1px solid #333333;
        display: inline-block;
        margin: 2px;
        position: relative;
        span {
          left: 50%;
          position: absolute;
          top: 0;
        }
      }
    }
  }
  .publish_slide
  {
    .preview img { border: 1px solid #ccc; }
  }

  code{
    background: none repeat scroll 0 0 #EEEEEE;
    border: 1px solid #DDDDDD;
    display: block;
    white-space: pre-wrap;
    margin: 10px 0;
  }
}

// mobile
@media only screen and (min-width : 320px) and (max-width : 650px){

  #header-main{
    position: absolute !important; .navbar-form { border: none !important; }
    .countries { margin-top: 24px !important; margin-right: 0px !important; }
    #search-form { width: 70% !important; display: none; }
    #nav-login { display: block !important;
      position: absolute;
      right: 94px;
      left: 50px; top: -89px;
      border: none;
      .dropdown-menu{
        background-color: #F3F3F5;
        border: 1px solid #F3F3F5;
        border-radius: 5px !important;
        box-shadow: inherit !important;
        text-align: left;
        width: 270px !important;
        margin-left: -23px;
        &:after { left: 6% !important; top: 28px !important; display: none; }
      }
      li, li a { display: inline !important; }
    }
  }
  #primary{ margin-top: 88px; }
  #footer { position: inherit !important;}


}
@media only screen and (min-width : 320px) and (max-width : 650px) and (orientation : landscape)
{

}

@media only screen and (min-width : 320px) and (max-width : 480px) and (orientation : portrait)
{

}

/** ipads **/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait)
{
  #header-main #search-form{ width: 87% !important; }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape)
{
}