i-rubik/example/style/fork.styl

A Vue.js 2.0+ UI Components Framework

.github-fork-ribbon {
  position fixed
  top 0
  right 0
  width 12.1em
  height 12.1em
  overflow hidden
  z-index 999
  pointer-events none
  font-size 13px
  text-decoration none
  text-indent -999999px
  &.fixed {
    position fixed
  }

  &:before,
  &:after {
    position absolute
    display block
    width 15.38em
    height 1.54em
    top 3.23em
    right -3.23em
    -webkit-box-sizing content-box
    box-sizing content-box
    -webkit-transform rotate(45deg)
    transform rotate(45deg)
  }

  &:before {
    content ""
    padding .38em 0
    background-color #42b983
    background-image -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.15)))
    background-image -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15))
    background-image linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15))
    /* Add a drop shadow */
    
    -webkit-box-shadow 0 .15em .23em 0 rgba(0, 0, 0, 0.5)
    box-shadow 0 .15em .23em 0 rgba(0, 0, 0, 0.5)
    pointer-events auto
  }

  &:after {
    /* Set the text from the title attribute */
    
    content attr(title)
    /* Set the text properties */
    
    color #fff
    font 700 1em "Helvetica Neue", Helvetica, Arial, sans-serif
    line-height 1.54em
    text-decoration none
    text-shadow 0 -.08em rgba(0, 0, 0, 0.5)
    text-align center
    text-indent 0
    /* Set the layout properties */
    
    padding .15em 0
    margin .15em 0
    /* Add "stitching" effect */
    
    border-width .08em 0
    border-style dotted
    border-color #fff
    border-color rgba(255, 255, 255, 0.7)
  }

  &.left-top:before,
  &.left-top:after {
    right auto
    left -3.23em
  }

  &.left-top:before,
  &.left-top:after {
    -webkit-transform rotate(-45deg)
    transform rotate(-45deg)
  }
}