You are here

Home » API reference » Mobile sliding menu 7

mm-fresh.css in Mobile sliding menu 7 

/* Mmenu transition */
html.mm-fresh .mm-page,
html.mm-fresh #mm-blocker,
html.mm-fresh .mm-fixed-top,
html.mm-fresh .mm-fixed-bottom,
html.mm-fresh .mm-menu.mm-horizontal > .mm-panel {
  -webkit-transition: none 0.2s linear;
  -moz-transition: none 0.2s linear;
  -ms-transition: none 0.2s linear;
  -o-transition: none 0.2s linear;
  transition: none 0.2s linear;
  -webkit-transition-property: top, right, bottom, left, border;
  -moz-transition-property: top, right, bottom, left, border;
  -ms-transition-property: top, right, bottom, left, border;
  -o-transition-property: top, right, bottom, left, border;
  transition-property: top, right, bottom, left, border;
}

/* Blocker */
html.mm-fresh #mm-blocker {
  background: #000;
  opacity: 0.6 !important;
  filter:alpha(opacity=60) !important; /* For IE8 and earlier */
}

/* Body */
html.mm-fresh .mm-page {
  box-shadow: none !important;
}

/* Mmenu nav */
html.mm-fresh nav.mm-fresh {
  background: #e8e8e8;
  color: #686868;
  font-family: Helvetica, sans-serif;
}

html.mm-fresh nav.mm-fresh {
  font-size: 18px;
}

html.mm-fresh nav.mm-fresh a {
  font-size: 1.25em;
}

html.mm-fresh nav.mm-fresh > .mm-header {
  border: none;
  color: #686868;
  text-shadow: 0 1px #fff;
  height: 60px;
  line-height: 60px;
  padding: 0;
  -webkit-box-shadow: 0 2px 4px #aaa;
  -moz-box-shadow: 0 2px 4px #aaa;
  box-shadow: 0 2px 4px #aaa;
  background: #dbdbdb; /* Old browsers */
  background: -moz-linear-gradient(top,  #dbdbdb 0%, #d7d7d7 50%, #d2d2d2 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dbdbdb), color-stop(50%,#d7d7d7), color-stop(100%,#d2d2d2)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #dbdbdb 0%,#d7d7d7 50%,#d2d2d2 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #dbdbdb 0%,#d7d7d7 50%,#d2d2d2 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #dbdbdb 0%,#d7d7d7 50%,#d2d2d2 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #dbdbdb 0%,#d7d7d7 50%,#d2d2d2 100%); /* W3C */
  filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#dbdbdb', endColorstr='#d2d2d2',GradientType=0 )"; /* IE6-9 */
}

html.mm-fresh nav.mm-fresh > .mm-header .mm-title {
  font-size: 1.5em;
  padding: 0 10%;
  width: 80%;
  text-align: center;
}

html.mm-fresh nav.mm-fresh > .mm-header .mm-prev:before,
html.mm-fresh nav.mm-fresh > .mm-header .mm-next:before {
  z-index: 10;
  border-color: #fff;
  margin-bottom: -5px;
  width: 10px;
  height: 10px;
}

html.mm-fresh nav.mm-fresh > .mm-panel {
  padding: 60px 20px;
  margin: 20px 0;
}

html.mm-fresh nav.mm-fresh > .mm-panel > li.mmenu-expanded:not(:first-child) {
  margin-top: 20px !important;
}

html.mm-fresh nav.mm-fresh .mm-list > li {
  border: 1px solid #d3d3d3;
  border-top: 1px solid #fff;
}

html.mm-fresh nav.mm-fresh .mm-list > li.mmenu-expanded {
  border-top: 1px solid #d3d3d3;
  border-bottom: 1px solid #d3d3d3;
}

html.mm-fresh nav.mm-fresh .mm-list > li > span {
  padding: 15px 20px;
}

/* Mmenu list icons */
html.mm-fresh nav.mm-fresh .mm-list > li > a,
html.mm-fresh nav.mm-fresh .mm-list > li > span {
  white-space: normal;
}

html.mm-fresh nav.mm-fresh span.mmenu-list.mmenu-block-collapsed .mmenu-list-title,
html.mm-fresh nav.mm-fresh a.mmenu-list .mmenu-list-title {
  text-shadow: 0 1px #fff;
}

html.mm-fresh nav.mm-fresh li {
  display: table;
  width: 100%;
}

html.mm-fresh nav.mm-fresh .mmenu-list-icon,
html.mm-fresh nav.mm-fresh span.mmenu-list.mmenu-block-collapsed .mmenu-list-title,
html.mm-fresh nav.mm-fresh a.mmenu-list .mmenu-list-title {
  display: table-cell;
  vertical-align: middle;
  white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
  white-space: -pre-wrap;      /* Opera 4-6 */
  white-space: -o-pre-wrap;    /* Opera 7 */
  white-space: pre-wrap;       /* css-3 */
  word-wrap: break-word;       /* Internet Explorer 5.5+ */
  word-break: break-all;
  white-space: normal;
}

html.mm-fresh nav.mm-fresh .mmenu-list-icon:before {
  color: #666;
}

html.mm-fresh nav.mm-fresh .mm-list > li:not(.mmenu-wrap) a:not(.mm-subopen):not(.mm-subclose):not(.mm-fullsubopen) {
  padding: 15px 20px;
}

html.mm-fresh nav.mm-fresh .mm-list > li.mm-selected > a,
html.mm-fresh nav.mm-fresh .mm-list > li.mm-selected > span {
  background: rgba(0, 0, 0, 0.08);
}

html.mm-fresh nav.mm-fresh .mm-list > li:not(.mm-subtitle):not(.mm-label):not(.mm-noresults)::after {
  border: none !important;
}

html.mm-fresh nav.mm-fresh em.mm-counter {
  color: #686868;
  text-shadow: 0 1px #fff;
  font-size: 1.25em;
}

html.mm-fresh nav.mm-fresh em.mm-counter + a.mm-subopen + a,
html.mm-fresh nav.mm-fresh em.mm-counter + a.mm-subopen + span {
  margin-right: 80px;
}

html.mm-fresh nav.mm-fresh em.mm-counter + a.mm-subopen {
  padding-left: 80px;
}

html.mm-fresh nav.mm-fresh a.mm-subopen:before,
html.mm-fresh nav.mm-fresh a.mm-fullsubopen:before,
html.mm-fresh nav.mm-fresh a.mm-subclose:before {
  border-left-color: rgba(0, 0, 0, 0.25);
  border-left-width: 0px;
  border-left-style: solid;
}

html.mm-fresh nav.mm-fresh a.mm-subopen:after,
html.mm-fresh nav.mm-fresh a.mm-fullsubopen:after,
html.mm-fresh nav.mm-fresh a.mm-subclose:after {
  border-color: #686868;
  width: 8px;
  height: 8px;
  right: 20px;
}

html.mm-fresh nav.mm-fresh .mmenu-block-collapsed {
  padding: 15px 20px !important;
  font-size: 1.25em;
}

html.mm-fresh nav.mm-fresh .mmenu-block-expanded {
  background: #dbdbdb; /* Old browsers */
  background: -moz-linear-gradient(top,  #dbdbdb 0%, #d7d7d7 50%, #d2d2d2 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dbdbdb), color-stop(50%,#d7d7d7), color-stop(100%,#d2d2d2)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #dbdbdb 0%,#d7d7d7 50%,#d2d2d2 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #dbdbdb 0%,#d7d7d7 50%,#d2d2d2 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #dbdbdb 0%,#d7d7d7 50%,#d2d2d2 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #dbdbdb 0%,#d7d7d7 50%,#d2d2d2 100%); /* W3C */
  filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#dbdbdb', endColorstr='#d2d2d2',GradientType=0 )"; /* IE6-9 */
  color: #686868;
  text-shadow: 0 1px #fff;
  padding: 10px 20px 10px 20px !important;
}

html.mm-fresh nav.mm-fresh > .mm-panel > .mm-list {
  margin: 0;
  padding: 0;
}

/* Has search */
html.mm-fresh nav.mm-fresh.mm-hassearch > .mm-search {
  height: 50px;
  top: 60px;
  border-bottom: 1px solid #242a37;
}

html.mm-fresh nav.mm-fresh.mm-hassearch > .mm-header {
  top: 0;
}

html.mm-fresh nav.mm-fresh.mm-hassearch > .mm-panel {
  padding-top: 110px !important;
}

html.mm-fresh nav.mm-fresh.mm-hassearch li.mm-noresults {
  padding: 40px 0;
  color: #686868;
  text-shadow: 0 1px #fff;
}

/* Mmenu search form block */
html.mm-fresh nav.mm-fresh .search-form {
  margin-bottom: 0;
}

html.mm-fresh nav.mm-fresh .search-form .container-inline div,
html.mm-fresh nav.mm-fresh .search-form .container-inline label {
  display: block;
}

html.mm-fresh nav.mm-fresh .search-form .form-item {
  margin: 0 0 10px 0;
  padding: 0;
}

html.mm-fresh nav.mm-fresh .search-form label {
  margin-bottom: 10px;
}

html.mm-fresh nav.mm-fresh .search-form .form-text {
  padding: 5px 0;
  width: 100%;
  border: none;
}
html.mm-fresh nav.mm-fresh .search-form .form-submit {
  margin: 0;
}

File

classes/mm-fresh/css/mm-fresh.css
View source 
  1. /* Mmenu transition */

  2. html.mm-fresh .mm-page,

  3. html.mm-fresh #mm-blocker,

  4. html.mm-fresh .mm-fixed-top,

  5. html.mm-fresh .mm-fixed-bottom,

  6. html.mm-fresh .mm-menu.mm-horizontal > .mm-panel {

  7.   -webkit-transition: none 0.2s linear;

  8.   -moz-transition: none 0.2s linear;

  9.   -ms-transition: none 0.2s linear;

  10.   -o-transition: none 0.2s linear;

  11.   transition: none 0.2s linear;

  12.   -webkit-transition-property: top, right, bottom, left, border;

  13.   -moz-transition-property: top, right, bottom, left, border;

  14.   -ms-transition-property: top, right, bottom, left, border;

  15.   -o-transition-property: top, right, bottom, left, border;

  16.   transition-property: top, right, bottom, left, border;

  17. }

  18. 

  19. /* Blocker */

  20. html.mm-fresh #mm-blocker {

  21.   background: #000;

  22.   opacity: 0.6 !important;

  23.   filter:alpha(opacity=60) !important; /* For IE8 and earlier */

  24. }

  25. 

  26. /* Body */

  27. html.mm-fresh .mm-page {

  28.   box-shadow: none !important;

  29. }

  30. 

  31. /* Mmenu nav */

  32. html.mm-fresh nav.mm-fresh {

  33.   background: #e8e8e8;

  34.   color: #686868;

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

  36. }

  37. 

  38. html.mm-fresh nav.mm-fresh {

  39.   font-size: 18px;

  40. }

  41. 

  42. html.mm-fresh nav.mm-fresh a {

  43.   font-size: 1.25em;

  44. }

  45. 

  46. html.mm-fresh nav.mm-fresh > .mm-header {

  47.   border: none;

  48.   color: #686868;

  49.   text-shadow: 0 1px #fff;

  50.   height: 60px;

  51.   line-height: 60px;

  52.   padding: 0;

  53.   -webkit-box-shadow: 0 2px 4px #aaa;

  54.   -moz-box-shadow: 0 2px 4px #aaa;

  55.   box-shadow: 0 2px 4px #aaa;

  56.   background: #dbdbdb; /* Old browsers */

  57.   background: -moz-linear-gradient(top,  #dbdbdb 0%, #d7d7d7 50%, #d2d2d2 100%); /* FF3.6+ */

  58.   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dbdbdb), color-stop(50%,#d7d7d7), color-stop(100%,#d2d2d2)); /* Chrome,Safari4+ */

  59.   background: -webkit-linear-gradient(top,  #dbdbdb 0%,#d7d7d7 50%,#d2d2d2 100%); /* Chrome10+,Safari5.1+ */

  60.   background: -o-linear-gradient(top,  #dbdbdb 0%,#d7d7d7 50%,#d2d2d2 100%); /* Opera 11.10+ */

  61.   background: -ms-linear-gradient(top,  #dbdbdb 0%,#d7d7d7 50%,#d2d2d2 100%); /* IE10+ */

  62.   background: linear-gradient(to bottom,  #dbdbdb 0%,#d7d7d7 50%,#d2d2d2 100%); /* W3C */

  63.   filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#dbdbdb', endColorstr='#d2d2d2',GradientType=0 )"; /* IE6-9 */

  64. }

  65. 

  66. html.mm-fresh nav.mm-fresh > .mm-header .mm-title {

  67.   font-size: 1.5em;

  68.   padding: 0 10%;

  69.   width: 80%;

  70.   text-align: center;

  71. }

  72. 

  73. html.mm-fresh nav.mm-fresh > .mm-header .mm-prev:before,

  74. html.mm-fresh nav.mm-fresh > .mm-header .mm-next:before {

  75.   z-index: 10;

  76.   border-color: #fff;

  77.   margin-bottom: -5px;

  78.   width: 10px;

  79.   height: 10px;

  80. }

  81. 

  82. html.mm-fresh nav.mm-fresh > .mm-panel {

  83.   padding: 60px 20px;

  84.   margin: 20px 0;

  85. }

  86. 

  87. html.mm-fresh nav.mm-fresh > .mm-panel > li.mmenu-expanded:not(:first-child) {

  88.   margin-top: 20px !important;

  89. }

  90. 

  91. html.mm-fresh nav.mm-fresh .mm-list > li {

  92.   border: 1px solid #d3d3d3;

  93.   border-top: 1px solid #fff;

  94. }

  95. 

  96. html.mm-fresh nav.mm-fresh .mm-list > li.mmenu-expanded {

  97.   border-top: 1px solid #d3d3d3;

  98.   border-bottom: 1px solid #d3d3d3;

  99. }

  100. 

  101. html.mm-fresh nav.mm-fresh .mm-list > li > span {

  102.   padding: 15px 20px;

  103. }

  104. 

  105. /* Mmenu list icons */

  106. html.mm-fresh nav.mm-fresh .mm-list > li > a,

  107. html.mm-fresh nav.mm-fresh .mm-list > li > span {

  108.   white-space: normal;

  109. }

  110. 

  111. html.mm-fresh nav.mm-fresh span.mmenu-list.mmenu-block-collapsed .mmenu-list-title,

  112. html.mm-fresh nav.mm-fresh a.mmenu-list .mmenu-list-title {

  113.   text-shadow: 0 1px #fff;

  114. }

  115. 

  116. html.mm-fresh nav.mm-fresh li {

  117.   display: table;

  118.   width: 100%;

  119. }

  120. 

  121. html.mm-fresh nav.mm-fresh .mmenu-list-icon,

  122. html.mm-fresh nav.mm-fresh span.mmenu-list.mmenu-block-collapsed .mmenu-list-title,

  123. html.mm-fresh nav.mm-fresh a.mmenu-list .mmenu-list-title {

  124.   display: table-cell;

  125.   vertical-align: middle;

  126.   white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */

  127.   white-space: -pre-wrap;      /* Opera 4-6 */

  128.   white-space: -o-pre-wrap;    /* Opera 7 */

  129.   white-space: pre-wrap;       /* css-3 */

  130.   word-wrap: break-word;       /* Internet Explorer 5.5+ */

  131.   word-break: break-all;

  132.   white-space: normal;

  133. }

  134. 

  135. html.mm-fresh nav.mm-fresh .mmenu-list-icon:before {

  136.   color: #666;

  137. }

  138. 

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

  140.   padding: 15px 20px;

  141. }

  142. 

  143. html.mm-fresh nav.mm-fresh .mm-list > li.mm-selected > a,

  144. html.mm-fresh nav.mm-fresh .mm-list > li.mm-selected > span {

  145.   background: rgba(0, 0, 0, 0.08);

  146. }

  147. 

  148. html.mm-fresh nav.mm-fresh .mm-list > li:not(.mm-subtitle):not(.mm-label):not(.mm-noresults)::after {

  149.   border: none !important;

  150. }

  151. 

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

  153.   color: #686868;

  154.   text-shadow: 0 1px #fff;

  155.   font-size: 1.25em;

  156. }

  157. 

  158. html.mm-fresh nav.mm-fresh em.mm-counter + a.mm-subopen + a,

  159. html.mm-fresh nav.mm-fresh em.mm-counter + a.mm-subopen + span {

  160.   margin-right: 80px;

  161. }

  162. 

  163. html.mm-fresh nav.mm-fresh em.mm-counter + a.mm-subopen {

  164.   padding-left: 80px;

  165. }

  166. 

  167. html.mm-fresh nav.mm-fresh a.mm-subopen:before,

  168. html.mm-fresh nav.mm-fresh a.mm-fullsubopen:before,

  169. html.mm-fresh nav.mm-fresh a.mm-subclose:before {

  170.   border-left-color: rgba(0, 0, 0, 0.25);

  171.   border-left-width: 0px;

  172.   border-left-style: solid;

  173. }

  174. 

  175. html.mm-fresh nav.mm-fresh a.mm-subopen:after,

  176. html.mm-fresh nav.mm-fresh a.mm-fullsubopen:after,

  177. html.mm-fresh nav.mm-fresh a.mm-subclose:after {

  178.   border-color: #686868;

  179.   width: 8px;

  180.   height: 8px;

  181.   right: 20px;

  182. }

  183. 

  184. html.mm-fresh nav.mm-fresh .mmenu-block-collapsed {

  185.   padding: 15px 20px !important;

  186.   font-size: 1.25em;

  187. }

  188. 

  189. html.mm-fresh nav.mm-fresh .mmenu-block-expanded {

  190.   background: #dbdbdb; /* Old browsers */

  191.   background: -moz-linear-gradient(top,  #dbdbdb 0%, #d7d7d7 50%, #d2d2d2 100%); /* FF3.6+ */

  192.   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dbdbdb), color-stop(50%,#d7d7d7), color-stop(100%,#d2d2d2)); /* Chrome,Safari4+ */

  193.   background: -webkit-linear-gradient(top,  #dbdbdb 0%,#d7d7d7 50%,#d2d2d2 100%); /* Chrome10+,Safari5.1+ */

  194.   background: -o-linear-gradient(top,  #dbdbdb 0%,#d7d7d7 50%,#d2d2d2 100%); /* Opera 11.10+ */

  195.   background: -ms-linear-gradient(top,  #dbdbdb 0%,#d7d7d7 50%,#d2d2d2 100%); /* IE10+ */

  196.   background: linear-gradient(to bottom,  #dbdbdb 0%,#d7d7d7 50%,#d2d2d2 100%); /* W3C */

  197.   filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#dbdbdb', endColorstr='#d2d2d2',GradientType=0 )"; /* IE6-9 */

  198.   color: #686868;

  199.   text-shadow: 0 1px #fff;

  200.   padding: 10px 20px 10px 20px !important;

  201. }

  202. 

  203. html.mm-fresh nav.mm-fresh > .mm-panel > .mm-list {

  204.   margin: 0;

  205.   padding: 0;

  206. }

  207. 

  208. /* Has search */

  209. html.mm-fresh nav.mm-fresh.mm-hassearch > .mm-search {

  210.   height: 50px;

  211.   top: 60px;

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

  213. }

  214. 

  215. html.mm-fresh nav.mm-fresh.mm-hassearch > .mm-header {

  216.   top: 0;

  217. }

  218. 

  219. html.mm-fresh nav.mm-fresh.mm-hassearch > .mm-panel {

  220.   padding-top: 110px !important;

  221. }

  222. 

  223. html.mm-fresh nav.mm-fresh.mm-hassearch li.mm-noresults {

  224.   padding: 40px 0;

  225.   color: #686868;

  226.   text-shadow: 0 1px #fff;

  227. }

  228. 

  229. /* Mmenu search form block */

  230. html.mm-fresh nav.mm-fresh .search-form {

  231.   margin-bottom: 0;

  232. }

  233. 

  234. html.mm-fresh nav.mm-fresh .search-form .container-inline div,

  235. html.mm-fresh nav.mm-fresh .search-form .container-inline label {

  236.   display: block;

  237. }

  238. 

  239. html.mm-fresh nav.mm-fresh .search-form .form-item {

  240.   margin: 0 0 10px 0;

  241.   padding: 0;

  242. }

  243. 

  244. html.mm-fresh nav.mm-fresh .search-form label {

  245.   margin-bottom: 10px;

  246. }

  247. 

  248. html.mm-fresh nav.mm-fresh .search-form .form-text {

  249.   padding: 5px 0;

  250.   width: 100%;

  251.   border: none;

  252. }

  253. html.mm-fresh nav.mm-fresh .search-form .form-submit {

  254.   margin: 0;

  255. }