Skip to content

Commit

Permalink
Merge pull request #730 from mobi/chore_accordion_font_weight
Browse files Browse the repository at this point in the history 
[Chore] Accordion Font Weight
  • Loading branch information
@grahamhency
grahamhency authored Jan 7, 2021
2 parents 57447e1 + 8c62a0c commit d4bb3ed
Showing 1 changed file with 137 additions and 123 deletions.
260 changes: 137 additions & 123 deletions projects/go-lib/src/lib/components/go-accordion/go-accordion-panel.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,158 +8,172 @@
color: $theme-light-color;
overflow: visible;
position: relative;
}

.go-accordion-panel--first {
border-top-left-radius: $global-radius;
border-top-right-radius: $global-radius;
}

.go-accordion-panel--last {
border-bottom-left-radius: $global-radius;
border-bottom-right-radius: $global-radius;
border-bottom-width: 1px;
}

.go-accordion-panel--active {
.go-accordion-panel--selected {
content: ' ';
height: 100%;
left: 0;
position: absolute;
transition: all 0.25s ease-in;
width: 4px;
z-index: 1;
&--first {
border-top-left-radius: $global-radius;
border-top-right-radius: $global-radius;
}
}

.go-accordion-panel--action-sheet {
.go-accordion-panel__header, .go-accordion-panel__content {
padding: 0.75rem;
font-size: 0.875rem;
&--last {
border-bottom-left-radius: $global-radius;
border-bottom-right-radius: $global-radius;
border-bottom-width: 1px;
}

.go-accordion-panel__title-icon {
font-size: 1rem;
&--active {
.go-accordion-panel--selected {
content: ' ';
height: 100%;
left: 0;
position: absolute;
transition: all .25s ease-in;
width: 4px;
z-index: 1;
}
}
}

.go-accordion-panel--borderless {
border: 0;
border-radius: 0;
}

.go-accordion-panel--box-shadow {
box-shadow: $global-box-shadow--regular;
}

.go-accordion-panel--dark {
background: $theme-dark-bg;
border-color: $theme-dark-border;
color: $theme-dark-color;
}

.go-accordion-panel__header {
@include transition(background-color);

cursor: pointer;
display: flex;
font-size: 1.2rem;
padding: 1.2rem 1rem;
position: relative;

&:hover {
background-color: darken($base-light, 7%);
&--action-sheet {
.go-accordion-panel {
// scss-lint:disable NestingDepth
&__header,
&__content {
font-size: .875rem;
padding: .75rem;
}

&__title-icon {
font-size: 1rem;
}
}
}

&.go-accordion-panel__header--dark:hover {
background-color: darken($base-dark-secondary, 3.5%);
&--borderless {
border: 0;
border-radius: 0;
}
}

.go-accordion-panel__header--active {
background-color: darken($base-light, 3.5%);
&--box-shadow {
box-shadow: $global-box-shadow--regular;
}

&.go-accordion-panel__header--dark {
background-color: darken($base-dark-secondary, 7%);
&--dark {
background: $theme-dark-bg;
border-color: $theme-dark-border;
color: $theme-dark-color;
}
}

.go-accordion-panel__header--slim {
font-size: 1rem;
padding: 1rem;
}
&__header {
@include transition(background-color);

cursor: pointer;
display: flex;
font-size: 1.2rem;
padding: 1.2rem 1rem;
position: relative;

&:hover {
background-color: darken($base-light, 7%);
}

&--dark {
background-color: darken($base-dark-secondary, 7%);

// scss-lint:disable NestingDepth
&:hover {
background-color: darken($base-dark-secondary, 3.5%);
}
}

&--active {
// scss-lint:disable NestingDepth
background-color: darken($base-light, 3.5%);

// scss-lint:disable SelectorFormat
&.go-accordion-panel__header--dark {
background-color: darken($base-dark-secondary, 7%);
}
}

&--slim {
font-size: 1rem;
padding: 1rem;
}
}

.go-accordion-panel__title {
align-items: center;
display: flex;
font-weight: 300;
padding-right: 1rem;
}
&__title {
align-items: center;
display: flex;
font-weight: $weight-regular;
padding-right: 1rem;
}

.go-accordion-panel__projection {
flex: 1;
}
&__projection {
flex: 1;
}

.go-accordion-panel__title-icon {
display: flex;
flex-direction: column;
justify-content: center;
margin-right: 1rem;
text-align: center;
}
&__title-icon {
display: flex;
flex-direction: column;
justify-content: center;
margin-right: 1rem;
text-align: center;
}

.go-accordion-panel__control {
@include transition(transform);
&__control {
@include transition(transform);

display: flex;
flex-direction: column;
justify-content: center;
margin-left: 1rem;
text-align: center;
}
display: flex;
flex-direction: column;
justify-content: center;
margin-left: 1rem;
text-align: center;

.go-accordion-panel__control--active {
transform: rotate(180deg);
}
&--active {
transform: rotate(180deg);
}
}

.go-accordion-panel__content {
padding: 1.5rem 1rem;
}
&__content {
padding: 1.5rem 1rem;

.go-accordion-panel__content--slim {
padding: 1rem;
}
&--slim {
padding: 1rem;
}

.go-accordion-panel__content--no-padding {
padding: 0 0 0 4px; // 4px accounts for the selected bar to the left
&--no-padding {
padding: 0 0 0 4px; // 4px accounts for the selected bar to the left
}
}
}

// ----- Dark Theme Classes
.go-accordion--theme-dark {
background: $theme-dark-bg;
border: 1px solid $theme-dark-border;
color: $theme-dark-color;
font-weight: 300;

.go-accordion-panel--border-top .go-accordion-panel__header {
border-top: 1px solid $theme-dark-border;
}

.go-accordion-panel--active .go-accordion-panel__header {
background: $theme-dark-bg-active;
}

.go-accordion-panel--inactive .go-accordion-panel__header {
background: $theme-dark-bg;
}

.go-accordion-panel__header:hover {
background: $theme-dark-bg-hover;
}

.go-accordion-panel__content {
color: $theme-dark-color;
font-weight: 300;
font-weight: $weight-light;

.go-accordion-panel {
// scss-lint:disable SelectorDepth
&--border-top &__header {
border-top: 1px solid $theme-dark-border;
}

&--active &__header {
background: $theme-dark-bg-active;
}

&--inactive &__header {
background: $theme-dark-bg;
}

&__header:hover {
background: $theme-dark-bg-hover;
}

&__content {
color: $theme-dark-color;
font-weight: $weight-light;
}
}
}

0 comments on commit d4bb3ed

Please sign in to comment.