Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                #container
  form
    input( type="reset" id="reset-btn" )
    label( for="reset-btn" ) リセット
    - var n = 1;
    while n <= 400
      input( type="checkbox" id=`rogic-checkbox-${n}` )
      label( for=`rogic-checkbox-${n++}` )
    .rogic-inner
      - var d = 1;
      while d < 442
        case d
          when 2
            div(class=`rogic-${d++}`)
              span 5
              span 4
          when 3
             div(class=`rogic-${d++}`)
              span 3
              span 6
          when 4
            div(class=`rogic-${d++}`)
              span 2
              span 7
          when 5
            div(class=`rogic-${d++}`)
              span 2
              span 8
          when 6
            div(class=`rogic-${d++}`)
              span 2
              span 10
          when 7
            div(class=`rogic-${d++}`)
              span 2
              span 7
          when 8
            div(class=`rogic-${d++}`)
              span 2
              span 1
              span 5
          when 9
            div(class=`rogic-${d++}`)
              span 1
              span 1
              span 4
          when 10
            div(class=`rogic-${d++}`)
              span 1
              span 4
              span 1
          when 11
            div(class=`rogic-${d++}`)
              span 1
              span 2
              span 1
          when 12
            div(class=`rogic-${d++}`)
              span 1
              span 3
              span 1
          when 13
            div(class=`rogic-${d++}`)
              span 1
              span 2
              span 2
          when 14
            div(class=`rogic-${d++}`)
              span 1
              span 4
              span 3
          when 15
            div(class=`rogic-${d++}`)
              span 1
              span 1
              span 3                 
          when 16
            div(class=`rogic-${d++}`)
              span 2
              span 1
              span 4
          when 17
            div(class=`rogic-${d++}`)
              span 1
              span 3
              span 5
          when 18
            div(class=`rogic-${d++}`)
              span 1
              span 6
          when 19
            div(class=`rogic-${d++}`)
              span 2
              span 8
          when 20
            div(class=`rogic-${d++}`)
              span 4
              span 4
              span 5
          when 21
            div(class=`rogic-${d++}`)
              span 6
              span 3
          when 22
            div(class=`rogic-${d++}`)
              span 8
              span 3
          when 43
            div(class=`rogic-${d++}`)
              span 2
              span 1
              span 2
          when 64
            div(class=`rogic-${d++}`)
              span 2
              span 1
              span 1
          when 85
            div(class=`rogic-${d++}`)
              span 2
              span 1
              span 1
              span 1
              span 1
          when 106
            div(class=`rogic-${d++}`)
              span 2
              span 1
              span 1
              span 1
              span 2
          when 127
            div(class=`rogic-${d++}`)
              span 2
              span 1
              span 1
              span 1
              span 1
          when 148
            div(class=`rogic-${d++}`)
              span 1
              span 1
              span 1
              span 1
          when 169
            div(class=`rogic-${d++}`)
              span 2
              span 1
          when 190
            div(class=`rogic-${d++}`)
              span 1
              span 2
              span 2
              span 1
          when 211
            div(class=`rogic-${d++}`)
              span 1
              span 3
              span 2
          when 232
            div(class=`rogic-${d++}`)
              span 1
              span 1
              span 3
              span 1
          when 253
            div(class=`rogic-${d++}`)
              span 1
              span 1
              span 1
              span 1
          when 274
            div(class=`rogic-${d++}`)
              span 4
              span 2
          when 295
            div(class=`rogic-${d++}`)
              span 6
              span 1
          when 316
            div(class=`rogic-${d++}`)
              span 6
              span 2
          when 337
            div(class=`rogic-${d++}`)
              span 7
              span 4
          when 358
            div(class=`rogic-${d++}`)
              span 8
              span 6
          when 379
            div(class=`rogic-${d++}`)
              span 7
              span 8
          when 400
            div(class=`rogic-${d++}`)
              span 18
          when 421
            div(class=`rogic-${d++}`)
              span 5
              span 8
          default
            div(class=`rogic-${d++}`)
              
            
!

CSS

              
                /* foundation */
$white:       #ffffff;
$lightgray:   #dddddd;
$black:       #000000;
$gray:        #cccccc;
$lightblue:   #86F2FE;
$pink:        #FEB8DD;
$pink_two:    #FE7F9C;
$pink_three:  #CE4648;
$pink_four:   #E36187;
$pink_five:   #890634;
$fs-min: 1;
$fs-max: 422;
$line-min: 1;
$line-max: 441;
$row: 22, 43, 64, 85, 106, 127, 148, 169, 190, 211, 232, 253, 274, 295, 316, 337, 358, 379, 400, 421;
$numbers: 200px;
$row_white :115, 119;
$row_lightblue :23, 24, 25, 26, 27, 28, 37, 41, 42, 44, 45, 46, 47, 48, 84, 63, 65, 66, 67, 68, 84, 86, 87, 88, 105, 107, 108, 128, 149, 252, 273, 275, 294, 314, 315, 335, 336, 357, 380, 401, 402, 422, 423, 424, 430, 431, 432, 441;
$row_pink :51, 52, 53, 54, 55, 56, 57, 59, 60, 71, 72, 73, 74, 75, 76, 77, 78, 80, 81, 82, 91, 92, 93, 95, 96, 97, 99, 100, 102, 103, 111, 112, 113, 114, 116, 117, 118, 120, 121, 123, 124, 131, 132, 133, 134, 135, 137, 138, 139, 141, 142, 144, 145, 146, 151, 152, 153, 154, 155, 156, 158, 159, 160, 162, 163, 164, 165, 166, 167, 172, 173, 174, 175, 176, 177, 178, 179, 180, 181, 182, 183, 184, 185, 186, 187, 188, 192, 193, 194, 195, 196, 199, 200, 201, 202, 203, 206, 207, 208, 209, 213, 214, 215, 216, 217, 218, 219, 220, 224, 225, 226, 227, 228, 229, 234, 235, 236, 238, 239, 240, 241, 245, 246, 247, 248, 249, 250, 255, 256, 257, 259, 260, 261, 262, 263, 265, 266, 267, 268, 269, 270, 271, 280, 281, 282, 283, 284, 285, 286, 287, 288, 289, 290, 291, 302, 303, 304, 305, 306, 307, 308, 309, 310, 311, 312, 323, 324, 325, 326, 327, 328, 329, 330, 331, 332, 345, 346, 347, 348, 349, 350, 351, 352, 367, 368, 369, 370, 371, 372, 388, 389, 390, 391;
$row_pink_two :197, 198, 204, 205;
$row_pink_three :297, 298, 299, 300, 318, 319, 320, 321, 339, 340, 341, 342, 343, 354, 355, 360, 361, 362, 363, 364, 365, 374, 375, 376, 382, 383, 384, 385, 386, 395, 396, 397, 398, 404, 405, 406, 407, 414, 415, 416, 417, 418, 419;
$row_pink_four :242, 243, 244, 264;
$row_pink_five :221, 222, 223;

/* reset */
div, input, label span {
  font-family: "Open Sans", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
}
input {
  display: none;
  &:checked + label {
    background: $black;
    border: 1px solid $white;
  }
  &[type="reset"] {
    + label {
      position: fixed;
      top: 10px;
      left: 0;
      width: auto;
      padding: 5px 10px;
      height: auto;
      background: $white;
      box-shadow: 0 0 0 1px $gray, 1px 1px 0 0 $gray, 2px 2px 0 0 $gray, 3px 3px 0 0 $gray, 4px 4px 0 0 $gray;
      transition: all .2s ease;
      z-index: 10;
      &:hover {
        background: $black;
        color: $white;
        transition: all .2s ease;
      }
    }
  }
}
label {
  position: absolute;
  width: 25px;
  height: 25px;
  cursor: pointer;
  &:hover {
    transition: all .2s ease;
    box-shadow: inset 1px 1px 1px 1px $lightgray;
  }
  @for $i from $fs-min through $fs-max {
    $left: 0;
    @if $i % 20 == 0 {
      $left: 475px + $numbers;
    }
    @for $li from 1 through 19 {
      @if $i % 20 == $li {
        $left: $numbers + ( 25 * ( $li - 1) );
      }
    }
    @for $top from 0 through 19 {
      @if $i >= 1 + ($top * 20 ) and $i <= 20 + ($top * 20 ) {
        &[for=rogic-checkbox-#{$i}] {
          top: $numbers + ( 25 * $top );
          left: $left;
        }
      }
    }
  }
}

#container {
  position: absolute;
  width: 500px + $numbers;
  height: 500px + $numbers;
  top: 0%;
  left: 0%;
  margin: 10px;
  form {
    overflow: scroll;
  }
  .rogic-inner {
    box-shadow:
    inset 0 0 0 1px $black, inset 1px 1px 0 1px $black;
    transition: all .2s ease;
    display: grid;
    grid-template-rows: $numbers repeat( 20, 25px );
         -ms-grid-rows: $numbers repeat( 20, 25px );
    grid-template-columns: $numbers repeat( 20, 25px );
         -ms-grid-columns: $numbers repeat( 20, 25px );   
    div[class*='rogic-'] {
      transition: all .2s ease;
      box-shadow: inset 1px 1px 0 0 $gray;
      display: flex;
      flex-wrap: wrap;
      align-items: flex-end;
      align-content: flex-end;
      span {
        text-align: center;
        width: 100%;
        display: block;
        padding: 0 5px;
      }
    }
    div[class*='rogic-']:nth-child(-n+21) span{
      letter-spacing: -.2rem;
      text-indent: -.2rem;
    }
    @for $i from $line-min through $line-max {
      @if ($i >= 22 and $i <= 42) or ($i >= 127 and $i <= 147) or ($i >= 232 and $i <= 252) or ($i >= 337 and $i <= 357) {
          @if $i % 21 == 7 or $i % 21 == 12 or $i % 21 == 17 {
            div.rogic-#{$i} {
              box-shadow: inset 1px 0 0 0 $black, inset 0 1px 0 0 $black;
            }
          } @else {
            div.rogic-#{$i} {
              box-shadow: inset 0 1px 0 0 $black, inset 1px 0 0 0 $gray;
            }
          }
      } @else {
        @if $i % 21 == 7 or $i % 21 == 12 or $i % 21 == 17 {
          div.rogic-#{$i} {
            box-shadow: inset 1px 0 0 0 $black, inset 0 1px 0 0 $gray;
          }
        }
      }
    }
    @each $rows in $row {
      div.rogic-#{$rows} {
        align-content: center;
        justify-content: flex-end;
        align-items: center;
        span {
          width: auto;
        }
      }
    }
  }
  .clear_comment {
    z-index: -1;
    opacity: 0;
    position: absolute;
    transition: opacity .2s ease;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    font-size: 40px;
    font-weight: bold;
    color: $white;
    text-shadow: 0 0 1px $white;
  }
  input[id="rogic-checkbox-1"]:not(:checked) ~
  input[id="rogic-checkbox-2"]:not(:checked) ~
  input[id="rogic-checkbox-3"]:not(:checked) ~
  input[id="rogic-checkbox-4"]:not(:checked) ~
  input[id="rogic-checkbox-5"]:not(:checked) ~
  input[id="rogic-checkbox-6"]:not(:checked) ~
  input[id="rogic-checkbox-7"]:checked ~
  input[id="rogic-checkbox-8"]:checked ~
  input[id="rogic-checkbox-9"]:checked ~
  input[id="rogic-checkbox-10"]:checked ~
  input[id="rogic-checkbox-11"]:checked ~
  input[id="rogic-checkbox-12"]:checked ~
  input[id="rogic-checkbox-13"]:checked ~
  input[id="rogic-checkbox-14"]:checked ~
  input[id="rogic-checkbox-15"]:not(:checked) ~
  input[id="rogic-checkbox-16"]:checked ~
  input[id="rogic-checkbox-17"]:checked ~
  input[id="rogic-checkbox-18"]:checked ~
  input[id="rogic-checkbox-19"]:not(:checked) ~
  input[id="rogic-checkbox-20"]:not(:checked) ~
  input[id="rogic-checkbox-21"]:not(:checked) ~
  input[id="rogic-checkbox-22"]:not(:checked) ~
  input[id="rogic-checkbox-23"]:not(:checked) ~
  input[id="rogic-checkbox-24"]:not(:checked) ~
  input[id="rogic-checkbox-25"]:not(:checked) ~
  input[id="rogic-checkbox-26"]:checked ~
  input[id="rogic-checkbox-27"]:checked ~
  input[id="rogic-checkbox-28"]:not(:checked) ~
  input[id="rogic-checkbox-29"]:not(:checked) ~
  input[id="rogic-checkbox-30"]:not(:checked) ~
  input[id="rogic-checkbox-31"]:not(:checked) ~
  input[id="rogic-checkbox-32"]:not(:checked) ~
  input[id="rogic-checkbox-33"]:not(:checked) ~
  input[id="rogic-checkbox-34"]:not(:checked) ~
  input[id="rogic-checkbox-35"]:checked ~
  input[id="rogic-checkbox-36"]:not(:checked) ~
  input[id="rogic-checkbox-37"]:not(:checked) ~
  input[id="rogic-checkbox-38"]:checked ~
  input[id="rogic-checkbox-39"]:checked ~
  input[id="rogic-checkbox-40"]:not(:checked) ~
  input[id="rogic-checkbox-41"]:not(:checked) ~
  input[id="rogic-checkbox-42"]:not(:checked) ~
  input[id="rogic-checkbox-43"]:not(:checked) ~
  input[id="rogic-checkbox-44"]:not(:checked) ~
  input[id="rogic-checkbox-45"]:checked ~
  input[id="rogic-checkbox-46"]:checked ~
  input[id="rogic-checkbox-47"]:not(:checked) ~
  input[id="rogic-checkbox-48"]:not(:checked) ~
  input[id="rogic-checkbox-49"]:not(:checked) ~
  input[id="rogic-checkbox-50"]:not(:checked) ~
  input[id="rogic-checkbox-51"]:not(:checked) ~
  input[id="rogic-checkbox-52"]:not(:checked) ~
  input[id="rogic-checkbox-53"]:not(:checked) ~
  input[id="rogic-checkbox-54"]:not(:checked) ~
  input[id="rogic-checkbox-55"]:checked ~
  input[id="rogic-checkbox-56"]:not(:checked) ~
  input[id="rogic-checkbox-57"]:not(:checked) ~
  input[id="rogic-checkbox-58"]:not(:checked) ~
  input[id="rogic-checkbox-59"]:checked ~
  input[id="rogic-checkbox-60"]:not(:checked) ~
  input[id="rogic-checkbox-61"]:not(:checked) ~
  input[id="rogic-checkbox-62"]:not(:checked) ~
  input[id="rogic-checkbox-63"]:not(:checked) ~
  input[id="rogic-checkbox-64"]:checked ~
  input[id="rogic-checkbox-65"]:checked ~
  input[id="rogic-checkbox-66"]:not(:checked) ~
  input[id="rogic-checkbox-67"]:not(:checked) ~
  input[id="rogic-checkbox-68"]:not(:checked) ~
  input[id="rogic-checkbox-69"]:checked ~
  input[id="rogic-checkbox-70"]:not(:checked) ~
  input[id="rogic-checkbox-71"]:not(:checked) ~
  input[id="rogic-checkbox-72"]:not(:checked) ~
  input[id="rogic-checkbox-73"]:checked ~
  input[id="rogic-checkbox-74"]:not(:checked) ~
  input[id="rogic-checkbox-75"]:not(:checked) ~
  input[id="rogic-checkbox-76"]:checked ~
  input[id="rogic-checkbox-77"]:not(:checked) ~
  input[id="rogic-checkbox-78"]:not(:checked) ~
  input[id="rogic-checkbox-79"]:checked ~
  input[id="rogic-checkbox-80"]:not(:checked) ~
  input[id="rogic-checkbox-81"]:not(:checked) ~
  input[id="rogic-checkbox-82"]:not(:checked) ~
  input[id="rogic-checkbox-83"]:checked ~
  input[id="rogic-checkbox-84"]:checked ~
  input[id="rogic-checkbox-85"]:not(:checked) ~
  input[id="rogic-checkbox-86"]:not(:checked) ~
  input[id="rogic-checkbox-87"]:not(:checked) ~
  input[id="rogic-checkbox-88"]:not(:checked) ~
  input[id="rogic-checkbox-89"]:checked ~
  input[id="rogic-checkbox-90"]:not(:checked) ~
  input[id="rogic-checkbox-91"]:not(:checked) ~
  input[id="rogic-checkbox-92"]:not(:checked) ~
  input[id="rogic-checkbox-93"]:checked ~
  input[id="rogic-checkbox-94"]:not(:checked) ~
  input[id="rogic-checkbox-95"]:not(:checked) ~
  input[id="rogic-checkbox-96"]:checked ~
  input[id="rogic-checkbox-97"]:not(:checked) ~
  input[id="rogic-checkbox-98"]:not(:checked) ~
  input[id="rogic-checkbox-99"]:checked ~
  input[id="rogic-checkbox-100"]:checked ~
  input[id="rogic-checkbox-101"]:not(:checked) ~
  input[id="rogic-checkbox-102"]:checked ~
  input[id="rogic-checkbox-103"]:checked ~
  input[id="rogic-checkbox-104"]:not(:checked) ~
  input[id="rogic-checkbox-105"]:not(:checked) ~
  input[id="rogic-checkbox-106"]:not(:checked) ~
  input[id="rogic-checkbox-107"]:not(:checked) ~
  input[id="rogic-checkbox-108"]:not(:checked) ~
  input[id="rogic-checkbox-109"]:checked ~
  input[id="rogic-checkbox-110"]:not(:checked) ~
  input[id="rogic-checkbox-111"]:not(:checked) ~
  input[id="rogic-checkbox-112"]:not(:checked) ~
  input[id="rogic-checkbox-113"]:checked ~
  input[id="rogic-checkbox-114"]:not(:checked) ~
  input[id="rogic-checkbox-115"]:not(:checked) ~
  input[id="rogic-checkbox-116"]:checked ~
  input[id="rogic-checkbox-117"]:not(:checked) ~
  input[id="rogic-checkbox-118"]:not(:checked) ~
  input[id="rogic-checkbox-119"]:not(:checked) ~
  input[id="rogic-checkbox-120"]:checked ~
  input[id="rogic-checkbox-121"]:not(:checked) ~
  input[id="rogic-checkbox-122"]:checked ~
  input[id="rogic-checkbox-123"]:not(:checked) ~
  input[id="rogic-checkbox-124"]:not(:checked) ~
  input[id="rogic-checkbox-125"]:not(:checked) ~
  input[id="rogic-checkbox-126"]:not(:checked) ~
  input[id="rogic-checkbox-127"]:not(:checked) ~
  input[id="rogic-checkbox-128"]:not(:checked) ~
  input[id="rogic-checkbox-129"]:checked ~
  input[id="rogic-checkbox-130"]:not(:checked) ~
  input[id="rogic-checkbox-131"]:not(:checked) ~
  input[id="rogic-checkbox-132"]:not(:checked) ~
  input[id="rogic-checkbox-133"]:checked ~
  input[id="rogic-checkbox-134"]:not(:checked) ~
  input[id="rogic-checkbox-135"]:not(:checked) ~
  input[id="rogic-checkbox-136"]:not(:checked) ~
  input[id="rogic-checkbox-137"]:not(:checked) ~
  input[id="rogic-checkbox-138"]:not(:checked) ~
  input[id="rogic-checkbox-139"]:not(:checked) ~
  input[id="rogic-checkbox-140"]:checked ~
  input[id="rogic-checkbox-141"]:checked ~
  input[id="rogic-checkbox-142"]:checked ~
  input[id="rogic-checkbox-143"]:not(:checked) ~
  input[id="rogic-checkbox-144"]:not(:checked) ~
  input[id="rogic-checkbox-145"]:not(:checked) ~
  input[id="rogic-checkbox-146"]:not(:checked) ~
  input[id="rogic-checkbox-147"]:not(:checked) ~
  input[id="rogic-checkbox-148"]:not(:checked) ~
  input[id="rogic-checkbox-149"]:not(:checked) ~
  input[id="rogic-checkbox-150"]:not(:checked) ~
  input[id="rogic-checkbox-151"]:not(:checked) ~
  input[id="rogic-checkbox-152"]:not(:checked) ~
  input[id="rogic-checkbox-153"]:not(:checked) ~
  input[id="rogic-checkbox-154"]:not(:checked) ~
  input[id="rogic-checkbox-155"]:not(:checked) ~
  input[id="rogic-checkbox-156"]:not(:checked) ~
  input[id="rogic-checkbox-157"]:not(:checked) ~
  input[id="rogic-checkbox-158"]:not(:checked) ~
  input[id="rogic-checkbox-159"]:not(:checked) ~
  input[id="rogic-checkbox-160"]:checked ~
  input[id="rogic-checkbox-161"]:checked ~
  input[id="rogic-checkbox-162"]:not(:checked) ~
  input[id="rogic-checkbox-163"]:not(:checked) ~
  input[id="rogic-checkbox-164"]:not(:checked) ~
  input[id="rogic-checkbox-165"]:not(:checked) ~
  input[id="rogic-checkbox-166"]:not(:checked) ~
  input[id="rogic-checkbox-167"]:checked ~
  input[id="rogic-checkbox-168"]:checked ~
  input[id="rogic-checkbox-169"]:not(:checked) ~
  input[id="rogic-checkbox-170"]:not(:checked) ~
  input[id="rogic-checkbox-171"]:not(:checked) ~
  input[id="rogic-checkbox-172"]:not(:checked) ~
  input[id="rogic-checkbox-173"]:not(:checked) ~
  input[id="rogic-checkbox-174"]:checked ~
  input[id="rogic-checkbox-175"]:checked ~
  input[id="rogic-checkbox-176"]:not(:checked) ~
  input[id="rogic-checkbox-177"]:not(:checked) ~
  input[id="rogic-checkbox-178"]:not(:checked) ~
  input[id="rogic-checkbox-179"]:not(:checked) ~
  input[id="rogic-checkbox-180"]:checked ~
  input[id="rogic-checkbox-181"]:checked ~
  input[id="rogic-checkbox-182"]:not(:checked) ~
  input[id="rogic-checkbox-183"]:not(:checked) ~
  input[id="rogic-checkbox-184"]:not(:checked) ~
  input[id="rogic-checkbox-185"]:not(:checked) ~
  input[id="rogic-checkbox-186"]:not(:checked) ~
  input[id="rogic-checkbox-187"]:not(:checked) ~
  input[id="rogic-checkbox-188"]:not(:checked) ~
  input[id="rogic-checkbox-189"]:not(:checked) ~
  input[id="rogic-checkbox-190"]:checked ~
  input[id="rogic-checkbox-191"]:checked ~
  input[id="rogic-checkbox-192"]:checked ~
  input[id="rogic-checkbox-193"]:not(:checked) ~
  input[id="rogic-checkbox-194"]:not(:checked) ~
  input[id="rogic-checkbox-195"]:not(:checked) ~
  input[id="rogic-checkbox-196"]:not(:checked) ~
  input[id="rogic-checkbox-197"]:not(:checked) ~
  input[id="rogic-checkbox-198"]:not(:checked) ~
  input[id="rogic-checkbox-199"]:checked ~
  input[id="rogic-checkbox-200"]:checked ~
  input[id="rogic-checkbox-201"]:checked ~
  input[id="rogic-checkbox-202"]:not(:checked) ~
  input[id="rogic-checkbox-203"]:not(:checked) ~
  input[id="rogic-checkbox-204"]:not(:checked) ~
  input[id="rogic-checkbox-205"]:checked ~
  input[id="rogic-checkbox-206"]:not(:checked) ~
  input[id="rogic-checkbox-207"]:not(:checked) ~
  input[id="rogic-checkbox-208"]:not(:checked) ~
  input[id="rogic-checkbox-209"]:not(:checked) ~
  input[id="rogic-checkbox-210"]:checked ~
  input[id="rogic-checkbox-211"]:checked ~
  input[id="rogic-checkbox-212"]:checked ~
  input[id="rogic-checkbox-213"]:not(:checked) ~
  input[id="rogic-checkbox-214"]:not(:checked) ~
  input[id="rogic-checkbox-215"]:not(:checked) ~
  input[id="rogic-checkbox-216"]:not(:checked) ~
  input[id="rogic-checkbox-217"]:not(:checked) ~
  input[id="rogic-checkbox-218"]:not(:checked) ~
  input[id="rogic-checkbox-219"]:checked ~
  input[id="rogic-checkbox-220"]:not(:checked) ~
  input[id="rogic-checkbox-221"]:checked ~
  input[id="rogic-checkbox-222"]:not(:checked) ~
  input[id="rogic-checkbox-223"]:not(:checked) ~
  input[id="rogic-checkbox-224"]:not(:checked) ~
  input[id="rogic-checkbox-225"]:checked ~
  input[id="rogic-checkbox-226"]:not(:checked) ~
  input[id="rogic-checkbox-227"]:not(:checked) ~
  input[id="rogic-checkbox-228"]:not(:checked) ~
  input[id="rogic-checkbox-229"]:not(:checked) ~
  input[id="rogic-checkbox-230"]:not(:checked) ~
  input[id="rogic-checkbox-231"]:checked ~
  input[id="rogic-checkbox-232"]:not(:checked) ~
  input[id="rogic-checkbox-233"]:not(:checked) ~
  input[id="rogic-checkbox-234"]:not(:checked) ~
  input[id="rogic-checkbox-235"]:not(:checked) ~
  input[id="rogic-checkbox-236"]:not(:checked) ~
  input[id="rogic-checkbox-237"]:not(:checked) ~
  input[id="rogic-checkbox-238"]:not(:checked) ~
  input[id="rogic-checkbox-239"]:checked ~
  input[id="rogic-checkbox-240"]:not(:checked) ~
  input[id="rogic-checkbox-241"]:not(:checked) ~
  input[id="rogic-checkbox-242"]:checked ~
  input[id="rogic-checkbox-243"]:checked ~
  input[id="rogic-checkbox-244"]:checked ~
  input[id="rogic-checkbox-245"]:checked ~
  input[id="rogic-checkbox-246"]:not(:checked) ~
  input[id="rogic-checkbox-247"]:not(:checked) ~
  input[id="rogic-checkbox-248"]:not(:checked) ~
  input[id="rogic-checkbox-249"]:not(:checked) ~
  input[id="rogic-checkbox-250"]:not(:checked) ~
  input[id="rogic-checkbox-251"]:not(:checked) ~
  input[id="rogic-checkbox-252"]:not(:checked) ~
  input[id="rogic-checkbox-253"]:not(:checked) ~
  input[id="rogic-checkbox-254"]:not(:checked) ~
  input[id="rogic-checkbox-255"]:not(:checked) ~
  input[id="rogic-checkbox-256"]:not(:checked) ~
  input[id="rogic-checkbox-257"]:not(:checked) ~
  input[id="rogic-checkbox-258"]:checked ~
  input[id="rogic-checkbox-259"]:checked ~
  input[id="rogic-checkbox-260"]:not(:checked) ~
  input[id="rogic-checkbox-261"]:checked ~
  input[id="rogic-checkbox-262"]:checked ~
  input[id="rogic-checkbox-263"]:checked ~
  input[id="rogic-checkbox-264"]:checked ~
  input[id="rogic-checkbox-265"]:checked ~
  input[id="rogic-checkbox-266"]:checked ~
  input[id="rogic-checkbox-267"]:not(:checked) ~
  input[id="rogic-checkbox-268"]:not(:checked) ~
  input[id="rogic-checkbox-269"]:not(:checked) ~
  input[id="rogic-checkbox-270"]:not(:checked) ~
  input[id="rogic-checkbox-271"]:not(:checked) ~
  input[id="rogic-checkbox-272"]:not(:checked) ~
  input[id="rogic-checkbox-273"]:not(:checked) ~
  input[id="rogic-checkbox-274"]:not(:checked) ~
  input[id="rogic-checkbox-275"]:not(:checked) ~
  input[id="rogic-checkbox-276"]:not(:checked) ~
  input[id="rogic-checkbox-277"]:not(:checked) ~
  input[id="rogic-checkbox-278"]:checked ~
  input[id="rogic-checkbox-279"]:not(:checked) ~
  input[id="rogic-checkbox-280"]:not(:checked) ~
  input[id="rogic-checkbox-281"]:checked ~
  input[id="rogic-checkbox-282"]:checked ~
  input[id="rogic-checkbox-283"]:checked ~
  input[id="rogic-checkbox-284"]:checked ~
  input[id="rogic-checkbox-285"]:checked ~
  input[id="rogic-checkbox-286"]:checked ~
  input[id="rogic-checkbox-287"]:not(:checked) ~
  input[id="rogic-checkbox-288"]:not(:checked) ~
  input[id="rogic-checkbox-289"]:not(:checked) ~
  input[id="rogic-checkbox-290"]:not(:checked) ~
  input[id="rogic-checkbox-291"]:not(:checked) ~
  input[id="rogic-checkbox-292"]:not(:checked) ~
  input[id="rogic-checkbox-293"]:not(:checked) ~
  input[id="rogic-checkbox-294"]:not(:checked) ~
  input[id="rogic-checkbox-295"]:not(:checked) ~
  input[id="rogic-checkbox-296"]:not(:checked) ~
  input[id="rogic-checkbox-297"]:checked ~
  input[id="rogic-checkbox-298"]:checked ~
  input[id="rogic-checkbox-299"]:not(:checked) ~
  input[id="rogic-checkbox-300"]:not(:checked) ~
  input[id="rogic-checkbox-301"]:checked ~
  input[id="rogic-checkbox-302"]:checked ~
  input[id="rogic-checkbox-303"]:checked ~
  input[id="rogic-checkbox-304"]:checked ~
  input[id="rogic-checkbox-305"]:checked ~
  input[id="rogic-checkbox-306"]:checked ~
  input[id="rogic-checkbox-307"]:checked ~
  input[id="rogic-checkbox-308"]:not(:checked) ~
  input[id="rogic-checkbox-309"]:not(:checked) ~
  input[id="rogic-checkbox-310"]:not(:checked) ~
  input[id="rogic-checkbox-311"]:not(:checked) ~
  input[id="rogic-checkbox-312"]:not(:checked) ~
  input[id="rogic-checkbox-313"]:not(:checked) ~
  input[id="rogic-checkbox-314"]:not(:checked) ~
  input[id="rogic-checkbox-315"]:not(:checked) ~
  input[id="rogic-checkbox-316"]:checked ~
  input[id="rogic-checkbox-317"]:checked ~
  input[id="rogic-checkbox-318"]:checked ~
  input[id="rogic-checkbox-319"]:checked ~
  input[id="rogic-checkbox-320"]:not(:checked) ~
  input[id="rogic-checkbox-321"]:checked ~
  input[id="rogic-checkbox-322"]:checked ~
  input[id="rogic-checkbox-323"]:checked ~
  input[id="rogic-checkbox-324"]:checked ~
  input[id="rogic-checkbox-325"]:checked ~
  input[id="rogic-checkbox-326"]:checked ~
  input[id="rogic-checkbox-327"]:checked ~
  input[id="rogic-checkbox-328"]:checked ~
  input[id="rogic-checkbox-329"]:not(:checked) ~
  input[id="rogic-checkbox-330"]:not(:checked) ~
  input[id="rogic-checkbox-331"]:not(:checked) ~
  input[id="rogic-checkbox-332"]:not(:checked) ~
  input[id="rogic-checkbox-333"]:not(:checked) ~
  input[id="rogic-checkbox-334"]:not(:checked) ~
  input[id="rogic-checkbox-335"]:checked ~
  input[id="rogic-checkbox-336"]:checked ~
  input[id="rogic-checkbox-337"]:checked ~
  input[id="rogic-checkbox-338"]:checked ~
  input[id="rogic-checkbox-339"]:checked ~
  input[id="rogic-checkbox-340"]:checked ~
  input[id="rogic-checkbox-341"]:not(:checked) ~
  input[id="rogic-checkbox-342"]:checked ~
  input[id="rogic-checkbox-343"]:checked ~
  input[id="rogic-checkbox-344"]:checked ~
  input[id="rogic-checkbox-345"]:checked ~
  input[id="rogic-checkbox-346"]:checked ~
  input[id="rogic-checkbox-347"]:checked ~
  input[id="rogic-checkbox-348"]:checked ~
  input[id="rogic-checkbox-349"]:not(:checked) ~
  input[id="rogic-checkbox-350"]:not(:checked) ~
  input[id="rogic-checkbox-351"]:not(:checked) ~
  input[id="rogic-checkbox-352"]:not(:checked) ~
  input[id="rogic-checkbox-353"]:checked ~
  input[id="rogic-checkbox-354"]:checked ~
  input[id="rogic-checkbox-355"]:checked ~
  input[id="rogic-checkbox-356"]:checked ~
  input[id="rogic-checkbox-357"]:checked ~
  input[id="rogic-checkbox-358"]:checked ~
  input[id="rogic-checkbox-359"]:checked ~
  input[id="rogic-checkbox-360"]:checked ~
  input[id="rogic-checkbox-361"]:not(:checked) ~
  input[id="rogic-checkbox-362"]:not(:checked) ~
  input[id="rogic-checkbox-363"]:checked ~
  input[id="rogic-checkbox-364"]:checked ~
  input[id="rogic-checkbox-365"]:checked ~
  input[id="rogic-checkbox-366"]:checked ~
  input[id="rogic-checkbox-367"]:checked ~
  input[id="rogic-checkbox-368"]:checked ~
  input[id="rogic-checkbox-369"]:checked ~
  input[id="rogic-checkbox-370"]:checked ~
  input[id="rogic-checkbox-371"]:checked ~
  input[id="rogic-checkbox-372"]:checked ~
  input[id="rogic-checkbox-373"]:checked ~
  input[id="rogic-checkbox-374"]:checked ~
  input[id="rogic-checkbox-375"]:checked ~
  input[id="rogic-checkbox-376"]:checked ~
  input[id="rogic-checkbox-377"]:checked ~
  input[id="rogic-checkbox-378"]:checked ~
  input[id="rogic-checkbox-379"]:checked ~
  input[id="rogic-checkbox-380"]:checked ~
  input[id="rogic-checkbox-381"]:not(:checked) ~
  input[id="rogic-checkbox-382"]:not(:checked) ~
  input[id="rogic-checkbox-383"]:not(:checked) ~
  input[id="rogic-checkbox-384"]:checked ~
  input[id="rogic-checkbox-385"]:checked ~
  input[id="rogic-checkbox-386"]:checked ~
  input[id="rogic-checkbox-387"]:checked ~
  input[id="rogic-checkbox-388"]:checked ~
  input[id="rogic-checkbox-389"]:not(:checked) ~
  input[id="rogic-checkbox-390"]:not(:checked) ~
  input[id="rogic-checkbox-391"]:not(:checked) ~
  input[id="rogic-checkbox-392"]:checked ~
  input[id="rogic-checkbox-393"]:checked ~
  input[id="rogic-checkbox-394"]:checked ~
  input[id="rogic-checkbox-395"]:checked ~
  input[id="rogic-checkbox-396"]:checked ~
  input[id="rogic-checkbox-397"]:checked ~
  input[id="rogic-checkbox-398"]:checked ~
  input[id="rogic-checkbox-399"]:checked ~
  input[id="rogic-checkbox-400"]:not(:checked) ~
  .rogic-inner {
    transition: all .2s ease;
    box-shadow: inset 0 0 5px 1px $lightblue;
    div[class*='rogic-'] {
      transition: all .2s ease;
      z-index: 1;
    }
    @each $rows in $row_white {
      div.rogic-#{$rows} {
        background-color: $white;
      }
    }
    @each $rows in $row_lightblue {
      div.rogic-#{$rows} {
        background-color: $lightblue;
      }
    }
    @each $rows in $row_pink {
      div.rogic-#{$rows} {
        background-color: $pink;
      }
    }
    @each $rows in $row_pink_two {
      div.rogic-#{$rows} {
        background-color: $pink_two;
      }
    }
    @each $rows in $row_pink_three {
      div.rogic-#{$rows} {
        background-color: $pink_three;
      }
    }
    @each $rows in $row_pink_four {
      div.rogic-#{$rows} {
        background-color: $pink_four;
      }
    }
    @each $rows in $row_pink_five {
      div.rogic-#{$rows} {
        background-color: $pink_five;
      }
    }
  }
}
              
            
!

JS

              
                
              
            
!
999px

Console