123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280 |
- /**
- * The font weight for headers.
- *
- * @group label
- */
- $v-font-weight--header: $v-font-weight - 100 !default;
-
- /**
- * The line height for headers.
- *
- * @group label
- */
- $v-line-height--header: 1.1 !default;
-
- /**
- * The font family for headers.
- *
- * @group label
- */
- $v-font-family--header: null !default;
-
- /**
- * The font color for colored style labels.
- *
- * @group label
- */
- $v-font-color--colored: $v-selection-color !default;
-
- /**
- * The font size for 1st level headers.
- *
- * @group label
- */
- $v-font-size--h1: 2.4em !default;
-
- /**
- * The font size for 2nd level headers.
- *
- * @group label
- */
- $v-font-size--h2: 1.6em !default;
-
- /**
- * The font size for 3rd level headers.
- *
- * @group label
- */
- $v-font-size--h3: 1.2em !default;
-
- /**
- * The font family for 1st level headers.
- *
- * @group label
- */
- $v-font-family--h1: $v-font-family--header !default;
-
- /**
- * The font family for 2nd level headers.
- *
- * @group label
- */
- $v-font-family--h2: $v-font-family--header !default;
-
- /**
- * The font family for 3rd level headers.
- *
- * @group label
- */
- $v-font-family--h3: $v-font-family--header !default;
-
- /**
- * The letter spacing for 1st level headers.
- *
- * @group label
- */
- $v-letter-spacing--h1: -0.03em !default;
-
- /**
- * The letter spacing for 2nd level headers.
- *
- * @group label
- */
- $v-letter-spacing--h2: -0.02em !default;
-
- /**
- * The letter spacing for 3rd level headers.
- *
- * @group label
- */
- $v-letter-spacing--h3: 0 !default;
-
- /**
- * The letter spacing for 4th level headers.
- *
- * @group label
- */
- $v-letter-spacing--h4: 0 !default;
-
-
- /**
- * Outputs the selectors and styles for the Label component.
- *
- * @param {string} $primary-stylename (v-label) - the primary style name for the selectors
- * @param {bool} $include-additional-styles - should the mixin output all the different style variations of the component
- *
- * @group label
- */
- @mixin valo-label ($primary-stylename: v-label, $include-additional-styles: contains($v-included-additional-styles, label)) {
-
- .#{$primary-stylename} {
- @include user-select(text);
- }
-
- .#{$primary-stylename}-undef-w {
- white-space: nowrap;
- }
-
- h1, .#{$primary-stylename}-h1,
- h2, .#{$primary-stylename}-h2,
- h3, .#{$primary-stylename}-h3 {
- line-height: $v-line-height--header;
- font-weight: $v-font-weight--header;
- color: valo-font-color($v-app-background-color, 0.92);
- }
-
- h1, .#{$primary-stylename}-h1 {
- font-size: $v-font-size--h1;
- margin-top: 1.4em;
- margin-bottom: 1em;
- font-family: $v-font-family--h1;
- letter-spacing: $v-letter-spacing--h1;
- }
-
- h2, .#{$primary-stylename}-h2 {
- font-size: $v-font-size--h2;
- font-family: $v-font-family--h2;
- margin-top: 1.6em;
- margin-bottom: 0.77em;
- letter-spacing: $v-letter-spacing--h2;
- }
-
- h3, .#{$primary-stylename}-h3 {
- font-size: $v-font-size--h3;
- font-family: $v-font-family--h3;
- margin-top: 1.8em;
- margin-bottom: 0.77em;
- letter-spacing: $v-letter-spacing--h3;
- }
-
- h4, .#{$primary-stylename}-h4 {
- line-height: $v-line-height--header;
- font-weight: $v-font-weight + 200;
- font-size: $v-font-size--small;
- color: valo-font-color($v-app-background-color, 0.74);
- text-transform: uppercase;
- letter-spacing: $v-letter-spacing--h4;
- margin-top: 2.4em;
- margin-bottom: 0.8em;
- }
-
- .v-csslayout {
- > h1,
- > h2,
- > h3,
- > h4
- > .#{$primary-stylename}-h1,
- > .#{$primary-stylename}-h2,
- > .#{$primary-stylename}-h3,
- > .#{$primary-stylename}-h4 {
- &:first-child {
- margin-top: $v-font-size;
- }
- }
- }
-
- .v-verticallayout > .v-slot:first-child,
- .v-verticallayout > div > .v-slot:first-child {
- h1, .#{$primary-stylename}-h1,
- h2, .#{$primary-stylename}-h2,
- h3, .#{$primary-stylename}-h3,
- h4, .#{$primary-stylename}-h4 {
- margin-top: $v-font-size;
- }
- }
-
- .v-verticallayout > .v-slot:first-child .v-formlayout-contentcell,
- .v-verticallayout > div > .v-slot:first-child .v-formlayout-contentcell {
- h1, .#{$primary-stylename}-h1,
- h2, .#{$primary-stylename}-h2,
- h3, .#{$primary-stylename}-h3,
- h4, .#{$primary-stylename}-h4 {
- margin-top: -0.5em;
- }
- }
-
- h1, .#{$primary-stylename}-h1,
- h2, .#{$primary-stylename}-h2,
- h3, .#{$primary-stylename}-h3,
- h4, .#{$primary-stylename}-h4 {
- &.no-margin {
- margin: 0 !important;
- }
- }
-
-
- @if $include-additional-styles {
-
- .#{$primary-stylename}-colored {
- color: $v-font-color--colored;
- }
-
- .#{$primary-stylename}-large {
- font-size: $v-font-size--large;
- }
-
- .#{$primary-stylename}-small {
- font-size: $v-font-size--small;
- }
-
- .#{$primary-stylename}-tiny {
- font-size: $v-font-size--tiny;
- }
-
- .#{$primary-stylename}-huge {
- font-size: $v-font-size--huge;
- }
-
- .#{$primary-stylename}-bold {
- font-weight: $v-font-weight + 200;
- }
-
- .#{$primary-stylename}-light {
- font-weight: $v-font-weight - 100;
- @if $v-font-weight < 400 {
- color: valo-font-color($v-app-background-color, .5);
- }
- }
-
- .#{$primary-stylename}-align-right {
- text-align: right;
- }
-
- .#{$primary-stylename}-align-center {
- text-align: center;
- }
-
- .#{$primary-stylename}-spinner {
- @include valo-spinner;
- }
-
- .#{$primary-stylename}-success,
- .#{$primary-stylename}-failure {
- background: $v-textfield-background-color;
- color: valo-font-color($v-textfield-background-color);
- border: 2px solid $v-friendly-color;
- border-radius: $v-border-radius;
- padding: round($v-unit-size/5) round($v-unit-size/2) round($v-unit-size/5) round($v-unit-size);
- font-weight: $v-font-weight + 100;
- font-size: round($v-font-size * 0.95);
-
- &:before {
- font-family: ValoIcons;
- content: "\f00c";
- margin-right: .5em;
- margin-left: round($v-unit-size/-2);
- color: $v-friendly-color;
- }
- }
-
- .#{$primary-stylename}-failure {
- border-color: $v-error-indicator-color;
-
- &:before {
- content: "\f05e";
- color: $v-error-indicator-color;
- }
- }
- }
-
- }
|