Last active
March 9, 2021 17:09
-
-
Save woodcox/7c8f4c2bb95e49c7bf5712ba0e6b0eb9 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $accordion-color: white; | |
| $accordion-background: blue; | |
| $accordion-font-color: grey; | |
| $accordion-content-background: white; | |
| $accordion-border-color: 1px solid darken($accordion-background, 10%) !default; | |
| $accordion-accent-color: green; | |
| $accordion-border-radius: 4px !default; | |
| $accent-color: #cdcdcd !default; | |
| $accent-accordion-border-color: 1px solid darken($accordion-accent-color, 10%) !default; | |
| $muted-border: 1px solid $accent-color !default; | |
| $muted-border-hover: 1px solid darken($accent-color, 30%) !default; | |
| $muted-background: transparent !default; | |
| $muted-background-hover: transparent !default; | |
| $muted-color: darken($accent-color, 50%) !default; | |
| $muted-color-hover: darken($accent-color, 50%) !default; | |
| /* Accordion styles */ | |
| %accordion-ui { | |
| width: 100%; | |
| position: relative; | |
| padding-bottom: 0; | |
| li { | |
| list-style: none; | |
| margin-left: 0; | |
| input { | |
| display: none; | |
| } | |
| label { | |
| display: flex; | |
| cursor: pointer; | |
| padding: 0.75rem 2.4rem 0.75rem 0; | |
| margin: 0; | |
| color: $accordion-color; | |
| background: $accordion-background; | |
| border-radius: $accordion-border-radius; | |
| margin-bottom: 3px; | |
| padding-left: 1.1rem; | |
| &:hover { | |
| background: darken($accordion-background, 10%); | |
| } | |
| } | |
| .accord-content { | |
| display: none; | |
| padding-bottom: 1.2rem; | |
| background: $accordion-content-background; | |
| padding-left: 1.1rem; | |
| } | |
| input:checked + label { | |
| background: darken($accordion-background, 10%); | |
| border-bottom-right-radius: 0; | |
| border-bottom-left-radius: 0; | |
| border-top-right-radius: $accordion-border-radius; | |
| border-top-left-radius: $accordion-border-radius; | |
| margin-bottom: 0px; | |
| + .accord-content { | |
| display: block; | |
| border: darken($accordion-background, 10%); | |
| color: $accordion-font-color; | |
| border-left: $accordion-border-color; | |
| border-right: $accordion-border-color; | |
| border-bottom: $accordion-border-color; | |
| border-bottom-right-radius: $accordion-border-radius; | |
| border-bottom-left-radius: $accordion-border-radius; | |
| border-top-right-radius: 0; | |
| border-top-left-radius: 0; | |
| margin-bottom: 3px; | |
| } | |
| } | |
| label::before { | |
| content: "\276F"; | |
| font-weight: normal; | |
| font-size: 120%; | |
| line-height: 1.1rem; | |
| padding: 0; | |
| position: absolute; | |
| right: 1.1rem; | |
| transition: all 0.20s ease-in-out; | |
| } | |
| input:checked + label::before { | |
| transform: rotate(90deg); | |
| } | |
| } | |
| } | |
| // Primary accordion | |
| .accordion { | |
| @extend %accordion-ui; | |
| } | |
| // Secondary accordion colour | |
| .accent-accordion { | |
| @extend %accordion-ui; | |
| li label { | |
| background: $accordion-accent-color; | |
| &:hover { | |
| background: darken($accordion-accent-color, 10%) | |
| } | |
| } | |
| li input:checked + label { | |
| background: darken($accordion-accent-color, 10%); | |
| + .accord-content { | |
| border-left: $accent-accordion-border-color; | |
| border-right: $accent-accordion-border-color; | |
| border-bottom: $accent-accordion-border-color; | |
| } | |
| } | |
| } | |
| // Square accordion | |
| .square-accordion { | |
| @extend %accordion-ui; | |
| li label { | |
| border-radius: 0; | |
| } | |
| li input:checked + label { | |
| border-radius: 0; | |
| + .accord-content { | |
| border-radius: 0; | |
| } | |
| } | |
| } | |
| // Muted accordion | |
| .muted-accordion { | |
| @extend %accordion-ui; | |
| li label { | |
| background: $muted-background; | |
| border: $muted-border; | |
| color: $muted-color; | |
| &:hover { | |
| color: $muted-color-hover; | |
| border: $muted-border-hover; | |
| background: $muted-background-hover; | |
| } | |
| } | |
| li input:checked + label { | |
| color: $muted-color-hover; | |
| border-top: $muted-border-hover; | |
| border-left: $muted-border-hover; | |
| border-right: $muted-border-hover; | |
| border-bottom: 0; | |
| background: $muted-background-hover; | |
| + .accord-content { | |
| border: $muted-border-hover; | |
| border-top: 0; | |
| border-left: $muted-border-hover; | |
| border-right: $muted-border-hover; | |
| border-bottom: $muted-border-hover; | |
| background: $muted-background; | |
| } | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="muted-accordion"> | |
| <li><input id="accent-accordion1" type="checkbox" /> | |
| <label for="accent-accordion1"><strong>this is item 1</strong></label> | |
| <div class="accord-content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> | |
| </div> | |
| </li> | |
| <li><input id="accent-accordion2" type="checkbox" /> | |
| <label for="accent-accordion2"><strong>this is item 2</strong></label> | |
| <div class="accord-content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> | |
| </div> | |
| </li> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Accordion styles */ | |
| .accordion, .accent-accordion, .square-accordion, .muted-accordion { | |
| width: 100%; | |
| position: relative; | |
| padding-bottom: 0; | |
| } | |
| .accordion li, .accent-accordion li, .square-accordion li, .muted-accordion li { | |
| list-style: none; | |
| margin-left: 0; | |
| } | |
| .accordion li input, .accent-accordion li input, .square-accordion li input, .muted-accordion li input { | |
| display: none; | |
| } | |
| .accordion li label, .accent-accordion li label, .square-accordion li label, .muted-accordion li label { | |
| display: flex; | |
| cursor: pointer; | |
| padding: 0.75rem 2.4rem 0.75rem 0; | |
| margin: 0; | |
| color: white; | |
| background: blue; | |
| border-radius: 4px; | |
| margin-bottom: 3px; | |
| padding-left: 1.1rem; | |
| } | |
| .accordion li label:hover, .accent-accordion li label:hover, .square-accordion li label:hover, .muted-accordion li label:hover { | |
| background: #0000cc; | |
| } | |
| .accordion li .accord-content, .accent-accordion li .accord-content, .square-accordion li .accord-content, .muted-accordion li .accord-content { | |
| display: none; | |
| padding-bottom: 1.2rem; | |
| background: white; | |
| padding-left: 1.1rem; | |
| } | |
| .accordion li input:checked + label, .accent-accordion li input:checked + label, .square-accordion li input:checked + label, .muted-accordion li input:checked + label { | |
| background: #0000cc; | |
| border-bottom-right-radius: 0; | |
| border-bottom-left-radius: 0; | |
| border-top-right-radius: 4px; | |
| border-top-left-radius: 4px; | |
| margin-bottom: 0px; | |
| } | |
| .accordion li input:checked + label + .accord-content, .accent-accordion li input:checked + label + .accord-content, .square-accordion li input:checked + label + .accord-content, .muted-accordion li input:checked + label + .accord-content { | |
| display: block; | |
| border: #0000cc; | |
| color: grey; | |
| border-left: 1px solid #0000cc; | |
| border-right: 1px solid #0000cc; | |
| border-bottom: 1px solid #0000cc; | |
| border-bottom-right-radius: 4px; | |
| border-bottom-left-radius: 4px; | |
| border-top-right-radius: 0; | |
| border-top-left-radius: 0; | |
| margin-bottom: 3px; | |
| } | |
| .accordion li label::before, .accent-accordion li label::before, .square-accordion li label::before, .muted-accordion li label::before { | |
| content: "\276F"; | |
| font-weight: normal; | |
| font-size: 120%; | |
| line-height: 1.1rem; | |
| padding: 0; | |
| position: absolute; | |
| right: 1.1rem; | |
| transition: all 0.20s ease-in-out; | |
| } | |
| .accordion li input:checked + label::before, .accent-accordion li input:checked + label::before, .square-accordion li input:checked + label::before, .muted-accordion li input:checked + label::before { | |
| transform: rotate(90deg); | |
| } | |
| .accent-accordion li label { | |
| background: green; | |
| } | |
| .accent-accordion li label:hover { | |
| background: #004d00; | |
| } | |
| .accent-accordion li input:checked + label { | |
| background: #004d00; | |
| } | |
| .accent-accordion li input:checked + label + .accord-content { | |
| border-left: 1px solid #004d00; | |
| border-right: 1px solid #004d00; | |
| border-bottom: 1px solid #004d00; | |
| } | |
| .square-accordion li label { | |
| border-radius: 0; | |
| } | |
| .square-accordion li input:checked + label { | |
| border-radius: 0; | |
| } | |
| .square-accordion li input:checked + label + .accord-content { | |
| border-radius: 0; | |
| } | |
| .muted-accordion li label { | |
| background: transparent; | |
| border: 1px solid #cdcdcd; | |
| color: #4e4e4e; | |
| } | |
| .muted-accordion li label:hover { | |
| color: #4e4e4e; | |
| border: 1px solid #818181; | |
| background: transparent; | |
| } | |
| .muted-accordion li input:checked + label { | |
| color: #4e4e4e; | |
| border-top: 1px solid #818181; | |
| border-left: 1px solid #818181; | |
| border-right: 1px solid #818181; | |
| border-bottom: 0; | |
| background: transparent; | |
| } | |
| .muted-accordion li input:checked + label + .accord-content { | |
| border: 1px solid #818181; | |
| border-top: 0; | |
| border-left: 1px solid #818181; | |
| border-right: 1px solid #818181; | |
| border-bottom: 1px solid #818181; | |
| background: transparent; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "sass": { | |
| "compiler": "Ruby Sass/3.7.4", | |
| "extensions": {}, | |
| "syntax": "SCSS", | |
| "outputStyle": "expanded" | |
| }, | |
| "autoprefixer": false | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment