123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674 |
- /**
- * Outputs the selectors and properties for the DateField component.
- *
- * @param {string} $primary-stylename (v-datefield) - 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 datefield
- */
- @mixin valo-datefield ($primary-stylename: v-datefield, $include-additional-styles: contains($v-included-additional-styles, datefield)) {
-
- .#{$primary-stylename} {
- position: relative;
- width: $v-default-field-width;
- @include valo-datefield-style;
- }
-
- .#{$primary-stylename}-error {
- .#{$primary-stylename}-textfield {
- @include valo-textfield-error-style;
- }
-
- .#{$primary-stylename}-button {
- color: $v-error-indicator-color;
- border-color: $v-error-indicator-color;
- }
- }
-
- .#{$primary-stylename}-error-info {
- .#{$primary-stylename}-textfield {
- @include valo-textfield-error-level-info-style;
- }
-
- .#{$primary-stylename}-button {
- color: $v-error-indicator-level-info-color;
- border-color: $v-error-indicator-level-info-color;
- }
- }
-
- .#{$primary-stylename}-error-warning {
- .#{$primary-stylename}-textfield {
- @include valo-textfield-error-level-warning-style;
- }
-
- .#{$primary-stylename}-button {
- color: $v-error-indicator-level-warning-color;
- border-color: $v-error-indicator-level-warning-color;
- }
- }
-
- .#{$primary-stylename}-error-error {
- .#{$primary-stylename}-textfield {
- @include valo-textfield-error-level-error-style;
- }
-
- .#{$primary-stylename}-button {
- color: $v-error-indicator-level-error-color;
- border-color: $v-error-indicator-level-error-color;
- }
- }
-
- .#{$primary-stylename}-error-critical {
- .#{$primary-stylename}-textfield {
- @include valo-textfield-error-level-critical-style;
- }
-
- .#{$primary-stylename}-button {
- color: $v-error-indicator-level-critical-color;
- border-color: $v-error-indicator-level-critical-color;
- }
- }
-
- .#{$primary-stylename}-error-system {
- .#{$primary-stylename}-textfield {
- @include valo-textfield-error-level-system-style;
- }
-
- .#{$primary-stylename}-button {
- color: $v-error-indicator-level-system-color;
- border-color: $v-error-indicator-level-system-color;
- }
- }
-
- // Different widths for different resolutions
- .#{$primary-stylename}-full {
- width: round($v-font-size * 15);
- }
-
- .#{$primary-stylename}-day {
- width: $v-default-field-width;
- }
-
- .#{$primary-stylename}-month {
- width: round($v-font-size * 7.5);
- }
-
- .#{$primary-stylename}-year {
- width: round($v-font-size * 6.5);
- }
-
- .#{$primary-stylename}-popup {
- @include valo-datefield-popup-style;
- }
-
- @include valo-datefield-calendarpanel-style;
-
-
- @if $include-additional-styles {
- .#{$primary-stylename}-borderless {
- .#{$primary-stylename}-textfield {
- @include valo-textfield-borderless-style;
- }
- .#{$primary-stylename}-button {
- border: none;
- color: inherit;
- @include opacity(.5);
- }
- }
-
- .#{$primary-stylename}-align-right input {
- text-align: right;
- }
-
- .#{$primary-stylename}-align-center input {
- text-align: center;
- }
-
- .#{$primary-stylename}-tiny {
- @include valo-datefield-style($unit-size: $v-unit-size--tiny, $bevel: null, $shadow: null, $border: null, $background-color: null, $states: normal);
- font-size: $v-font-size--tiny;
- }
-
- .#{$primary-stylename}-compact,
- .#{$primary-stylename}-small {
- @include valo-datefield-style($unit-size: $v-unit-size--small, $bevel: null, $shadow: null, $border: null, $background-color: null, $states: normal);
- }
-
- .#{$primary-stylename}-small {
- font-size: $v-font-size--small;
- }
-
- .#{$primary-stylename}-large {
- @include valo-datefield-style($unit-size: $v-unit-size--large, $bevel: null, $shadow: null, $border: null, $background-color: null, $states: normal);
- font-size: $v-font-size--large;
- }
-
- .#{$primary-stylename}-huge {
- @include valo-datefield-style($unit-size: $v-unit-size--huge, $bevel: null, $shadow: null, $border: null, $background-color: null, $states: normal);
- font-size: $v-font-size--huge;
- }
- }
-
- }
-
-
- /**
- * Outputs the selectors and properties for the InlineDateField component.
- *
- * @param {string} $primary-stylename (v-inline-datefield) - the primary style name for the selectors
- *
- * @group datefield
- */
- @mixin valo-inline-datefield ($primary-stylename: v-inline-datefield) {
- @include valo-datefield-calendarpanel-style(#{$primary-stylename}-calendarpanel);
-
- .#{$primary-stylename}-calendarpanel {
- position: relative;
- background: $v-overlay-background-color;
- padding: round($v-unit-size/6);
- }
- }
-
-
- /**
- * Outputs the styles for a date field variant.
- *
- * @param {list} $bevel ($v-textfield-bevel) - Box-shadow value according to $v-bevel documentation
- * @param {list} $shadow ($v-textfield-shadow) - Box-shadow value according to $v-shadow documentation
- * @param {size} $unit-size ($v-unit-size) - The sizing of the datefield, which corresponds its height
- * @param {list} $border ($v-textfield-border) - The border of the datefield
- * @param {size} $border-radius ($v-textfield-border-radius) - The border-radius of the datefield
- * @param {color} $background-color ($v-textfield-background-color) - The background color of the datefield
- * @param {list} $states (normal focus disabled) - The datefield states for which to output corresponding styles
- *
- * @group datefield
- */
- @mixin valo-datefield-style (
- $bevel : $v-textfield-bevel,
- $shadow : $v-textfield-shadow,
- $unit-size : $v-unit-size,
- $border : $v-textfield-border,
- $border-radius : $v-textfield-border-radius,
- $background-color : $v-textfield-background-color,
- $states : normal focus disabled
- ) {
-
- height: $unit-size;
- border-radius: $border-radius;
-
- [class*="textfield"] {
- box-sizing: border-box;
- @include valo-textfield-style($bevel: $bevel, $shadow: $shadow, $unit-size: $unit-size, $border: $border, $border-radius: $border-radius, $background-color: $background-color, $states: $states) ;
- padding-left: $unit-size * 1.2;
- width: 100%;
- height: 100%;
- border-radius: inherit;
- }
-
- &[class*="prompt"] > [class*="textfield"] {
- @include valo-textfield-prompt-style($background-color);
- }
-
- [class*="button"] {
- @include valo-datefield-button-style($unit-size: $unit-size, $bevel: $bevel, $background-color: $background-color, $border-radius: $border-radius, $border: $border);
- }
-
- &.v-disabled {
- @include opacity($v-disabled-opacity);
-
- [class*="button"] {
- cursor: default;
- pointer-events: none;
- &:active:after {
- display: none;
- }
- }
- }
-
- &.v-readonly {
- [class*="textfield"] {
- @include valo-textfield-readonly-style;
- }
-
- [class*="button"] {
- cursor: default;
- pointer-events: none;
- &:active:after {
- display: none;
- }
- }
- }
- }
-
-
- /**
- * Outputs the styles for a date field variant button element.
- *
- * @param {size} $unit-size ($v-unit-size) - The sizing of the button, which corresponds its width.
- * @param {list} $bevel ($v-textfield-bevel) - Box-shadow value according to $v-bevel documentation
- * @param {color} $background-color ($v-textfield-background-color) - The background color of the input, which affects the font color of the button
- * @param {size} $border-radius ($v-textfield-border-radius) - The border-radius of the input, which affects the border-radius of the button
- * @param {list} $border ($v-textfield-border) - The border of the input, which affects the border of the button
- *
- * @group datefield
- */
- @mixin valo-datefield-button-style ($unit-size: $v-unit-size, $bevel: $v-bevel, $background-color: $v-textfield-background-color, $border-radius: $v-border-radius, $border: $v-textfield-border) {
- $border-width: first-number($border) or 0;
- @include valo-tappable;
- -webkit-appearance: none;
- background: transparent;
- padding: 0;
- position: absolute;
- z-index: 10;
- width: $unit-size;
- line-height: $unit-size - ($border-width*2);
- text-align: center;
- font: inherit;
- outline: none;
- margin: 0;
-
- @if $border and $border != none {
- top: $border-width;
- bottom: $border-width;
- left: $border-width;
- }
-
- @if $border {
- border: none;
- }
-
- @if type-of($background-color) == color {
- @if $border {
- border-right: valo-border($color: $background-color, $border: $v-textfield-border, $strength: 0.5);
- }
- color: mix($background-color, valo-font-color($background-color));
-
- &:hover {
- color: valo-font-color($background-color);
- }
- }
-
- @if $border-radius > 0 {
- $br: max(0, $border-radius - $border-width);
- border-radius: $br 0 0 $br;
- }
-
- &:before {
- @include valo-datefield-button-icon-style;
- @if $v-animations-enabled {
- @include transition(color 140ms);
- }
- }
-
- &:active:after {
- content: "";
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- @if type-of($background-color) == color {
- @include valo-button-active-style($background-color);
- }
- border-radius: inherit;
- }
- }
-
-
- /**
- * Outputs the font icon styles for the date field drop down button.
- *
- * @group datefield
- */
- @mixin valo-datefield-button-icon-style {
- font-family: ThemeIcons;
- content: "\f073";
- }
-
-
- /**
- * Outputs the styles for a date field popup.
- *
- * @group datefield
- */
- @mixin valo-datefield-popup-style {
- @include valo-overlay-style;
-
- margin-top: ceil($v-unit-size/8) !important;
- margin-bottom: ceil($v-unit-size/8) !important;
- margin-right: ceil($v-unit-size/8) !important;
- cursor: default;
- width: auto;
-
- table {
- border-collapse: collapse;
- border-spacing: 0;
- margin: 0 auto;
- }
-
- td {
- padding: round($v-unit-size/20);
- }
-
- @include valo-datefield-calendarpanel-style;
- }
-
-
- /**
- * Outputs the styles for calendar panel (i.e. month view).
- *
- * @param {string} $primary-stylename (v-datefield-calendarpanel) - the primary style name for the selectors
- *
- * @group datefield
- */
- @mixin valo-datefield-calendarpanel-style ($primary-stylename: v-datefield-calendarpanel) {
- .#{$primary-stylename} {
- font-size: $v-font-size;
- text-align: center;
-
- &:focus {
- outline: none;
- }
- }
-
- .#{$primary-stylename}-day {
- @include valo-datefield-calendarpanel-day-style;
- display: inline-block;
- box-sizing: border-box;
- cursor: pointer;
- &:hover {
- @include valo-datefield-calendarpanel-day-hover-style;
- }
- }
-
- .#{$primary-stylename}-day-offmonth {
- @include valo-datefield-calendarpanel-day-offmonth-style;
- }
-
- .#{$primary-stylename}-day-today {
- @include valo-datefield-calendarpanel-day-today-style;
- }
-
- .#{$primary-stylename}-day.#{$primary-stylename}-day-selected,
- .#{$primary-stylename}-day.#{$primary-stylename}-day-selected:hover {
- @include valo-datefield-calendarpanel-day-selected-style
- }
-
- .#{$primary-stylename}-day.#{$primary-stylename}-day-focused {
- @include valo-datefield-calendarpanel-day-focused-style;
- }
-
- .#{$primary-stylename}-day.#{$primary-stylename}-day-outside-range,
- .#{$primary-stylename}-day.#{$primary-stylename}-day-outside-range:hover {
- @include valo-datefield-calendarpanel-outside-range-style;
- }
-
- .#{$primary-stylename}-weekdays {
- height: round($v-unit-size * 0.7);
- color: mix(valo-font-color($v-background-color), rgba($v-background-color, .7));
-
- strong {
- font: inherit;
- font-size: ceil($v-font-size * 0.86);
- }
- }
-
- .#{$primary-stylename}-header {
- white-space: nowrap;
- }
-
- td[class*="year"],
- td[class*="month"] {
- button {
- @include appearance(none);
- border: none;
- background: transparent;
- padding: 0;
- margin: 0;
- cursor: pointer;
- color: transparent;
- font-size: 0; // For IE8, where transparent text is not possible
- width: round($v-unit-size * 0.5);
- height: round($v-unit-size * 0.67);
- outline: none;
- position: relative;
- vertical-align: middle;
-
- &:before {
- color: mix($v-background-color, valo-font-color($v-background-color));
- font-size: round($v-font-size * 1.3);
- line-height: round($v-font-size * 1.5);
-
- @if $v-animations-enabled {
- @include transition(color 200ms);
- }
- }
-
- &:hover:before {
- color: $v-focus-color;
- }
-
- &.outside-range {
- cursor: default;
- @include opacity(.3);
-
- &:hover:before {
- color: mix($v-background-color, valo-font-color($v-background-color));
- }
- }
- }
- }
-
- .v-button-prevyear:before {
- @include valo-datefield-calendarpanel-prevyear-icon-style;
- }
-
- .v-button-prevmonth:before {
- @include valo-datefield-calendarpanel-prevmonth-icon-style;
- }
-
- .v-button-nextyear:before {
- @include valo-datefield-calendarpanel-nextyear-icon-style;
- }
-
- .v-button-nextmonth:before {
- @include valo-datefield-calendarpanel-nextmonth-icon-style;
- }
-
- td.#{$primary-stylename}-month {
- width: round($v-unit-size * 4);
- cursor:default;
- @include valo-datefield-calendarpanel-month-style;
- }
- td.#{$primary-stylename}-month.header-month-year{
- cursor:pointer;
- }
-
- .#{$primary-stylename}-year td.#{$primary-stylename}-month {
- width: round($v-unit-size * 2);
- }
-
- .#{$primary-stylename}-weeknumber,
- .#{$primary-stylename}-weekdays.#{$primary-stylename}-weeknumbers td:first-child {
- width: round($v-unit-size * 0.8);
- color: mix(valo-font-color($v-background-color), rgba($v-background-color, .7));
- font-size: ceil($v-font-size * 0.86);
- display: inline-block;
- text-align: left;
- }
-
- .#{$primary-stylename}-weeknumber {
- position: relative;
- }
-
- .#{$primary-stylename}-weeknumbers .v-first:before {
- content: "";
- position: absolute;
- top: round($v-unit-size * 0.7) + round($v-unit-size/10)*2 + $v-overlay-padding-vertical;
- bottom: 0;
- left: 0;
- width: round($v-unit-size * 0.7) + $v-overlay-padding-horizontal*2;
- border-top: valo-border($color: $v-app-background-color, $strength: 0.3);
- border-right: valo-border($color: $v-app-background-color, $strength: 0.3);
- border-top-right-radius: $v-border-radius;
- border-bottom-left-radius: $v-border-radius;
- background: $v-app-background-color;
- }
-
- td.#{$primary-stylename}-time {
- width: 100%;
- font-size: ceil($v-font-size * 0.86);
-
- .v-label {
- display: inline;
- margin: 0 0.1em;
- font-weight: 400;
- }
- }
-
- }
-
-
- /**
- * Outputs the styles for an individual day element in a calendar panel.
- *
- * @group datefield
- */
- @mixin valo-datefield-calendarpanel-day-style {
- box-sizing: border-box;
- width: round($v-unit-size * 0.8);
- height: round($v-unit-size * 0.7);
- border: first-number(valo-border()) solid transparent;
- line-height: round($v-unit-size * 0.7);
- text-align: center;
- font-size: ceil($v-font-size * 0.86);
- background: $v-background-color;
-
- @if $v-border-radius > 0 {
- border-radius: ceil($v-border-radius/2);
- }
- @if $v-animations-enabled {
- @include transition(color 200ms);
- }
- }
-
-
- /**
- * Outputs the hover state styles for an individual day element in a calendar panel.
- *
- * @group datefield
- */
- @mixin valo-datefield-calendarpanel-day-hover-style {
- color: $v-selection-color;
- }
-
-
- /**
- * Outputs the styles for an individual day element, which are not part of the current month, in a calendar panel.
- *
- * @group datefield
- */
- @mixin valo-datefield-calendarpanel-day-offmonth-style {
- color: mix(valo-font-color($v-background-color), $v-background-color);
- background: transparent;
- }
-
- /**
- * Outputs the styles for an individual day element, which are outside available range.
- *
- * @group datefield
- */
- @mixin valo-datefield-calendarpanel-outside-range-style {
- color: mix(valo-font-color($v-background-color), $v-background-color);
- cursor: not-allowed;
- }
-
- /**
- * Outputs the styles for todays day element in a calendar panel.
- *
- * @group datefield
- */
- @mixin valo-datefield-calendarpanel-day-today-style {
- color: valo-font-color($v-background-color, 0.9);
- font-weight: max(600, $v-font-weight + 100);
- border-color: valo-font-color($v-background-color, 0.3);
- }
-
-
- /**
- * Outputs the styles for the selected day element in a calendar panel.
- *
- * @group datefield
- */
- @mixin valo-datefield-calendarpanel-day-selected-style {
- color: valo-font-color($v-selection-color);
- @include valo-gradient($v-selection-color);
- border: none;
- font-weight: max(600, $v-font-weight + 100);
- }
-
-
- /**
- * Outputs the focus state styles for an individual day element in a calendar panel.
- *
- * @group datefield
- */
- @mixin valo-datefield-calendarpanel-day-focused-style {
- @include valo-focus-style;
- position: relative; // Show above other cells
-
- }
-
-
- /**
- * Outputs the font icon styles for the next month button in a calendar panel.
- *
- * @group datefield
- */
- @mixin valo-datefield-calendarpanel-nextmonth-icon-style {
- font-family: ThemeIcons;
- content: "\f105";
- }
-
-
- /**
- * Outputs the font icon styles for the previous month button in a calendar panel.
- *
- * @group datefield
- */
- @mixin valo-datefield-calendarpanel-prevmonth-icon-style {
- font-family: ThemeIcons;
- content: "\f104";
- }
-
-
- /**
- * Outputs the font icon styles for the next year button in a calendar panel.
- *
- * @group datefield
- */
- @mixin valo-datefield-calendarpanel-nextyear-icon-style {
- font-family: ThemeIcons;
- content: "\f101";
- }
-
-
- /**
- * Outputs the font icon styles for the previous year button in a calendar panel.
- *
- * @group datefield
- */
- @mixin valo-datefield-calendarpanel-prevyear-icon-style {
- font-family: ThemeIcons;
- content: "\f100";
- }
-
-
- /**
- * Outputs the styles for the current month and year title element in a calendar panel.
- *
- * @group datefield
- */
- @mixin valo-datefield-calendarpanel-month-style {
- color: $v-selection-color;
- }
|