Mac OS X Traffic Lights

index.html

<div class="container">
  <h1>Mac OS X Traffic Lights</h1>
  <div class="example">
    <h2>Window not focused</h2>
    <div class="traffic-lights">
      <button class="traffic-light traffic-light-close" id="close"></button>
      <button class="traffic-light traffic-light-minimize" id="minimize"></button>
      <button class="traffic-light traffic-light-maximize" id="maximize"></button>
    </div>
  </div>

  <div class="example focus">
    <h2>Window focused</h2>
    <div class="traffic-lights">
      <button class="traffic-light traffic-light-close" id="close"></button>
      <button class="traffic-light traffic-light-minimize" id="minimize"></button>
      <button class="traffic-light traffic-light-maximize" id="maximize"></button>
    </div>
  </div>
</div>

Mac OS X Traffic Lights.markdown

Mac OS X Traffic Lights

Useful in Electron apps when the default title bar must be hidden. There are some slight issues with this rendering in browser, but it looks perfect inside Electron :)

A Pen by atdrago on CodePen.

License.

style.scss

$close-red:                     #ff6159;
$close-red-active:              #bf4942;
$close-red-icon:                #4d0000;
$close-red-icon-active:         #190000;

$minimize-yellow:               #ffbd2e;
$minimize-yellow-active:        #bf8e22;
$minimize-yellow-icon:          #995700;
$minimize-yellow-icon-active:   #592800;

$maximize-green:                #28c941;
$maximize-green-active:         #1d9730;
$maximize-green-icon:           #006500;
$maximize-green-icon-active:    #003200;

$disabled-gray:                 #ddd;

.traffic-lights {
    // position: absolute;
    top: 1px;
    left: 8px;

    .focus &, &:hover, &:active {
        > .traffic-light-close {
            background-color: $close-red;

            &:active:hover {
                background-color: $close-red-active;
            }
        }
        > .traffic-light-minimize {
            background-color: $minimize-yellow;

            &:active:hover {
                background-color: $minimize-yellow-active;
            }
        }
        > .traffic-light-maximize {
            background-color: $maximize-green;

            &:active:hover {
                background-color: $maximize-green-active;
            }
        }
    }

    > .traffic-light {
        &:before, &:after {
            visibility: hidden;
        }
    }

    &:hover, &:active {
        > .traffic-light {
            &:before, &:after {
                visibility: visible;
            }
        }
    }
}

.traffic-light {
    border-radius: 100%;
    padding: 0;
    height: 12px;
    width: 12px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-sizing: border-box;
    margin-right: 3.5px;
    background-color: $disabled-gray;
    position: relative;
    outline: none;

    &:before, &:after {
        content: '';
        position: absolute;
        border-radius: 1px;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }

    &-close {
        &:before, &:after {
            background-color: $close-red-icon;
            width: 8px;
            height: 1px;
        }
        &:before {
            transform: rotate(45deg);// translate(-0.5px, -0.5px);
        }
        &:after {
            transform: rotate(-45deg);// translate(0.5px, -0.5px);
        }
        &:active:hover:before, &:active:hover:after {
            background-color: $close-red-icon-active;
        }
    }

    &-minimize {
        &:before {
            background-color: $minimize-yellow-icon;
            width: 8px;
            height: 1px;
            //transform: translateY(-0.5px);
        }
        &:active:hover:before {
            background-color: $minimize-yellow-icon-active;
        }
    }

    &-maximize {
        &:before {
            background-color: $maximize-green-icon;
            width: 6px;
            height: 6px;
        }
        &:after {
            background-color: $maximize-green;
            width: 10px;
            height: 2px;
            transform: rotate(45deg);
        }
        &:active:hover:before {
            background-color: $maximize-green-icon-active;
        }
        &:active:hover:after {
            background-color: $maximize-green-active;
        }
    }
}

// Example Styles
body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 100;
}

h1, h2 {
  font-weight: 100;
}

h2 {
  margin: 0 0 10px;
}

.example {
  margin: 0 0 30px;
}

.container {
  width: 300px;
  margin: 0 auto;
}