Permalink
Browse files

bug: Accordions border-top is now OK

  • Loading branch information...
MikeMitterer committed Mar 12, 2015
1 parent f5d8dc3 commit 9d94c97d78089ee067ff357136d7e47315892660
Showing with 89 additions and 76 deletions.
  1. +88 −76 lib/sass/accordion/_accordion.scss
  2. +1 −0 lib/sass/styleguide.scss
@@ -21,110 +21,122 @@ $accordion-label-font-size: 16px !default;
$accordion-padding: 16px !default;
/* Accordion */
+wsk-accordion-group, wsk-accordion {
+ display: block;
+}
+wsk-accordion-group {
+ wsk-accordion:first-of-type {
+ .wsk-accordion {
+ border-top: 1px solid $accordion-divider-color;
+ }
+ }
+}
/* Basic Accordion Styles */
-.wsk-accordion {
- /* For Demo Positioning Only */
- // width: 50%;
- // margin: 20px;
+.wsk-accordion-group {
- border-top: 1px solid $accordion-divider-color;
+ .wsk-accordion {
+ /* For Demo Positioning Only */
+ // width: 50%;
+ // margin: 20px;
- input[name^='wsk-accordion'] {
- display: none;
- }
+ input[name^='wsk-accordion'] {
+ display: none;
+ }
- /* Labels */
- label {
- display: flex;
- flex-direction: row;
- justify-content: flex-start;
- align-items: center;
+ /* Labels */
+ label {
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-start;
+ align-items: center;
- height: $accordion-label-height;
- padding-left: $accordion-padding;
+ height: $accordion-label-height;
+ padding-left: $accordion-padding;
- position: relative;
- //display: block;
- border-bottom: 1px solid $accordion-divider-color;
- // font-size: 20px;
- color: $accordion-text-color;
- cursor: pointer;
- font-size: $accordion-label-font-size;
+ position: relative;
+ //display: block;
+ border-bottom: 1px solid $accordion-divider-color;
+ // font-size: 20px;
+ color: $accordion-text-color;
+ cursor: pointer;
+ font-size: $accordion-label-font-size;
- transition: all $accordion-timing $accordion-ease;
+ transition: all $accordion-timing $accordion-ease;
- .debug & { border: 1px solid red; }
+ .debug & { border: 1px solid red; }
- &:hover {
- color: $accordion-active-text-color;
- }
+ &:hover {
+ color: $accordion-active-text-color;
+ }
- i.indicator {
- position: absolute;
- top: $accordion-padding * 1.3;
- right: $accordion-padding;
- transition : $accordion-timing ease-in-out;
+ i.indicator {
+ position: absolute;
+ top: $accordion-padding * 1.3;
+ right: $accordion-padding;
+ transition : $accordion-timing ease-in-out;
- font-weight: 100;
- font-size: 60%;
- color: $accordion-text-color;
+ font-weight: 100;
+ font-size: 60%;
+ color: $accordion-text-color;
- .debug & { border: 1px solid green; }
- }
+ .debug & { border: 1px solid green; }
+ }
- .wsk-accordion__ripple-container {
- display: block;
- position: absolute;
- height: 100%;
- width: 100%;
- left: 0;
- top: 0;
- z-index: 1;
- overflow: hidden;
-
- & .wsk-ripple {
- background: $tab-highlight-color;
+ .wsk-accordion__ripple-container {
+ display: block;
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ left: 0;
+ top: 0;
+ z-index: 1;
+ overflow: hidden;
+
+ & .wsk-ripple {
+ background: $tab-highlight-color;
+ }
}
}
- }
- input:checked + label {
- color: $accordion-active-text-color;
+ input:checked + label {
+ color: $accordion-active-text-color;
- i.indicator {
- transform : rotate(90deg);
- transition : $accordion-timing ease-in-out;
+ i.indicator {
+ transform : rotate(90deg);
+ transition : $accordion-timing ease-in-out;
- color: $accordion-highlight-color;
- .debug & { border: 1px solid red; }
+ color: $accordion-highlight-color;
+ .debug & { border: 1px solid red; }
+ }
}
- }
- /* Panel Content */
- .wsk-accordion--content {
- overflow: auto;
- max-height: 0;
+ /* Panel Content */
+ .wsk-accordion--content {
+ overflow: auto;
+ max-height: 0;
- position: relative;
- padding: 0 $accordion-padding;
- transition: max-height $accordion-timing $accordion-ease;
+ position: relative;
+ padding: 0 $accordion-padding;
+ transition: max-height $accordion-timing $accordion-ease;
- .wsk-accordion--header {
- padding: ($accordion-padding / 2) 0;
- color: $accordion-header-color;
- margin: 0;
- }
+ .wsk-accordion--header {
+ padding: ($accordion-padding / 2) 0;
+ color: $accordion-header-color;
+ margin: 0;
+ }
- .wsk-accordion--body {
- padding: 0;
- color: $accordion-text-color;
- //font-size: .825em;
- //line-height: 1.4em;
+ .wsk-accordion--body {
+ padding: 0;
+ color: $accordion-text-color;
+ //font-size: .825em;
+ //line-height: 1.4em;
+ }
}
}
}
+
input[name^='wsk-accordion']:checked ~ .wsk-accordion--content {
max-height: 1500px;
border-bottom: 1px solid $accordion-divider-color;
View
@@ -4,6 +4,7 @@
$padding: 24px;
+
body {
margin: 0px;
}

0 comments on commit 9d94c97

Please sign in to comment.