// // Icons // .rf-icon { position: relative; top: 1px; display: inline-block; font-family: $font-icon-f5; font-size: 1em; font-style: normal; font-weight: normal; line-height: 1em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } // // BASIC // // the letter x .rf-icon--no:after { color: $red; content: "\f00d"; font-family: $font-icon-f5; } // Green check mark .rf-icon--ok:after { content: "\f00c"; color: $green; font-family: $font-icon-f5; } // 6 dots, 2 across .rf-icon--grip:after { color: $stormy; content: "\f142 \202F \f142"; cursor: -webkit-grab; font-family: $font-icon-f5; &:active { cursor: -webkit-grabbing; } } .rf-icon--refresh:after { content: "\f021"; font-family: $font-icon-f5; } .rf-icon--rollback{ transform: scale(-1, 1); &:after { color: $red; content: "\f01e"; font-family: $font-icon-f5; } } .rf-icon--pencil:after { content: "\270f"; font-family: $font-icon-g; } .rf-icon--eye-open:after { content: "\f06e"; font-family: $font-icon-f5; } .rf-icon--eye-closed:after { content: "\f070"; font-family: $font-icon-f5; } .rf-icon--download:after { content: "\f019"; font-family: $font-icon-f5; } .rf-icon--upload:after { content: "\f093"; font-family: $font-icon-f5; } .rf-icon--trash:after { content: "\f2ed"; font-family: $font-icon-f5; } .rf-icon--dashboard:after { content: "\f3fd"; font-family: $font-icon-f5; } .rf-icon--repeat:after { content: "\f2f9"; font-family: $font-icon-f5; } .rf-icon--question:after { color: $blue-bright; content: "\f059"; font-family: $font-icon-f5; } .rf-icon--github:after { font-weight: 900; content: "\f09b"; font-family: $font-icon-f5-b; } .rf-icon--caret--right:after { content: "\f0da"; font-family: $font-icon-f5; } .rf-icon--caret--left:after { content: "\f0d9"; font-family: $font-icon-f5; } .rf-icon--caret--up:after { content: "\f0d8"; font-family: $font-icon-f5; } .rf-icon--caret--down:after { content: "\f0d7"; font-family: $font-icon-f5; } .rf-icon--external:after { content: "\f360"; font-family: $font-icon-f5; } .rf-icon--minus:after { content: "\f068"; font-family: $font-icon-f5; } .rf-icon--plus:after { content: "\f067"; font-family: $font-icon-f5; } // // MODAL // // i with a circle .rf-icon--info:after, %rf-icon--info:after { color: $blue-bright; content: "\f05a"; font-family: $font-icon-f5; } // ! with a triangle .rf-icon--warning:after, %rf-icon--warning:after { color: $gold; content: "\f071"; font-family: $font-icon-f5; } // ! with a circle .rf-icon--error:after, %rf-icon--error:after { color: $red; content: "\f06a"; font-family: $font-icon-f5; } // // STEP STATUSES // In use on OrCA at the moment // // Circle with x // Not executed .rf-icon--failure:after { color: $red; content: "\f057"; font-family: $font-icon-f5; } // Circle with x // Not executed .rf-icon--success:after { color: $green; content: "\f058"; font-family: $font-icon-f5; } // Circle with x // Not executed .rf-icon--pending:after { color: $stormy; content: "\f057"; font-family: $font-icon-f5; } // Blue circle // Step you're currently on .rf-icon--ongoing:after { color: $blue-bright; content: "\f111"; font-family: $font-icon-f5-r; } // Gray dash // Unneeded step .rf-icon--irrelevant:after { color: $stormy; content: "\f068"; font-family: $font-icon-f5; } // // LOADERS // Must define background color // .rf-icon--loading { background-image: url(../images/loader.svg); background-size: 100% 100%; height: 30px; width: 30px; &.rf-icon--xlarge { height: 50px; width: 50px; } &.rf-icon--large { height: 38px; width: 38px; } &.rf-icon--small { height: 20px; width: 20px; } &.rf-icon--xsmall { height: 14px; width: 14px; } } // // ICON HELPERS // .rf-icon--onleft { margin-right: 6px; } .rf-icon--onright { margin-left: 6px; } // // ICON SIZES // .rf-icon--xlarge, %rf-icon--xlarge { font-size: 3.8em; } .rf-icon--large, %rf-icon--large { font-size: 2em; } .rf-icon--small, %rf-icon--small { font-size: .8em; } .rf-icon--xsmall, %rf-icon--xsmall { font-size: .6em; }