Skip to content

Instantly share code, notes, and snippets.

@AndreiShostik

AndreiShostik/SassMeister-input.scss

Last active November 16, 2017 11:55
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save AndreiShostik/b5daf0d00ab2e749adc0034b25d6ceaa to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save AndreiShostik/b5daf0d00ab2e749adc0034b25d6ceaa to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. AndreiShostik revised this gist Nov 16, 2017. 2 changed files with 24 additions and 167 deletions.
    71 changes: 8 additions & 63 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -18,14 +18,14 @@ $status-gray: 'gray';
    margin-right: 10px;
    }

    @mixin py-status-circle {
    .py-status-circle {
    @include py-status-base;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    }

    @mixin py-status-bagel {
    .py-status-bagel {
    @include py-status-base;
    width: 12px;
    height: 12px;
    @@ -34,99 +34,44 @@ $status-gray: 'gray';
    border: 3px solid;
    }

    .py-status-circle-green {
    .py-status-green {

    &:before {
    @include py-status-circle;
    background-color: $status-green;
    }
    }

    .py-status-circle-orange {
    .py-status-orange {

    &:before {
    @include py-status-circle;
    background-color: $status-yellow;
    }
    }

    .py-status-circle-negative {
    .py-status-negative {

    &:before {
    @include py-status-circle;
    background-color: $negative-txt;
    }
    }

    .py-status-circle-blue {
    .py-status-blue {

    &:before {
    @include py-status-circle;
    background-color: $action-blue;
    }
    }

    .py-status-circle-red {
    .py-status-red {

    &:before {
    @include py-status-circle;
    background-color: $status-red;
    }
    }

    .py-status-circle-gray {
    .py-status-gray {

    &:before {
    @include py-status-circle;
    background-color: $status-gray;
    }
    }

    //================classes for Bagle================
    .py-status-bagel-green {

    &:before {
    @include py-status-bagel;
    border-color: $status-green;
    }
    }

    .py-status-bagel-orange {

    &:before {
    @include py-status-bagel;
    border-color: $status-yellow;
    }
    }

    .py-status-bagel-negative {

    &:before {
    @include py-status-bagel;
    border-color: $negative-txt;
    }
    }

    .py-status-bagel-blue {

    &:before {
    @include py-status-bagel;
    border-color: $action-blue;
    }
    }

    .py-status-bagel-red {

    &:before {
    @include py-status-bagel;
    border-color: $status-red;
    }
    }

    .py-status-bagel-gray {

    &:before {
    @include py-status-bagel;
    border-color: $status-gray;
    }
    }
    120 changes: 16 additions & 104 deletions SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,64 +1,13 @@
    .py-status-circle-green:before {
    .py-status-circle {
    content: '';
    display: inline-block;
    margin-right: 10px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: "green";
    }

    .py-status-circle-orange:before {
    content: '';
    display: inline-block;
    margin-right: 10px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: "yellow";
    }

    .py-status-circle-negative:before {
    content: '';
    display: inline-block;
    margin-right: 10px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: "negative";
    }

    .py-status-circle-blue:before {
    content: '';
    display: inline-block;
    margin-right: 10px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: "blue";
    }

    .py-status-circle-red:before {
    content: '';
    display: inline-block;
    margin-right: 10px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: "red";
    }

    .py-status-circle-gray:before {
    content: '';
    display: inline-block;
    margin-right: 10px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: "gray";
    }

    .py-status-bagel-green:before {
    .py-status-bagel {
    content: '';
    display: inline-block;
    margin-right: 10px;
    @@ -67,65 +16,28 @@
    margin-bottom: -1px;
    border-radius: 6px;
    border: 3px solid;
    border-color: "green";
    }

    .py-status-bagel-orange:before {
    content: '';
    display: inline-block;
    margin-right: 10px;
    width: 12px;
    height: 12px;
    margin-bottom: -1px;
    border-radius: 6px;
    border: 3px solid;
    border-color: "yellow";
    .py-status-green:before {
    background-color: "green";
    }

    .py-status-bagel-negative:before {
    content: '';
    display: inline-block;
    margin-right: 10px;
    width: 12px;
    height: 12px;
    margin-bottom: -1px;
    border-radius: 6px;
    border: 3px solid;
    border-color: "negative";
    .py-status-orange:before {
    background-color: "yellow";
    }

    .py-status-bagel-blue:before {
    content: '';
    display: inline-block;
    margin-right: 10px;
    width: 12px;
    height: 12px;
    margin-bottom: -1px;
    border-radius: 6px;
    border: 3px solid;
    border-color: "blue";
    .py-status-negative:before {
    background-color: "negative";
    }

    .py-status-bagel-red:before {
    content: '';
    display: inline-block;
    margin-right: 10px;
    width: 12px;
    height: 12px;
    margin-bottom: -1px;
    border-radius: 6px;
    border: 3px solid;
    border-color: "red";
    .py-status-blue:before {
    background-color: "blue";
    }

    .py-status-bagel-gray:before {
    content: '';
    display: inline-block;
    margin-right: 10px;
    width: 12px;
    height: 12px;
    margin-bottom: -1px;
    border-radius: 6px;
    border: 3px solid;
    border-color: "gray";
    .py-status-red:before {
    background-color: "red";
    }

    .py-status-gray:before {
    background-color: "gray";
    }
  2. AndreiShostik created this gist Nov 16, 2017.
    132 changes: 132 additions & 0 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,132 @@
    // ----
    // Sass (v3.4.21)
    // Compass (v1.0.3)
    // ----

    $status-green: 'green';
    $status-yellow: 'yellow';
    $negative-txt: 'negative';
    $action-blue: 'blue';
    $status-red: 'red';
    $status-gray: 'gray';



    @mixin py-status-base {
    content: '';
    display: inline-block;
    margin-right: 10px;
    }

    @mixin py-status-circle {
    @include py-status-base;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    }

    @mixin py-status-bagel {
    @include py-status-base;
    width: 12px;
    height: 12px;
    margin-bottom: -1px;
    border-radius: 6px;
    border: 3px solid;
    }

    .py-status-circle-green {

    &:before {
    @include py-status-circle;
    background-color: $status-green;
    }
    }

    .py-status-circle-orange {

    &:before {
    @include py-status-circle;
    background-color: $status-yellow;
    }
    }

    .py-status-circle-negative {

    &:before {
    @include py-status-circle;
    background-color: $negative-txt;
    }
    }

    .py-status-circle-blue {

    &:before {
    @include py-status-circle;
    background-color: $action-blue;
    }
    }

    .py-status-circle-red {

    &:before {
    @include py-status-circle;
    background-color: $status-red;
    }
    }

    .py-status-circle-gray {

    &:before {
    @include py-status-circle;
    background-color: $status-gray;
    }
    }

    //================classes for Bagle================
    .py-status-bagel-green {

    &:before {
    @include py-status-bagel;
    border-color: $status-green;
    }
    }

    .py-status-bagel-orange {

    &:before {
    @include py-status-bagel;
    border-color: $status-yellow;
    }
    }

    .py-status-bagel-negative {

    &:before {
    @include py-status-bagel;
    border-color: $negative-txt;
    }
    }

    .py-status-bagel-blue {

    &:before {
    @include py-status-bagel;
    border-color: $action-blue;
    }
    }

    .py-status-bagel-red {

    &:before {
    @include py-status-bagel;
    border-color: $status-red;
    }
    }

    .py-status-bagel-gray {

    &:before {
    @include py-status-bagel;
    border-color: $status-gray;
    }
    }
    131 changes: 131 additions & 0 deletions SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,131 @@
    .py-status-circle-green:before {
    content: '';
    display: inline-block;
    margin-right: 10px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: "green";
    }

    .py-status-circle-orange:before {
    content: '';
    display: inline-block;
    margin-right: 10px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: "yellow";
    }

    .py-status-circle-negative:before {
    content: '';
    display: inline-block;
    margin-right: 10px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: "negative";
    }

    .py-status-circle-blue:before {
    content: '';
    display: inline-block;
    margin-right: 10px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: "blue";
    }

    .py-status-circle-red:before {
    content: '';
    display: inline-block;
    margin-right: 10px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: "red";
    }

    .py-status-circle-gray:before {
    content: '';
    display: inline-block;
    margin-right: 10px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: "gray";
    }

    .py-status-bagel-green:before {
    content: '';
    display: inline-block;
    margin-right: 10px;
    width: 12px;
    height: 12px;
    margin-bottom: -1px;
    border-radius: 6px;
    border: 3px solid;
    border-color: "green";
    }

    .py-status-bagel-orange:before {
    content: '';
    display: inline-block;
    margin-right: 10px;
    width: 12px;
    height: 12px;
    margin-bottom: -1px;
    border-radius: 6px;
    border: 3px solid;
    border-color: "yellow";
    }

    .py-status-bagel-negative:before {
    content: '';
    display: inline-block;
    margin-right: 10px;
    width: 12px;
    height: 12px;
    margin-bottom: -1px;
    border-radius: 6px;
    border: 3px solid;
    border-color: "negative";
    }

    .py-status-bagel-blue:before {
    content: '';
    display: inline-block;
    margin-right: 10px;
    width: 12px;
    height: 12px;
    margin-bottom: -1px;
    border-radius: 6px;
    border: 3px solid;
    border-color: "blue";
    }

    .py-status-bagel-red:before {
    content: '';
    display: inline-block;
    margin-right: 10px;
    width: 12px;
    height: 12px;
    margin-bottom: -1px;
    border-radius: 6px;
    border: 3px solid;
    border-color: "red";
    }

    .py-status-bagel-gray:before {
    content: '';
    display: inline-block;
    margin-right: 10px;
    width: 12px;
    height: 12px;
    margin-bottom: -1px;
    border-radius: 6px;
    border: 3px solid;
    border-color: "gray";
    }