gpyWWz

gpyWWz.markdown

gpyWWz

A Pen by Tan Duong on CodePen.

License.

index.html

.button-main
  .center
.button-item.deg-0
  .center
.button-lable.deg-0 
  .center-anchor
  | 0
.button-item.deg-45
  .center
.button-lable.deg-45 
  .center-anchor
  | 45
.button-item.deg-90
  .center
.button-lable.deg-90 
  .center-anchor
  | 90
  
.button-item.deg-135
  .center
.button-lable.deg-135 
  .center-anchor
  | 135
  
.button-item.deg-180
  .center
.button-lable.deg-180 
  .center-anchor
  | 180
  
.button-item.deg-225
  .center
.button-lable.deg-225 
  .center-anchor
  | 225
  
.button-item.deg-270
  .center
.button-lable.deg-270 
  .center-anchor
  | 270
  
.button-item.deg-315
  .center
.button-lable.deg-315 
  .center-anchor
  | 315
  

style.css

$main-x: 400px
$main-y: 300px
$main-radius: 50px
$item-radius: 25px
$menu-radius: 100px
$item-label-margin: 10px
$label-base-distance: $menu-radius + $item-radius
$label-width: 100px
$label-height: 30px
$abc: $label-width/2 - $label-height/2

body
  height: 500px
  
.center, .center-anchor
  width:  4px
  height: 4px
  background: red
  margin-right: auto 
  position: absolute
  top:  calc(50% - 2px)
  left: calc(50% - 2px)
.center-anchor
  &:before
    content: ' '
    opacity: .5
    width:  $label-height
    height: $label-height
    background: green
    display: block
    position: relative
    top: #{- $label-height/2 + 2px}
    left: #{-$label-height/2 + 2px}
    z-index: 10
    border-radius: 50%
    
.button-main
  border-radius: 50%
  background: cyan
  width:  calc(2*#{$main-radius})
  height: calc(2*#{$main-radius})
  position: absolute
  top:  calc(#{$main-y} - #{$main-radius})
  left: calc(#{$main-x} - #{$main-radius})
  
.button-item
  border-radius: 50%
  background: #dae5e8
  width:  calc(2*#{$item-radius})
  height: calc(2*#{$item-radius})
  position: absolute
  z-index: 2
  @for $i from 0 through 71
    &.deg-#{$i*5}
      top:  calc(#{$main-y - $item-radius - $menu-radius*sin(0deg + $i*5)})
      left: calc(#{$main-x - $item-radius + $menu-radius*cos(0deg + $i*5)})
    
.button-lable
  background: #fcf0e5
  width: $label-width
  height: $label-height
  position: absolute
  line-height: $label-height
  text-align: center
  color: #5c3170
  z-index: 5
  @for $i from 0 through 71
    &.deg-#{$i*5}
      top:  calc(#{$main-y - $label-height/2 - ($menu-radius + $item-radius + $label-height/2 + $item-label-margin)*sin(0deg + $i*5)})
      left: calc(#{$main-x - $label-width/2  + ($menu-radius + $item-radius + $label-height/2 + $item-label-margin + $abc)*cos(0deg + $i*5)})
      .center-anchor
        left: calc(50% - 2px - #{$abc*cos(0deg + $i*5)})