You are here

Home » API reference » Mobile sliding menu 7.2

mm-fresh.css in Mobile sliding menu 7.2

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

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

  20.   z-index: 10000;

  21.   background: #e8e8e8;

  22.   color: #686868;

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

  28.   /* Icons */

  29.   /* Header */

  30.   /* List or Panel */

  31.   /* Has search */

  32.   /* Counter */

  33.   /* Footer */

  34.   /* Mmenu search form block */ }

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

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

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

  38.     display: table-cell;

  39.     vertical-align: middle;

  40.     font-style: normal;

  41.     padding-right: 15px; }

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

  43.     display: table-cell; }

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

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

  46.     color: #686868;

  47.     height: 60px;

  48.     line-height: 60px;

  49.     /* Old browsers */

  50.     background: #dbdbdb;

  51.     /* FF3.6+ */

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

  53.     /* Chrome,Safari4+ */

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

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

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

  57.     /* Opera 11.10+ */

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

  59.     /* IE10+ */

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

  61.     /* W3C */

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

  63.     /* IE6-9 */

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

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

  66.       font-size: 2em;

  67.       padding: 0 10%;

  68.       width: 80%;

  69.       text-align: center; }

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

  78.         margin: 0;

  79.         width: 10px;

  80.         height: 10px;

  81.         z-index: 10;

  82.         border-color: #686868; }

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

  91.         margin: 0;

  92.         width: 10px;

  93.         height: 10px;

  94.         z-index: 10;

  95.         border-color: #686868; }

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

  97.     padding-top: 0;

  98.     padding-bottom: 0;

  99.     padding: 60px 20px;

  100.     margin: 20px 0; }

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

  102.       border: 1px solid lightgrey;

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

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

  105.         padding: 10px 20px;

  106.         white-space: normal; }

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

  108.         margin-left: 0 !important;

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

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

  111.         background: inherit; }

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

  113.         padding: 15px 20px !important;

  114.         font-size: 1.25em; }

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

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

  117.         /* Old browsers */

  118.         background: #dbdbdb;

  119.         /* FF3.6+ */

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

  121.         /* Chrome,Safari4+ */

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

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

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

  125.         /* Opera 11.10+ */

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

  127.         /* IE10+ */

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

  129.         /* W3C */

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

  131.         /* IE6-9 */

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

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

  134.       margin: 0;

  135.       padding: 0; }

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

  137.     top: 0; }

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

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

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

  141.     height: 50px;

  142.     top: 60px;

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

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

  145.     padding: 40px 0;

  146.     color: #c4ccda;

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

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

  149.     padding-top: 60px; }

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

  151.     padding-bottom: 40px; }

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

  153.     color: #686868;

  154.     right: 35px; }

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

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

  157.     padding-left: 25px; }

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

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

  160.       border-left: none; }

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

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

  163.       border-color: #686868 !important;

  164.       width: 8px;

  165.       height: 8px; }

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

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

  168.     margin-right: 65px;

  169.     padding: 10px 20px; }

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

  171.     padding: 0 0 0 30px;

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

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

  174.       border-left: none; }

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

  176.         border-top: none; }

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

  178.         border-bottom: none; }

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

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

  181.     border-bottom: none;

  182.     width: 40px; }

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

  184.     background: #e8e8e8;

  185.     color: #686868;

  186.     padding: 0;

  187.     font-size: 1.25em;

  188.     height: 40px;

  189.     line-height: 40px;

  190.     text-align: center;

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

  192.   .mmenu-nav.mm-fresh .search-form {

  193.     margin-bottom: 0; }

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

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

  196.       display: block; }

  197.     .mmenu-nav.mm-fresh .search-form .form-item {

  198.       margin: 0 0 10px 0;

  199.       padding: 0; }

  200.     .mmenu-nav.mm-fresh .search-form label {

  201.       margin-bottom: 10px; }

  202.     .mmenu-nav.mm-fresh .search-form .form-text {

  203.       padding: 5px 0;

  204.       width: 100%;

  205.       border: none; }

  206.     .mmenu-nav.mm-fresh .search-form .form-submit {

  207.       margin: 0; }