Last active
November 6, 2017 20:21
-
-
Save ponciusz/cfb4c743ff5bcdd5aa5cc8de1d658043 to your computer and use it in GitHub Desktop.
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
| /* | |
| Mixin for ACF colored pagebuilder | |
| elements (flexible content field) | |
| --- $name = name of flex content field | |
| --- $color = color? :) | |
| */ | |
| @mixin acfsection($name, $color) { | |
| [data-name="#{$name}"] { | |
| background-color: lighten($color, 20%); | |
| .ui-sortable { | |
| .acf-row-handle { | |
| border-bottom: 3px solid lighten($color, 20%); | |
| border-top: 3px solid lighten($color, 20%); | |
| } | |
| } | |
| } | |
| [data-layout="#{$name}"] { | |
| border-left: 6px solid $color !important; | |
| .acf-row-handle.order { | |
| background-color: $color; | |
| border-bottom: 5px solid darken($color, 20%); | |
| color: black; | |
| } | |
| > .acf-fc-layout-handle { | |
| background-color: $color; | |
| } | |
| @content; | |
| } | |
| } | |
| // Define colors | |
| $acf-color1: #ff8383; | |
| $acf-color2: #f7d4a8; | |
| $acf-color3: #77ce77; | |
| $acf-color4: #e0bfff; | |
| $acf-color5: #cef7a8; | |
| $acf-color6: #f7d4a8; | |
| $acf-color7: #b4fdce; | |
| $acf-color8: #fdb4e0; | |
| $acf-color9: #fdfdb4; | |
| $acf-color10: #b4dffd; | |
| $acf-color11: #d8b3b3; | |
| $acf-color12: #ffc357; | |
| $acf-color13: #bac9dc; | |
| $acf-color14: #d5db9f; | |
| $acf-options: #ffe1e1; | |
| /** | |
| * Use ACF field name as 1st arg and color for second | |
| * Use this in admin Stylesheet | |
| */ | |
| @include acfsection(slider, $acf-color4); | |
| @include acfsection(full_image, $acf-color5); | |
| @include acfsection(generic_content, $acf-color6); | |
| @include acfsection(cta, $acf-color1); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment