You are here

Home » API reference » Mobile sliding menu 7.2

mm-basic.css in Mobile sliding menu 7.2

Same filename and directory in other branches
  1. 8 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.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-form {
    margin-bottom: 0; }
    .mmenu-nav.mm-basic .search-form .container-inline div,
    .mmenu-nav.mm-basic .search-form .container-inline label {
      display: block; }
    .mmenu-nav.mm-basic .search-form .form-item {
      margin: 0 0 10px 0;
      padding: 0; }
    .mmenu-nav.mm-basic .search-form label {
      margin-bottom: 10px; }
    .mmenu-nav.mm-basic .search-form .form-text {
      padding: 5px 0;
      width: 100%;
      border: none; }
    .mmenu-nav.mm-basic .search-form .form-submit {
      margin: 0; }

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.mm-basic {

  20.   z-index: 10000;

  21.   background: #32394a;

  22.   color: #c4ccda;

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

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

  25.   font-size: 12px;

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

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

  28.   /* Icons */

  29.   /* Header */

  30.   /* List or Panel */

  31.   /* Has search */

  32.   /* Counter */

  33.   /* Footer */

  34.   /* Mmenu search form block */ }

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

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

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

  38.     display: table-cell;

  39.     vertical-align: middle;

  40.     font-style: normal;

  41.     padding-right: 15px; }

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

  43.     display: table-cell; }

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

  45.     border-color: #242a37;

  46.     color: #c4ccda;

  47.     height: 60px;

  48.     line-height: 60px;

  49.     /* Old browsers */

  50.     background: #434b5c;

  51.     /* FF3.6+ */

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

  53.     /* Chrome,Safari4+ */

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

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

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

  57.     /* Opera 11.10+ */

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

  59.     /* IE10+ */

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

  61.     /* W3C */

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

  63.     /* IE6-9 */

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

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

  66.       font-size: 2em;

  67.       padding: 0 10%;

  68.       width: 80%;

  69.       text-align: center; }

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

  71.       padding: 0;

  72.       left: 20px;

  73.       right: 90%;

  74.       top: 0;

  75.       bottom: 0;

  76.       width: auto; }

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

  78.         margin: 0;

  79.         width: 10px;

  80.         height: 10px;

  81.         z-index: 10;

  82.         border-color: #c4ccda; }

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

  84.       padding: 0;

  85.       left: 90%;

  86.       right: 20px;

  87.       top: 0;

  88.       bottom: 0;

  89.       width: auto; }

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

  91.         margin: 0;

  92.         width: 10px;

  93.         height: 10px;

  94.         z-index: 10;

  95.         border-color: #c4ccda; }

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

  97.     padding-top: 0;

  98.     padding-bottom: 0; }

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

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

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

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

  103.         padding: 10px 20px;

  104.         white-space: normal; }

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

  106.         margin-left: 0 !important;

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

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

  109.         background: inherit; }

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

  111.         padding: 15px 20px !important;

  112.         font-size: 1.25em; }

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

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

  115.         /* Old browsers */

  116.         background: #434b5c;

  117.         /* FF3.6+ */

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

  119.         /* Chrome,Safari4+ */

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

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

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

  123.         /* Opera 11.10+ */

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

  125.         /* IE10+ */

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

  127.         /* W3C */

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

  129.         /* IE6-9 */

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

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

  132.       margin: 0;

  133.       padding: 0; }

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

  135.     top: 0; }

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

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

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

  139.     height: 50px;

  140.     top: 60px;

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

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

  143.     padding: 40px 0;

  144.     color: #c4ccda;

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

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

  147.     padding-top: 60px; }

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

  149.     padding-bottom: 40px; }

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

  151.     color: #c4ccda;

  152.     right: 35px; }

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

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

  155.     padding-left: 25px; }

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

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

  158.       border-left: none; }

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

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

  161.       border-color: #c4ccda !important;

  162.       width: 8px;

  163.       height: 8px; }

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

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

  166.     margin-right: 65px;

  167.     padding: 10px 20px; }

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

  169.     padding: 0 0 0 30px;

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

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

  172.       border-top: none; }

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

  174.       border-bottom: none; }

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

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

  177.     border-bottom: none;

  178.     width: 40px; }

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

  180.     background: #32394a;

  181.     color: #c4ccda;

  182.     padding: 0;

  183.     font-size: 1.25em;

  184.     height: 40px;

  185.     line-height: 40px;

  186.     text-align: center; }

  187.   .mmenu-nav.mm-basic .search-form {

  188.     margin-bottom: 0; }

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

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

  191.       display: block; }

  192.     .mmenu-nav.mm-basic .search-form .form-item {

  193.       margin: 0 0 10px 0;

  194.       padding: 0; }

  195.     .mmenu-nav.mm-basic .search-form label {

  196.       margin-bottom: 10px; }

  197.     .mmenu-nav.mm-basic .search-form .form-text {

  198.       padding: 5px 0;

  199.       width: 100%;

  200.       border: none; }

  201.     .mmenu-nav.mm-basic .search-form .form-submit {

  202.       margin: 0; }