From fa8b0ba7b6909b3c846d612992d19eaccb635433 Mon Sep 17 00:00:00 2001 From: James Croft Date: Sat, 5 Feb 2022 20:37:01 +0000 Subject: [PATCH 1/5] Added application color variable support --- made-vue-accordion/public/scss/_variables.scss | 2 ++ .../public/scss/made-vue-accordion.scss | 15 ++++++++------- made-vue-accordion/src/components/MAccordion.vue | 2 +- .../src/components/MAccordionItem.vue | 6 +++--- 4 files changed, 14 insertions(+), 11 deletions(-) create mode 100644 made-vue-accordion/public/scss/_variables.scss diff --git a/made-vue-accordion/public/scss/_variables.scss b/made-vue-accordion/public/scss/_variables.scss new file mode 100644 index 0000000..bae85ca --- /dev/null +++ b/made-vue-accordion/public/scss/_variables.scss @@ -0,0 +1,2 @@ +$primary: #2c77cc; +$secondary: #cc812c; \ No newline at end of file diff --git a/made-vue-accordion/public/scss/made-vue-accordion.scss b/made-vue-accordion/public/scss/made-vue-accordion.scss index 9ffcb86..206dde7 100644 --- a/made-vue-accordion/public/scss/made-vue-accordion.scss +++ b/made-vue-accordion/public/scss/made-vue-accordion.scss @@ -1,6 +1,7 @@ +@import './variables'; @import './functions'; -$accordion-active-color: #2c77cc; +$accordion-active-color: $primary; $accordion-item-border-color: rgba(200,200,200,.8); $accordion-item-border: 1px solid $accordion-item-border-color; @@ -18,21 +19,21 @@ $accordion-header-icon-size: 1.25rem; $accordion-header-border-focus: $accordion-header-color-active; $accordion-header-box-shadow-focus: 0 0 0 0.25rem rgba($accordion-active-color,.25); -.accordion { +.made-accordion { list-style: none; padding: 0; margin: 0; } -.accordion-item { +.made-accordion-item { border: $accordion-item-border; &:not(:first-of-type) { border-top: 0; } - &.accordion-item-active { - .accordion-item-header { + &.made-accordion-item-active { + .made-accordion-item-header { background: $accordion-header-background-active; color: $accordion-header-color-active; border-bottom: $accordion-item-border; @@ -44,7 +45,7 @@ $accordion-header-box-shadow-focus: 0 0 0 0.25rem rgba($accordion-active-color,. } } -.accordion-item-header { +.made-accordion-item-header { padding: $accordion-header-padding; border: none; width: 100%; @@ -74,7 +75,7 @@ $accordion-header-box-shadow-focus: 0 0 0 0.25rem rgba($accordion-active-color,. } } -.accordion-item-content { +.made-accordion-item-content { width: 100%; transition: max-height .3s ease-out; overflow: hidden; diff --git a/made-vue-accordion/src/components/MAccordion.vue b/made-vue-accordion/src/components/MAccordion.vue index 9c75662..7d519dc 100644 --- a/made-vue-accordion/src/components/MAccordion.vue +++ b/made-vue-accordion/src/components/MAccordion.vue @@ -1,5 +1,5 @@ diff --git a/made-vue-accordion/src/components/MAccordionItem.vue b/made-vue-accordion/src/components/MAccordionItem.vue index 1f204cb..e922c2f 100644 --- a/made-vue-accordion/src/components/MAccordionItem.vue +++ b/made-vue-accordion/src/components/MAccordionItem.vue @@ -1,7 +1,7 @@