// glyphs .wj-glyph { position: relative; display: inline-block; box-sizing: border-box; text-align: center; opacity: .75; cursor: pointer; } .wj-glyph-asterisk { @extend .wj-glyph; &:after { content: '\2731\fe0e' } } .wj-glyph-calendar { @extend .wj-glyph; width: 1em; height: 1em; border: .1em solid; border-top: .3em solid; transform: translateY(.15em); &:after { position: absolute; font-size: 50%; left: .5em; content: '1'; } } .wj-glyph-check { @extend .wj-glyph; &:after { content: '\2714\fe0e'; font-weight: bold } } .wj-glyph-circle { @extend .wj-glyph; border: .3em solid; border-radius: 50%; transform: translateY(-.1em); } .wj-glyph-clipboard { @extend .wj-glyph; &:after { content: '\1f4cb\fe0e' } } .wj-glyph-clock { @extend .wj-glyph; width: 1em; height: 1em; border: .1em solid; border-radius: 50%; transform: translateY(.15em); &:after { position: absolute; border-left: .1em solid; border-bottom: .1em solid; width: .25em; height: .3em; top: .1em; left: .35em; content: ''; } } .wj-glyph-diamond { @extend .wj-glyph; &:after { content: '\25c6\fe0e' } } .wj-glyph-dimension { @extend .wj-glyph; &:after { content: '\27c0\fe0e' } } .wj-glyph-down { @extend .wj-glyph; top: -1px; border-top: .5em solid; border-right: .4em solid transparent; border-left: .4em solid transparent; } .wj-glyph-down-left { @extend .wj-glyph; border-top: .65em solid transparent; border-left: .65em solid; } .wj-glyph-down-right { @extend .wj-glyph; top: -2px; border-bottom: .65em solid; border-left: .65em solid transparent; } .wj-glyph-drag { @extend .wj-glyph; width: 1em; height: 1em; &:after { content: ' '; position: absolute; top: 0.15em; left: 0.1em; width: 1em; height: 1em; background: radial-gradient(#000 1px, transparent 2px); background-size: 0.33em 0.33em; } } .wj-glyph-file { @extend .wj-glyph; border-left: .7em solid; height: .85em; &:after { position: absolute; transform: translateX(-100%); border-top: .3em solid transparent; border-left: .3em solid white; content: ''; } } .wj-glyph-left { @extend .wj-glyph; border-top: .4em solid transparent; border-right: .5em solid; border-bottom: .4em solid transparent; } .wj-glyph-measure { @extend .wj-glyph; &:after { content: '\1f4ca\fe0e' } } .wj-glyph-plus, .wj-glyph-minus { @extend .wj-glyph; border-top: .25em solid; width: .9em; top: -.3em; } .wj-glyph-plus:after { position: absolute; box-sizing: border-box; border-left: .25em solid; width: .25em; height: .95em; left: .3em; top: -.6em; content: ''; } .wj-glyph-pencil { @extend .wj-glyph; &:after { content: '\270e\fe0e' } } .wj-glyph-right { @extend .wj-glyph; border-top: .4em solid transparent; border-bottom: .4em solid transparent; border-left: .5em solid; } .wj-glyph-square { @extend .wj-glyph; border: .25em solid; } .wj-glyph-step-backward { @extend .wj-glyph; border-top: .4em solid transparent; border-right: .5em solid; border-bottom: .4em solid transparent; transform: translateX(.12em); &:after { position: absolute; border-left: .2em solid; height: .75em; transform: translate(-100%,-50%); content: ''; } } [dir=rtl] .wj-glyph-step-backward:after { transform: translate(0, -50%); } .wj-glyph-step-forward { @extend .wj-glyph; border-top: .4em solid transparent; border-bottom: .4em solid transparent; border-left: .5em solid; &:after { position: absolute; border-left: .2em solid; height: .75em; transform: translateY(-50%); content: ''; } } [dir=rtl] .wj-glyph-step-forward:after { transform: translate(100%, -50%); } .wj-glyph-up { @extend .wj-glyph; border-right: .4em solid transparent; border-bottom: .5em solid; border-left: .4em solid transparent; } .wj-glyph-up-left { @extend .wj-glyph; border-bottom: .65em solid transparent; border-left: .65em solid; } .wj-glyph-up-right { @extend .wj-glyph; border-top: .65em solid; border-left: .65em solid transparent; } .wj-glyph-filter { @extend .wj-glyph; top: -.1em; width: .5em; border-top: .5em solid; border-right: .4em solid transparent; border-left: .4em solid transparent; &:after { position: absolute; border-left: .2em solid; height: .4em; transform: translateX(-50%); top: -.2em; content: ''; } } [dir=rtl] .wj-glyph-filter:after { transform: translateX(50%); }