Skip to content

Instantly share code, notes, and snippets.

@ghuger

ghuger/SassMeister-input.scss

Created October 29, 2015 19:43
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ghuger/8f0d76d88813e8bd84ad to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ghuger/8f0d76d88813e8bd84ad to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. ghuger created this gist Oct 29, 2015.
    51 changes: 51 additions & 0 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,51 @@
    // ----
    // libsass (v3.2.5)
    // ----

    $color: 'pink';
    $start: #c2185b;
    $dark: desaturate(darken($start, 10), 20);
    $TITLE_LIGHT: mix($start, white, 80);
    $TITLE_DARK: $dark;
    $BEFORE_LIGHT: darken($start, 5);
    $BEFORE_DARK: mix($dark, mix($start, black, 10));

    /* bullet - #{$color} */
    .easy-faqs-theme-bullet-#{$color} .easy-faq-title {
    background-color: $TITLE_LIGHT;
    background-position: 0 -170px;
    text-shadow: 1px 1px mix($start, black, 75);
    }

    .easy-faqs-theme-bullet-#{$color} .easy-faq-title .easy-faqs-title-before {
    background-color: $BEFORE_LIGHT;
    border-right: 1px solid $TITLE_LIGHT;
    }


    .easy-faqs-theme-bullet-#{$color} .easy-faq-title.ui-accordion-header-active {
    background-color: $TITLE_DARK;
    background-position: 0 -213px;
    text-shadow: 1px 1px mix($dark, black, 75);
    }

    .easy-faqs-theme-bullet-#{$color} .easy-faq-title.ui-accordion-header-active .easy-faqs-title-before {
    background-color: $BEFORE_DARK;
    border-right-color: $TITLE_DARK;
    }

    .easy-faqs-theme-bullet-#{$color} .easy-faq-title .easy-faqs-title-text {
    border-left: 1px solid $BEFORE_LIGHT;
    }

    .easy-faqs-theme-bullet-#{$color} .easy-faq-title.ui-accordion-header-active .easy-faqs-title-text {
    border-left-color: $BEFORE_DARK;
    }

    .easy-faqs-theme-bullet-#{$color} .easy-faq-body {
    border: 1px solid $BEFORE_DARK;
    }

    .easy-faqs-theme-bullet-#{$color} .easy-faq-body.ui-accordion-content-active {
    border: 1px solid $TITLE_DARK;
    }
    38 changes: 38 additions & 0 deletions SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,38 @@
    /* bullet - pink */
    .easy-faqs-theme-bullet-pink .easy-faq-title {
    background-color: #ce467c;
    background-position: 0 -170px;
    text-shadow: 1px 1px #921244;
    }

    .easy-faqs-theme-bullet-pink .easy-faq-title .easy-faqs-title-before {
    background-color: #ab1550;
    border-right: 1px solid #ce467c;
    }

    .easy-faqs-theme-bullet-pink .easy-faq-title.ui-accordion-header-active {
    background-color: #842349;
    background-position: 0 -213px;
    text-shadow: 1px 1px #631a37;
    }

    .easy-faqs-theme-bullet-pink .easy-faq-title.ui-accordion-header-active .easy-faqs-title-before {
    background-color: #4b1329;
    border-right-color: #842349;
    }

    .easy-faqs-theme-bullet-pink .easy-faq-title .easy-faqs-title-text {
    border-left: 1px solid #ab1550;
    }

    .easy-faqs-theme-bullet-pink .easy-faq-title.ui-accordion-header-active .easy-faqs-title-text {
    border-left-color: #4b1329;
    }

    .easy-faqs-theme-bullet-pink .easy-faq-body {
    border: 1px solid #4b1329;
    }

    .easy-faqs-theme-bullet-pink .easy-faq-body.ui-accordion-content-active {
    border: 1px solid #842349;
    }