You are here

Home » API reference » Mobile sliding menu 8

mm-fresh.css in Mobile sliding menu 8

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

File

themes/mm-fresh/styles/mm-fresh.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-fresh {

  29.   z-index: 10000;

  30.   background: #e8e8e8;

  31.   color: #686868;

  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 white;

  37.   /* Icons */

  38.   /* Header */

  39.   /* List or Panel */

  40.   /* Has search */

  41.   /* Counter */

  42.   /* Footer */

  43.   /* Mmenu search form block */ }

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

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

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

  47.     display: table-cell;

  48.     vertical-align: middle;

  49.     font-style: normal;

  50.     padding-right: 15px; }

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

  52.     display: table-cell; }

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

  54.     border-color: rgba(0, 0, 0, 0.15) !important;

  55.     color: #686868;

  56.     height: 60px;

  57.     line-height: 60px;

  58.     /* Old browsers */

  59.     background: #dbdbdb;

  60.     /* FF3.6+ */

  61.     background: -moz-linear-gradient(top, #dbdbdb 0%, #d2d2d2 100%);

  62.     /* Chrome,Safari4+ */

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

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

  65.     background: -webkit-linear-gradient(top, #dbdbdb 0%, #d2d2d2 100%);

  66.     /* Opera 11.10+ */

  67.     background: -o-linear-gradient(top, #dbdbdb 0%, #d2d2d2 100%);

  68.     /* IE10+ */

  69.     background: -ms-linear-gradient(top, #dbdbdb 0%, #d2d2d2 100%);

  70.     /* W3C */

  71.     background: linear-gradient(to bottom, #dbdbdb 0%, #d2d2d2 100%);

  72.     /* IE6-9 */

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

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

  75.       font-size: 2em;

  76.       padding: 0 10%;

  77.       width: 80%;

  78.       text-align: center; }

  79.     .mmenu-nav.mm-fresh > .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-fresh > .mm-header .mm-prev:before {

  87.         margin: 0;

  88.         width: 10px;

  89.         height: 10px;

  90.         z-index: 10;

  91.         border-color: #686868; }

  92.     .mmenu-nav.mm-fresh > .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-fresh > .mm-header .mm-next:before {

  100.         margin: 0;

  101.         width: 10px;

  102.         height: 10px;

  103.         z-index: 10;

  104.         border-color: #686868; }

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

  106.     padding-top: 0;

  107.     padding-bottom: 0;

  108.     padding: 60px 20px;

  109.     margin: 20px 0; }

  110.     .mmenu-nav.mm-fresh > .mm-list li {

  111.       border: 1px solid lightgrey;

  112.       border-top: 1px solid white; }

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

  114.         padding: 10px 20px;

  115.         white-space: normal; }

  116.       .mmenu-nav.mm-fresh > .mm-list li:after {

  117.         margin-left: 0 !important;

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

  119.       .mmenu-nav.mm-fresh > .mm-list li.mm-selected > a, .mmenu-nav.mm-fresh > .mm-list li.mm-selected > span {

  120.         background: inherit; }

  121.       .mmenu-nav.mm-fresh > .mm-list li.mmenu-expanded .mmenu-block-collapsed {

  122.         padding: 15px 20px !important;

  123.         font-size: 1.25em; }

  124.       .mmenu-nav.mm-fresh > .mm-list li.mmenu-expanded .mmenu-block-expanded {

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

  126.         /* Old browsers */

  127.         background: #dbdbdb;

  128.         /* FF3.6+ */

  129.         background: -moz-linear-gradient(top, #dbdbdb 0%, #d2d2d2 100%);

  130.         /* Chrome,Safari4+ */

  131.         background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dbdbdb), color-stop(100%, #d2d2d2));

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

  133.         background: -webkit-linear-gradient(top, #dbdbdb 0%, #d2d2d2 100%);

  134.         /* Opera 11.10+ */

  135.         background: -o-linear-gradient(top, #dbdbdb 0%, #d2d2d2 100%);

  136.         /* IE10+ */

  137.         background: -ms-linear-gradient(top, #dbdbdb 0%, #d2d2d2 100%);

  138.         /* W3C */

  139.         background: linear-gradient(to bottom, #dbdbdb 0%, #d2d2d2 100%);

  140.         /* IE6-9 */

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

  142.     .mmenu-nav.mm-fresh > .mm-list > .mm-list {

  143.       margin: 0;

  144.       padding: 0; }

  145.   .mmenu-nav.mm-fresh.mm-hassearch > .mm-header {

  146.     top: 0; }

  147.   .mmenu-nav.mm-fresh.mm-hassearch > .mm-panel {

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

  149.   .mmenu-nav.mm-fresh.mm-hassearch > .mm-search {

  150.     height: 50px;

  151.     top: 60px;

  152.     border-bottom: 1px solid lightgrey; }

  153.   .mmenu-nav.mm-fresh.mm-hassearch li.mm-noresults {

  154.     padding: 40px 0;

  155.     color: #c4ccda;

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

  157.   .mmenu-nav.mm-fresh.mm-hasheader > .mm-panel {

  158.     padding-top: 60px; }

  159.   .mmenu-nav.mm-fresh.mm-hasfooter > .mm-panel {

  160.     padding-bottom: 40px; }

  161.   .mmenu-nav.mm-fresh em.mm-counter {

  162.     color: #686868;

  163.     right: 35px; }

  164.   .mmenu-nav.mm-fresh .mm-subopen,

  165.   .mmenu-nav.mm-fresh .mm-subclose {

  166.     padding-left: 25px; }

  167.     .mmenu-nav.mm-fresh .mm-subopen:before,

  168.     .mmenu-nav.mm-fresh .mm-subclose:before {

  169.       border-left: none; }

  170.     .mmenu-nav.mm-fresh .mm-subopen:after,

  171.     .mmenu-nav.mm-fresh .mm-subclose:after {

  172.       border-color: #686868 !important;

  173.       width: 8px;

  174.       height: 8px; }

  175.   .mmenu-nav.mm-fresh em.mm-counter + a.mm-subopen + a,

  176.   .mmenu-nav.mm-fresh em.mm-counter + a.mm-subopen + span {

  177.     margin-right: 65px;

  178.     padding: 10px 20px; }

  179.   .mmenu-nav.mm-fresh.mm-vertical li.mm-opened > ul {

  180.     padding: 0 0 0 30px;

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

  182.     .mmenu-nav.mm-fresh.mm-vertical li.mm-opened > ul li {

  183.       border-left: none; }

  184.       .mmenu-nav.mm-fresh.mm-vertical li.mm-opened > ul li:first-child {

  185.         border-top: none; }

  186.       .mmenu-nav.mm-fresh.mm-vertical li.mm-opened > ul li:last-child {

  187.         border-bottom: none; }

  188.   .mmenu-nav.mm-fresh.mm-vertical li.mm-opened > a.mm-subopen {

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

  190.     border-bottom: none;

  191.     width: 40px; }

  192.   .mmenu-nav.mm-fresh > .mm-footer {

  193.     background: #e8e8e8;

  194.     color: #686868;

  195.     padding: 0;

  196.     font-size: 1.25em;

  197.     height: 40px;

  198.     line-height: 40px;

  199.     text-align: center;

  200.     border-color: rgba(0, 0, 0, 0.15) !important; }

  201.   .mmenu-nav.mm-fresh  .search-block-form {

  202.     margin-bottom: 0; }

  203.     .mmenu-nav.mm-fresh  .search-block-form .container-inline div,

  204.     .mmenu-nav.mm-fresh  .search-block-form .container-inline label {

  205.       display: block; }

  206.     .mmenu-nav.mm-fresh  .search-block-form .form-item {

  207.       display: block;

  208.       margin: 0 0 10px 0;

  209.       padding: 0; }

  210.     .mmenu-nav.mm-fresh  .search-block-form label {

  211.       margin-bottom: 10px; }

  212.     .mmenu-nav.mm-fresh  .search-block-form .form-search {

  213.       float: none;

  214.       padding: 5px 0;

  215.       margin-bottom: 10px;

  216.       width: 100%;

  217.       border: none; }

  218.     .mmenu-nav.mm-fresh  .search-block-form .form-submit {

  219.       margin: 0; }

  220. .mmenu-block-wrap h2 {

  221.   display: none;

  222. }