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

Delta Between Two Patch Sets: 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
Left Patch Set: Add support for navigating between headings with arrow keys Created Sept. 19, 2017, 9:14 a.m.
Right Patch Set: Refactoring Created Sept. 28, 2017, 2:48 p.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
Left: Side by side diff | Download
Right: Side by side diff | Download
LEFTRIGHT
1 // This file is part of help.eyeo.com. 1 // This file is part of help.eyeo.com.
2 // Copyright (C) 2017 Eyeo GmbH 2 // Copyright (C) 2017 Eyeo GmbH
3 // 3 //
4 // help.eyeo.com is free software: you can redistribute it and/or modify 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 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 6 // the Free Software Foundation, either version 3 of the License, or
7 // (at your option) any later version. 7 // (at your option) any later version.
8 // 8 //
9 // help.eyeo.com is distributed in the hope that it will be useful, 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 10 // but WITHOUT ANY WARRANTY; without even the implied warranty of
(...skipping 15 matching lines...) Expand all
26 display: block; 26 display: block;
27 border: 0; 27 border: 0;
28 border-bottom: 1px solid $gray; 28 border-bottom: 1px solid $gray;
29 background-color: $gray-light; 29 background-color: $gray-light;
30 padding: $sm; 30 padding: $sm;
31 width: 100%; 31 width: 100%;
32 text-align: left; 32 text-align: left;
33 font: inherit; 33 font: inherit;
34 font-weight: $bold-weight; 34 font-weight: $bold-weight;
35 cursor: pointer; 35 cursor: pointer;
36 outline: none;
36 } 37 }
37 38
38 [dir="rtl"] .accordion-toggle-button 39 [dir="rtl"] .accordion-toggle-button
39 { 40 {
40 text-align: right; 41 text-align: right;
42 }
43
44 .accordion-toggle-button:hover,
45 .accordion-toggle-button:focus
46 {
47 background-color: $gray-medium;
41 } 48 }
42 49
43 .accordion-heading:last-of-type .accordion-toggle-button[aria-expanded="false"] 50 .accordion-heading:last-of-type .accordion-toggle-button[aria-expanded="false"]
44 { 51 {
45 border-bottom: 0; 52 border-bottom: 0;
46 } 53 }
47 54
48 .accordion-toggle-button img 55 .accordion-toggle-button img
49 { 56 {
50 height: 0.6em; 57 height: 0.6em;
51 margin-right: 0.6em; 58 margin-right: 0.6em;
52 } 59 }
53 60
54 [dir="rtl"] .accordion-toggle-button img 61 [dir="rtl"] .accordion-toggle-button img
55 { 62 {
56 transform: rotate(180deg); 63 transform: rotate(180deg);
57 margin-right: 0; 64 margin-right: 0;
58 margin-left: 0.6em; 65 margin-left: 0.6em;
59 } 66 }
60 67
61 .accordion-toggle-button[aria-expanded="false"] img 68 .accordion-toggle-button[aria-expanded="false"] img
62 { 69 {
63 transform: rotate(90deg); 70 transform: rotate(90deg);
64 } 71 }
65 72
66 .accordion-body 73 .accordion-body
67 { 74 {
68 padding: $sm; 75 padding: $sm;
69 border-bottom: 1px solid $gray; 76 border-bottom: 1px solid $gray;
77 background-color: $white;
70 } 78 }
71 79
72 .accordion-body:last-of-type 80 .accordion-body:last-of-type
73 { 81 {
74 border-bottom: 0; 82 border-bottom: 0;
75 } 83 }
LEFTRIGHT

Powered by Google App Engine
This is Rietveld