Skip to content
This repository
Browse code

Accordion colour styling to differentiate the examples a bit more

  • Loading branch information...
commit 48d445f7b17b2fe8655bcf158307a671bbf29c12 1 parent e9a03bf
Dave Shea mobifydave authored
77 www/modules/accordion-examples.md
Source Rendered
@@ -7,19 +7,58 @@ title: Mobify.js Accordion Examples
7 7 <link rel="stylesheet" href="{{ site.baseurl }}/static/examples/css/accordion-style.css">
8 8 <style type="text/css">
9 9
  10 +.m-indicators-css .m-header {
  11 + border-color: #f6dada;
  12 + background: #fdf7f7; /* Old browsers */
  13 + background: -moz-linear-gradient(top, #fdf7f7 0%, #fae9e9 100%); /* FF3.6+ */
  14 + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fdf7f7), color-stop(100%,#fae9e9)); /* Chrome,Safari4+ */
  15 + background: -webkit-linear-gradient(top, #fdf7f7 0%,#fae9e9 100%); /* Chrome10+,Safari5.1+ */
  16 + background: -o-linear-gradient(top, #fdf7f7 0%,#fae9e9 100%); /* Opera 11.10+ */
  17 + background: -ms-linear-gradient(top, #fdf7f7 0%,#fae9e9 100%); /* IE10+ */
  18 + background: linear-gradient(to bottom, #fdf7f7 0%,#fae9e9 100%); /* W3C */
  19 +}
  20 +.m-indicators-css .m-header a {
  21 + color: #600;
  22 +}
  23 +.m-indicators-css .m-header:hover {
  24 + background: #fae9e9;
  25 + border-color: #f3cece;
  26 +}
  27 +.m-indicators-css .m-header:after {
  28 + color: #900;
  29 +}
  30 +
  31 +
  32 +
  33 +.m-css-advanced .m-header {
  34 + border-color: #d3e2e7;
  35 + background: #e9f0f3; /* Old browsers */
  36 + background: -moz-linear-gradient(top, #e9f0f3 0%, #dfeaed 100%); /* FF3.6+ */
  37 + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e9f0f3), color-stop(100%,#dfeaed)); /* Chrome,Safari4+ */
  38 + background: -webkit-linear-gradient(top, #e9f0f3 0%,#dfeaed 100%); /* Chrome10+,Safari5.1+ */
  39 + background: -o-linear-gradient(top, #e9f0f3 0%,#dfeaed 100%); /* Opera 11.10+ */
  40 + background: -ms-linear-gradient(top, #e9f0f3 0%,#dfeaed 100%); /* IE10+ */
  41 + background: linear-gradient(to bottom, #e9f0f3 0%,#dfeaed 100%); /* W3C */
  42 +}
  43 +.m-css-advanced .m-header:hover {
  44 + background: #dfeaed;
  45 + border-color: #c4d8df;
  46 +}
  47 +.m-css-advanced .m-header a {
  48 + color: #32525c;
  49 +}
10 50 .m-css-advanced .m-header:after {
11 51 color: rgba(255,255,255,0.9);
12 52 font-weight: normal;
13 53 text-align: center;
14 54 text-shadow: none;
15   - background: #bfbfbf;
16   - background: #c5c5c5; /* Old browsers */
17   - background: -moz-linear-gradient(top, #c5c5c5 1%, #acacac 100%); /* FF3.6+ */
18   - background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#c5c5c5), color-stop(100%,#acacac)); /* Chrome,Safari4+ */
19   - background: -webkit-linear-gradient(top, #c5c5c5 1%,#acacac 100%); /* Chrome10+,Safari5.1+ */
20   - background: -o-linear-gradient(top, #c5c5c5 1%,#acacac 100%); /* Opera 11.10+ */
21   - background: -ms-linear-gradient(top, #c5c5c5 1%,#acacac 100%); /* IE10+ */
22   - background: linear-gradient(to bottom, #c5c5c5 1%,#acacac 100%); /* W3C */
  55 + background: #1984b2; /* Old browsers */
  56 + background: -moz-linear-gradient(top, #1984b2 0%, #006b99 100%); /* FF3.6+ */
  57 + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1984b2), color-stop(100%,#006b99)); /* Chrome,Safari4+ */
  58 + background: -webkit-linear-gradient(top, #1984b2 0%,#006b99 100%); /* Chrome10+,Safari5.1+ */
  59 + background: -o-linear-gradient(top, #1984b2 0%,#006b99 100%); /* Opera 11.10+ */
  60 + background: -ms-linear-gradient(top, #1984b2 0%,#006b99 100%); /* IE10+ */
  61 + background: linear-gradient(to bottom, #1984b2 0%,#006b99 100%); /* W3C */
23 62 font-size: 22px;
24 63 line-height: 16px;
25 64 width: 20px;
@@ -34,16 +73,22 @@ title: Mobify.js Accordion Examples
34 73 }
35 74 .m-css-advanced .m-header:hover:after {
36 75 color: #fff;
37   - background: #909090;
  76 + background: #198ebf; /* Old browsers */
  77 + background: -moz-linear-gradient(top, #198ebf 0%, #0075a6 100%); /* FF3.6+ */
  78 + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#198ebf), color-stop(100%,#0075a6)); /* Chrome,Safari4+ */
  79 + background: -webkit-linear-gradient(top, #198ebf 0%,#0075a6 100%); /* Chrome10+,Safari5.1+ */
  80 + background: -o-linear-gradient(top, #198ebf 0%,#0075a6 100%); /* Opera 11.10+ */
  81 + background: -ms-linear-gradient(top, #198ebf 0%,#0075a6 100%); /* IE10+ */
  82 + background: linear-gradient(to bottom, #198ebf 0%,#0075a6 100%); /* W3C */
38 83 }
39 84 .m-css-advanced .m-active .m-header:after {
40   - background: #999;
41   - background: -moz-linear-gradient(top, #8a8a8a 0%, #a3a3a3 100%); /* FF3.6+ */
42   - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8a8a8a), color-stop(100%,#a3a3a3)); /* Chrome,Safari4+ */
43   - background: -webkit-linear-gradient(top, #8a8a8a 0%,#a3a3a3 100%); /* Chrome10+,Safari5.1+ */
44   - background: -o-linear-gradient(top, #8a8a8a 0%,#a3a3a3 100%); /* Opera 11.10+ */
45   - background: -ms-linear-gradient(top, #8a8a8a 0%,#a3a3a3 100%); /* IE10+ */
46   - background: linear-gradient(to bottom, #8a8a8a 0%,#a3a3a3 100%); /* W3C */
  85 + background: #015c8a; /* Old browsers */
  86 + background: -moz-linear-gradient(top, #015c8a 0%, #1a75a3 100%); /* FF3.6+ */
  87 + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#015c8a), color-stop(100%,#1a75a3)); /* Chrome,Safari4+ */
  88 + background: -webkit-linear-gradient(top, #015c8a 0%,#1a75a3 100%); /* Chrome10+,Safari5.1+ */
  89 + background: -o-linear-gradient(top, #015c8a 0%,#1a75a3 100%); /* Opera 11.10+ */
  90 + background: -ms-linear-gradient(top, #015c8a 0%,#1a75a3 100%); /* IE10+ */
  91 + background: linear-gradient(to bottom, #015c8a 0%,#1a75a3 100%); /* W3C */
47 92 -webkit-box-shadow: #fff 0 -1px 0;
48 93 -moz-box-shadow: #fff 0 -1px 0;
49 94 box-shadow: #fff 0 -1px 0;
2  www/static/examples/css/accordion-style.css
@@ -94,7 +94,7 @@
94 94 /* Accordion with CSS indicators */
95 95 .m-indicators-css .m-header:after {
96 96 content : "+";
97   - color: #999;
  97 + color: #900;
98 98 text-shadow: #fff 0 1px 0;
99 99 display: block;
100 100 position: absolute;

0 comments on commit 48d445f

Please sign in to comment.
Something went wrong with that request. Please try again.