You are here

Home » API reference » Mobile sliding menu 8

mm-basic.css in Mobile sliding menu 8

Same filename and directory in other branches
  1. 7.2 themes/mm-basic/styles/mm-basic.css
body {
  -webkit-user-select: initial !important;
  -moz-user-select: initial !important;
  -ms-user-select: initial !important;
  -o-user-select: initial !important;
  user-select: initial !important; }

/* Blocker */
#mm-blocker {
  background: #000 !important;
  opacity: 0.5;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50); }

/* Menu nav */
.mmenu-nav:not(.mm-menu) {
  display: none; }

.mmenu-nav a, .mmenu-nav a.link {
  border-bottom: none;
}

.mmenu-nav a:hover, .mmenu-nav a:active, .mmenu-nav a:focus, .mmenu-nav
.link:hover, .mmenu-nav .link:active, .mmenu-nav .link:focus {
  border-bottom: none;
}

.mmenu-nav.mm-basic {
  z-index: 10000;
  background: #32394a;
  color: #c4ccda;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
  font-family: Helvetica, sans-serif;
  font-size: 12px;
  box-shadow: 0 0 0px rgba(0, 0, 0, 0.5) !important;
  text-shadow: 0 1px #333333;
  /* Icons */
  /* Header */
  /* List or Panel */
  /* Has search */
  /* Counter */
  /* Footer */
  /* Mmenu search form block */ }
  .mmenu-nav.mm-basic [class^="icon-"],
  .mmenu-nav.mm-basic [class*=" icon-"],
  .mmenu-nav.mm-basic .mmenu-block-icon {
    display: table-cell;
    vertical-align: middle;
    font-style: normal;
    padding-right: 15px; }
  .mmenu-nav.mm-basic .mmenu-block-title {
    display: table-cell; }
  .mmenu-nav.mm-basic > .mm-header {
    border-color: #242a37;
    color: #c4ccda;
    height: 60px;
    line-height: 60px;
    /* Old browsers */
    background: #434b5c;
    /* FF3.6+ */
    background: -moz-linear-gradient(top, #434b5c 0%, #394152 100%);
    /* Chrome,Safari4+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #434b5c), color-stop(100%, #394152));
    /* Chrome10+,Safari5.1+ */
    background: -webkit-linear-gradient(top, #434b5c 0%, #394152 100%);
    /* Opera 11.10+ */
    background: -o-linear-gradient(top, #434b5c 0%, #394152 100%);
    /* IE10+ */
    background: -ms-linear-gradient(top, #434b5c 0%, #394152 100%);
    /* W3C */
    background: linear-gradient(to bottom, #434b5c 0%, #394152 100%);
    /* IE6-9 */
    filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='$from', endColorstr='$to',GradientType=0 )"; }
    .mmenu-nav.mm-basic > .mm-header .mm-title {
      font-size: 2em;
      padding: 0 10%;
      width: 80%;
      text-align: center; }
    .mmenu-nav.mm-basic > .mm-header .mm-prev {
      padding: 0;
      left: 20px;
      right: 90%;
      top: 0;
      bottom: 0;
      width: auto; }
      .mmenu-nav.mm-basic > .mm-header .mm-prev:before {
        margin: 0;
        width: 10px;
        height: 10px;
        z-index: 10;
        border-color: #c4ccda; }
    .mmenu-nav.mm-basic > .mm-header .mm-next {
      padding: 0;
      left: 90%;
      right: 20px;
      top: 0;
      bottom: 0;
      width: auto; }
      .mmenu-nav.mm-basic > .mm-header .mm-next:before {
        margin: 0;
        width: 10px;
        height: 10px;
        z-index: 10;
        border-color: #c4ccda; }
  .mmenu-nav.mm-basic > .mm-list {
    padding-top: 0;
    padding-bottom: 0; }
    .mmenu-nav.mm-basic > .mm-list li {
      border-top: 1px solid #404857;
      border-bottom: 1px solid #242a37; }
      .mmenu-nav.mm-basic > .mm-list li > a:not(.mm-subopen):not(.mm-subclose):not(.mm-fullsubopen) {
        padding: 10px 20px;
        white-space: normal; }
      .mmenu-nav.mm-basic > .mm-list li:after {
        margin-left: 0 !important;
        border-color: rgba(0, 0, 0, 0); }
      .mmenu-nav.mm-basic > .mm-list li.mm-selected > a, .mmenu-nav.mm-basic > .mm-list li.mm-selected > span {
        background: inherit; }
      .mmenu-nav.mm-basic > .mm-list li.mmenu-expanded .mmenu-block-collapsed {
        padding: 15px 20px !important;
        font-size: 1.25em; }
      .mmenu-nav.mm-basic > .mm-list li.mmenu-expanded .mmenu-block-expanded {
        padding: 5px 10px 5px 10px !important;
        /* Old browsers */
        background: #434b5c;
        /* FF3.6+ */
        background: -moz-linear-gradient(top, #434b5c 0%, #394152 100%);
        /* Chrome,Safari4+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #434b5c), color-stop(100%, #394152));
        /* Chrome10+,Safari5.1+ */
        background: -webkit-linear-gradient(top, #434b5c 0%, #394152 100%);
        /* Opera 11.10+ */
        background: -o-linear-gradient(top, #434b5c 0%, #394152 100%);
        /* IE10+ */
        background: -ms-linear-gradient(top, #434b5c 0%, #394152 100%);
        /* W3C */
        background: linear-gradient(to bottom, #434b5c 0%, #394152 100%);
        /* IE6-9 */
        filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='$from', endColorstr='$to',GradientType=0 )"; }
    .mmenu-nav.mm-basic > .mm-list > .mm-list {
      margin: 0;
      padding: 0; }
  .mmenu-nav.mm-basic.mm-hassearch > .mm-header {
    top: 0; }
  .mmenu-nav.mm-basic.mm-hassearch > .mm-panel {
    padding-top: 110px !important; }
  .mmenu-nav.mm-basic.mm-hassearch > .mm-search {
    height: 50px;
    top: 60px;
    border-bottom: 1px solid #242a37; }
  .mmenu-nav.mm-basic.mm-hassearch li.mm-noresults {
    padding: 40px 0;
    color: #c4ccda;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6); }
  .mmenu-nav.mm-basic.mm-hasheader > .mm-panel {
    padding-top: 60px; }
  .mmenu-nav.mm-basic.mm-hasfooter > .mm-panel {
    padding-bottom: 40px; }
  .mmenu-nav.mm-basic em.mm-counter {
    color: #c4ccda;
    right: 35px; }
  .mmenu-nav.mm-basic .mm-subopen,
  .mmenu-nav.mm-basic .mm-subclose {
    padding-left: 25px; }
    .mmenu-nav.mm-basic .mm-subopen:before,
    .mmenu-nav.mm-basic .mm-subclose:before {
      border-left: none; }
    .mmenu-nav.mm-basic .mm-subopen:after,
    .mmenu-nav.mm-basic .mm-subclose:after {
      border-color: #c4ccda !important;
      width: 8px;
      height: 8px; }
  .mmenu-nav.mm-basic em.mm-counter + a.mm-subopen + a,
  .mmenu-nav.mm-basic em.mm-counter + a.mm-subopen + span {
    margin-right: 65px;
    padding: 10px 20px; }
  .mmenu-nav.mm-basic.mm-vertical li.mm-opened > ul {
    padding: 0 0 0 30px;
    background: rgba(255, 255, 255, 0.05); }
    .mmenu-nav.mm-basic.mm-vertical li.mm-opened > ul li:first-child {
      border-top: none; }
    .mmenu-nav.mm-basic.mm-vertical li.mm-opened > ul li:last-child {
      border-bottom: none; }
  .mmenu-nav.mm-basic.mm-vertical li.mm-opened > a.mm-subopen {
    background: rgba(255, 255, 255, 0.05);
    border-bottom: none;
    width: 40px; }
  .mmenu-nav.mm-basic > .mm-footer {
    background: #32394a;
    color: #c4ccda;
    padding: 0;
    font-size: 1.25em;
    height: 40px;
    line-height: 40px;
    text-align: center; }
  .mmenu-nav.mm-basic .search-block-form {
    margin-bottom: 0; }
    .mmenu-nav.mm-basic .search-block-form .container-inline div,
    .mmenu-nav.mm-basic .search-block-form .container-inline label {
      display: block; }
    .mmenu-nav.mm-basic .search-block-form .form-item {
      display: block;
      margin: 0 0 10px 0;
      padding: 0; }
    .mmenu-nav.mm-basic .search-block-form label {
      margin-bottom: 10px; }
    .mmenu-nav.mm-basic .search-block-form .form-search {
      float: none;
      padding: 5px 0;
      margin-bottom: 10px;
      width: 100%;
      border: none; }
    .mmenu-nav.mm-basic .search-block-form .form-submit {
      margin: 0; }
.mmenu-block-wrap h2 {
  display: none;
}

File

themes/mm-basic/styles/mm-basic.css
View source 
  1. body {

  2.   -webkit-user-select: initial !important;

  3.   -moz-user-select: initial !important;

  4.   -ms-user-select: initial !important;

  5.   -o-user-select: initial !important;

  6.   user-select: initial !important; }

  7. 

  8. /* Blocker */

  9. #mm-blocker {

  10.   background: #000 !important;

  11.   opacity: 0.5;

  12.   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

  13.   filter: alpha(opacity=50); }

  14. 

  15. /* Menu nav */

  16. .mmenu-nav:not(.mm-menu) {

  17.   display: none; }

  18. 

  19. .mmenu-nav a, .mmenu-nav a.link {

  20.   border-bottom: none;

  21. }

  22. 

  23. .mmenu-nav a:hover, .mmenu-nav a:active, .mmenu-nav a:focus, .mmenu-nav

  24. .link:hover, .mmenu-nav .link:active, .mmenu-nav .link:focus {

  25.   border-bottom: none;

  26. }

  27. 

  28. .mmenu-nav.mm-basic {

  29.   z-index: 10000;

  30.   background: #32394a;

  31.   color: #c4ccda;

  32.   text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);

  33.   font-family: Helvetica, sans-serif;

  34.   font-size: 12px;

  35.   box-shadow: 0 0 0px rgba(0, 0, 0, 0.5) !important;

  36.   text-shadow: 0 1px #333333;

  37.   /* Icons */

  38.   /* Header */

  39.   /* List or Panel */

  40.   /* Has search */

  41.   /* Counter */

  42.   /* Footer */

  43.   /* Mmenu search form block */ }

  44.   .mmenu-nav.mm-basic [class^="icon-"],

  45.   .mmenu-nav.mm-basic [class*=" icon-"],

  46.   .mmenu-nav.mm-basic .mmenu-block-icon {

  47.     display: table-cell;

  48.     vertical-align: middle;

  49.     font-style: normal;

  50.     padding-right: 15px; }

  51.   .mmenu-nav.mm-basic .mmenu-block-title {

  52.     display: table-cell; }

  53.   .mmenu-nav.mm-basic > .mm-header {

  54.     border-color: #242a37;

  55.     color: #c4ccda;

  56.     height: 60px;

  57.     line-height: 60px;

  58.     /* Old browsers */

  59.     background: #434b5c;

  60.     /* FF3.6+ */

  61.     background: -moz-linear-gradient(top, #434b5c 0%, #394152 100%);

  62.     /* Chrome,Safari4+ */

  63.     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #434b5c), color-stop(100%, #394152));

  64.     /* Chrome10+,Safari5.1+ */

  65.     background: -webkit-linear-gradient(top, #434b5c 0%, #394152 100%);

  66.     /* Opera 11.10+ */

  67.     background: -o-linear-gradient(top, #434b5c 0%, #394152 100%);

  68.     /* IE10+ */

  69.     background: -ms-linear-gradient(top, #434b5c 0%, #394152 100%);

  70.     /* W3C */

  71.     background: linear-gradient(to bottom, #434b5c 0%, #394152 100%);

  72.     /* IE6-9 */

  73.     filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='$from', endColorstr='$to',GradientType=0 )"; }

  74.     .mmenu-nav.mm-basic > .mm-header .mm-title {

  75.       font-size: 2em;

  76.       padding: 0 10%;

  77.       width: 80%;

  78.       text-align: center; }

  79.     .mmenu-nav.mm-basic > .mm-header .mm-prev {

  80.       padding: 0;

  81.       left: 20px;

  82.       right: 90%;

  83.       top: 0;

  84.       bottom: 0;

  85.       width: auto; }

  86.       .mmenu-nav.mm-basic > .mm-header .mm-prev:before {

  87.         margin: 0;

  88.         width: 10px;

  89.         height: 10px;

  90.         z-index: 10;

  91.         border-color: #c4ccda; }

  92.     .mmenu-nav.mm-basic > .mm-header .mm-next {

  93.       padding: 0;

  94.       left: 90%;

  95.       right: 20px;

  96.       top: 0;

  97.       bottom: 0;

  98.       width: auto; }

  99.       .mmenu-nav.mm-basic > .mm-header .mm-next:before {

  100.         margin: 0;

  101.         width: 10px;

  102.         height: 10px;

  103.         z-index: 10;

  104.         border-color: #c4ccda; }

  105.   .mmenu-nav.mm-basic > .mm-list {

  106.     padding-top: 0;

  107.     padding-bottom: 0; }

  108.     .mmenu-nav.mm-basic > .mm-list li {

  109.       border-top: 1px solid #404857;

  110.       border-bottom: 1px solid #242a37; }

  111.       .mmenu-nav.mm-basic > .mm-list li > a:not(.mm-subopen):not(.mm-subclose):not(.mm-fullsubopen) {

  112.         padding: 10px 20px;

  113.         white-space: normal; }

  114.       .mmenu-nav.mm-basic > .mm-list li:after {

  115.         margin-left: 0 !important;

  116.         border-color: rgba(0, 0, 0, 0); }

  117.       .mmenu-nav.mm-basic > .mm-list li.mm-selected > a, .mmenu-nav.mm-basic > .mm-list li.mm-selected > span {

  118.         background: inherit; }

  119.       .mmenu-nav.mm-basic > .mm-list li.mmenu-expanded .mmenu-block-collapsed {

  120.         padding: 15px 20px !important;

  121.         font-size: 1.25em; }

  122.       .mmenu-nav.mm-basic > .mm-list li.mmenu-expanded .mmenu-block-expanded {

  123.         padding: 5px 10px 5px 10px !important;

  124.         /* Old browsers */

  125.         background: #434b5c;

  126.         /* FF3.6+ */

  127.         background: -moz-linear-gradient(top, #434b5c 0%, #394152 100%);

  128.         /* Chrome,Safari4+ */

  129.         background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #434b5c), color-stop(100%, #394152));

  130.         /* Chrome10+,Safari5.1+ */

  131.         background: -webkit-linear-gradient(top, #434b5c 0%, #394152 100%);

  132.         /* Opera 11.10+ */

  133.         background: -o-linear-gradient(top, #434b5c 0%, #394152 100%);

  134.         /* IE10+ */

  135.         background: -ms-linear-gradient(top, #434b5c 0%, #394152 100%);

  136.         /* W3C */

  137.         background: linear-gradient(to bottom, #434b5c 0%, #394152 100%);

  138.         /* IE6-9 */

  139.         filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='$from', endColorstr='$to',GradientType=0 )"; }

  140.     .mmenu-nav.mm-basic > .mm-list > .mm-list {

  141.       margin: 0;

  142.       padding: 0; }

  143.   .mmenu-nav.mm-basic.mm-hassearch > .mm-header {

  144.     top: 0; }

  145.   .mmenu-nav.mm-basic.mm-hassearch > .mm-panel {

  146.     padding-top: 110px !important; }

  147.   .mmenu-nav.mm-basic.mm-hassearch > .mm-search {

  148.     height: 50px;

  149.     top: 60px;

  150.     border-bottom: 1px solid #242a37; }

  151.   .mmenu-nav.mm-basic.mm-hassearch li.mm-noresults {

  152.     padding: 40px 0;

  153.     color: #c4ccda;

  154.     text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6); }

  155.   .mmenu-nav.mm-basic.mm-hasheader > .mm-panel {

  156.     padding-top: 60px; }

  157.   .mmenu-nav.mm-basic.mm-hasfooter > .mm-panel {

  158.     padding-bottom: 40px; }

  159.   .mmenu-nav.mm-basic em.mm-counter {

  160.     color: #c4ccda;

  161.     right: 35px; }

  162.   .mmenu-nav.mm-basic .mm-subopen,

  163.   .mmenu-nav.mm-basic .mm-subclose {

  164.     padding-left: 25px; }

  165.     .mmenu-nav.mm-basic .mm-subopen:before,

  166.     .mmenu-nav.mm-basic .mm-subclose:before {

  167.       border-left: none; }

  168.     .mmenu-nav.mm-basic .mm-subopen:after,

  169.     .mmenu-nav.mm-basic .mm-subclose:after {

  170.       border-color: #c4ccda !important;

  171.       width: 8px;

  172.       height: 8px; }

  173.   .mmenu-nav.mm-basic em.mm-counter + a.mm-subopen + a,

  174.   .mmenu-nav.mm-basic em.mm-counter + a.mm-subopen + span {

  175.     margin-right: 65px;

  176.     padding: 10px 20px; }

  177.   .mmenu-nav.mm-basic.mm-vertical li.mm-opened > ul {

  178.     padding: 0 0 0 30px;

  179.     background: rgba(255, 255, 255, 0.05); }

  180.     .mmenu-nav.mm-basic.mm-vertical li.mm-opened > ul li:first-child {

  181.       border-top: none; }

  182.     .mmenu-nav.mm-basic.mm-vertical li.mm-opened > ul li:last-child {

  183.       border-bottom: none; }

  184.   .mmenu-nav.mm-basic.mm-vertical li.mm-opened > a.mm-subopen {

  185.     background: rgba(255, 255, 255, 0.05);

  186.     border-bottom: none;

  187.     width: 40px; }

  188.   .mmenu-nav.mm-basic > .mm-footer {

  189.     background: #32394a;

  190.     color: #c4ccda;

  191.     padding: 0;

  192.     font-size: 1.25em;

  193.     height: 40px;

  194.     line-height: 40px;

  195.     text-align: center; }

  196.   .mmenu-nav.mm-basic .search-block-form {

  197.     margin-bottom: 0; }

  198.     .mmenu-nav.mm-basic .search-block-form .container-inline div,

  199.     .mmenu-nav.mm-basic .search-block-form .container-inline label {

  200.       display: block; }

  201.     .mmenu-nav.mm-basic .search-block-form .form-item {

  202.       display: block;

  203.       margin: 0 0 10px 0;

  204.       padding: 0; }

  205.     .mmenu-nav.mm-basic .search-block-form label {

  206.       margin-bottom: 10px; }

  207.     .mmenu-nav.mm-basic .search-block-form .form-search {

  208.       float: none;

  209.       padding: 5px 0;

  210.       margin-bottom: 10px;

  211.       width: 100%;

  212.       border: none; }

  213.     .mmenu-nav.mm-basic .search-block-form .form-submit {

  214.       margin: 0; }

  215. .mmenu-block-wrap h2 {

  216.   display: none;

  217. }