| //// |
| /// @group components/typeface |
| //// |
| |
| /// Some sizes in font-icons are crisper than others. This function tries to scale the desired |
| /// size of an icon to its next-best most-crisp size, depending on font-family. |
| /// @param {string} font-family |
| /// @param {integer} initial-font-size |
| @function get_crisp_size ($font-family: '', $initial-font-size: 14px) { |
| $size: $initial-font-size; |
| @if $font-family == '' {$font-family: FontAwesome; } |
| |
| @if $font-family == FontAwesome and $os-font-unit == px { //multiples of 7 |
| @if $initial-font-size < 16 {$size: 14px;} |
| @else if $initial-font-size >= 16 and $initial-font-size < 21 {$size: 21px} |
| @else if $initial-font-size >= 21 and $initial-font-size <= 30 {$size: 28px} |
| @else if $initial-font-size >= 31 {$size: 35px} |
| } |
| @else if $font-family == Vaadin-Icons and $os-font-unit == px { //multiples of 8 |
| @if $initial-font-size <= 16 {$size: 16px;} |
| @else if $initial-font-size > 16 and $initial-font-size <= 24 {$size: 24px} |
| @else if $initial-font-size > 24 and $initial-font-size <= 32 {$size: 32px} |
| @else if $initial-font-size > 32 {$size: 40px} |
| } |
| @return $size; |
| } |
| |
| |
| /// Draws the selected font icon according to parameters. |
| /// @param font-family FontAwesome |
| /// @param size v-font-size |
| /// @param line-height 0 |
| /// @param float none |
| /// @param content 'need content' |
| /// @param placement before |
| /// @param mirror false |
| /// @param flip false |
| /// @param background '' |
| @mixin os-icon-font ($font-family: FontAwesome, |
| $size: $v-font-size, |
| $line-height: 0, |
| $float: none, |
| $content: 'need content', |
| $placement: before, |
| $mirror: false, |
| $flip: false, |
| $background: '') |
| { |
| @if $background == '' { |
| background: transparent; |
| } |
| |
| border: 0px; |
| float: $float; |
| |
| $size: get_crisp_size($font-family, $size); |
| @if $line-height == 0 { |
| $line-height: get_crisp_size($font-family, $size); |
| } |
| |
| |
| @if $placement == after { |
| &:after { |
| font-family: $font-family; |
| font-size: $size; |
| line-height: $line-height; |
| content: $content; |
| text-shadow: $os-text-shadow; |
| text-shadow: valo-text-shadow(); |
| } |
| } |
| @else { |
| &:before { |
| font-family: $font-family; |
| font-size: $size; |
| line-height: $line-height; |
| content: $content !important; |
| text-shadow: $os-text-shadow; |
| text-shadow: valo-text-shadow(); |
| } |
| } |
| @if $mirror == true { |
| -moz-transform: scale(-1, 1); |
| -webkit-transform: scale(-1, 1); |
| -o-transform: scale(-1, 1); |
| -ms-transform: scale(-1, 1); |
| transform: scale(-1, 1); |
| } |
| @if $flip == true { |
| -moz-transform: scale(1, -1); |
| -webkit-transform: scale(1, -1); |
| -o-transform: scale(1, -1); |
| -ms-transform: scale(1, -1); |
| transform: scale(1, -1); |
| } |
| } |
| |
| /// @todo unused |
| @mixin os-typeface-h3 {} |
| |
| |
| /// Headings inside views. |
| @mixin os-typeface-view-h2 { |
| font-size: $v-font-size * $v-scaling-factor--large; |
| padding: floor($v-unit-size/3); |
| font-weight: bold; |
| text-overflow: ellipsis; |
| overflow: hidden; |
| white-space: nowrap; |
| color: valo-font-color($os-sub-header-bg); |
| line-height: 100% * $v-scaling-factor--large; |
| letter-spacing: 0em !important; |
| /* min-width: $os-button-width; */ |
| @if $os-theme-desig == "cxo" { |
| color: $os-h2-shade; |
| } |
| } |
| |
| /// Sidebar font style. |
| @mixin os-typeface-sidebar { |
| padding-bottom: $v-unit-size * 0.4; |
| padding-top: $v-unit-size * 0.4; |
| .v-label { |
| padding: 0px; |
| padding-left: $v-unit-size * 0.4; |
| line-height: $v-line-height * $v-scaling-factor--large; |
| font-size: $v-font-size * $v-scaling-factor--large; |
| font-weight: bold; |
| span { |
| font-size: $v-font-size * $v-scaling-factor--large; |
| //padding-top: $v-unit-size * 0.4; |
| //line-height: $v-line-height * $v-scaling-factor--large; |
| margin: 0px !important; |
| font-weight: bold; |
| text-overflow: ellipsis; |
| overflow: hidden; |
| white-space: nowrap; |
| color: valo-font-color($os-splitter-shade); |
| letter-spacing: 0em !important; |
| min-height: $os-button-height; |
| //font-weight: initial !important; |
| display: block; |
| } |
| } |
| } |
| |
| /// Headings e.g. on welcome-page. |
| @mixin os-typeface-h1 { |
| background: $os-light-contrast; |
| padding: $v-unit-size * 0.25 $v-unit-size * 0.5; |
| border: $v-border; |
| font-size: $v-font-size * $v-scaling-factor--huge; |
| font-weight: bold; |
| color: valo-font-color($os-light-contrast); |
| text-align: center; |
| } |