Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code

Side by Side Diff: static/scss/components/_accordion.scss

Issue 29548567: Issue 4925 - Create accordion component for Help Center (Closed) Base URL: https://hg.adblockplus.org/help.eyeo.com
Patch Set: Rebase, Accordion object, hover state Created Sept. 25, 2017, 11:24 a.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View unified diff | Download patch
OLDNEW
(Empty)
1 // This file is part of help.eyeo.com.
2 // Copyright (C) 2017 Eyeo GmbH
3 //
4 // help.eyeo.com is free software: you can redistribute it and/or modify
5 // it under the terms of the GNU General Public License as published by
6 // the Free Software Foundation, either version 3 of the License, or
7 // (at your option) any later version.
8 //
9 // help.eyeo.com is distributed in the hope that it will be useful,
10 // but WITHOUT ANY WARRANTY; without even the implied warranty of
11 // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
12 // GNU General Public License for more details.
13 //
14 // You should have received a copy of the GNU General Public License
15 // along with help.eyeo.com. If not, see <http://www.gnu.org/licenses/>.
16
17 .accordion
18 {
19 border: 1px solid $gray;
20 border-radius: $xs;
21 overflow: hidden;
22 }
23
24 .accordion-toggle-button
25 {
26 display: block;
27 border: 0;
28 border-bottom: 1px solid $gray;
29 background-color: $gray-light;
30 padding: $sm;
31 width: 100%;
32 text-align: left;
33 font: inherit;
34 font-weight: $bold-weight;
35 cursor: pointer;
36 outline: none;
37 }
38
39 [dir="rtl"] .accordion-toggle-button
40 {
41 text-align: right;
42 }
43
44 .accordion-toggle-button:hover,
45 .accordion-toggle-button:focus
46 {
47 background-color: $gray-medium;
48 }
49
50 .accordion-heading:last-of-type .accordion-toggle-button[aria-expanded="false"]
51 {
52 border-bottom: 0;
53 }
54
55 .accordion-toggle-button img
56 {
57 height: 0.6em;
58 margin-right: 0.6em;
59 }
60
61 [dir="rtl"] .accordion-toggle-button img
62 {
63 transform: rotate(180deg);
64 margin-right: 0;
65 margin-left: 0.6em;
66 }
67
68 .accordion-toggle-button[aria-expanded="false"] img
69 {
70 transform: rotate(90deg);
71 }
72
73 .accordion-body
74 {
75 padding: $sm;
76 border-bottom: 1px solid $gray;
77 background-color: $white;
78 }
79
80 .accordion-body:last-of-type
81 {
82 border-bottom: 0;
83 }
OLDNEW
« static/js/main.js ('K') | « static/js/main.js ('k') | static/scss/main.scss » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld