Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
bug: Accordions border-top is now OK
  • Loading branch information
MikeMitterer committed Mar 12, 2015
1 parent f5d8dc3 commit 9d94c97
Show file tree
Hide file tree
Showing 2 changed files with 89 additions and 76 deletions.
164 changes: 88 additions & 76 deletions lib/sass/accordion/_accordion.scss
Expand Up @@ -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;
Expand Down
1 change: 1 addition & 0 deletions lib/sass/styleguide.scss
Expand Up @@ -4,6 +4,7 @@

$padding: 24px;


body {
margin: 0px;
}
Expand Down

0 comments on commit 9d94c97

Please sign in to comment.