├── .editorconfig ├── .gitignore ├── .stylelintignore ├── .stylelintrc.js ├── CHANGELOG.md ├── COMPATIBILITY.md ├── LICENSE.md ├── README.md ├── _browsers.scss ├── app.scss ├── bootstrap.scss ├── components ├── _alerts.scss ├── _all.scss ├── _app.scss ├── _autocompletes.scss ├── _avatars.scss ├── _badges.scss ├── _bottom-navs.scss ├── _bottom-sheets.scss ├── _breadcrumbs.scss ├── _button-toggle.scss ├── _buttons.scss ├── _calendar-daily.scss ├── _calendar-weekly.scss ├── _cards.scss ├── _carousel.scss ├── _chips.scss ├── _content.scss ├── _counters.scss ├── _data-iterator.scss ├── _data-table.scss ├── _date-picker-header.scss ├── _date-picker-table.scss ├── _date-picker-title.scss ├── _date-picker-years.scss ├── _dialogs.scss ├── _dividers.scss ├── _expansion-panel.scss ├── _fa-icons.scss ├── _footer.scss ├── _forms.scss ├── _grid.scss ├── _icons.scss ├── _images.scss ├── _inputs.scss ├── _item-group.scss ├── _jumbotrons.scss ├── _labels.scss ├── _lists.scss ├── _menus.scss ├── _messages.scss ├── _navigation-drawer.scss ├── _overflow-buttons.scss ├── _overlay.scss ├── _pagination.scss ├── _parallax.scss ├── _pickers.scss ├── _progress-circular.scss ├── _progress-linear.scss ├── _radio-group.scss ├── _radios.scss ├── _range-sliders.scss ├── _rating.scss ├── _responsive.scss ├── _ripples.scss ├── _select.scss ├── _selection-controls.scss ├── _sheet.scss ├── _sliders.scss ├── _small-dialog.scss ├── _snackbars.scss ├── _speed-dial.scss ├── _steppers.scss ├── _subheaders.scss ├── _switch.scss ├── _system-bars.scss ├── _tables.scss ├── _tabs.scss ├── _text-fields.scss ├── _textarea.scss ├── _time-picker-clock.scss ├── _time-picker-title.scss ├── _timeline.scss ├── _toolbar.scss ├── _tooltips.scss ├── _treeview.scss └── _windows.scss ├── elements ├── _all.scss ├── _blockquote.scss ├── _code.scss ├── _global.scss ├── _headings.scss ├── _lists.scss └── _typography.scss ├── generic ├── _all.scss ├── _animations.scss ├── _colors.scss ├── _elevations.scss ├── _reset.scss └── _transitions.scss ├── main.scss ├── package-lock.json ├── package.json ├── settings ├── _all.scss ├── _colors.scss ├── _elevations.scss ├── _rtl.scss ├── _theme.scss └── _variables.scss ├── theme.scss ├── tools ├── _all.scss ├── _bootable.scss └── helpers │ ├── _all.scss │ ├── _breakpoint.scss │ ├── _colors.scss │ ├── _typography.scss │ ├── _unit.scss │ └── _value.scss └── trumps ├── _all.scss ├── _display.scss ├── _helpers.scss ├── _spacing.scss ├── _text.scss └── _transition.scss /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 4 8 | end_of_line = lf 9 | insert_final_newline = true 10 | trim_trailing_whitespace = true 11 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .sass-cache/ 3 | *.css.map 4 | /.idea 5 | /.vscode 6 | /node_modules 7 | npm-debug.log 8 | yarn-error.log 9 | -------------------------------------------------------------------------------- /.stylelintignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | public/css/ 3 | dist/ 4 | css/ 5 | -------------------------------------------------------------------------------- /.stylelintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | defaultSeverity: 'warning', 3 | extends: 'stylelint-config-sass-guidelines', 4 | rules: { 5 | 'declaration-property-value-blacklist': null, 6 | indentation: [4, { ignore: 'value' }], 7 | 'max-nesting-depth': null, 8 | 'function-parentheses-space-inside': 'never-single-line', 9 | 'max-line-length': [100, { ignore: ['comments'] }], 10 | 11 | //! Make sure this actually works... othewise just get rid of it. 12 | // "selector-class-pattern": "^(?:(?:o|c|u|t|s|is|has|_|js|qa)-)?[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*(?:__[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*)?(?:--[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*)?(?:\\[.+\\])?$", 13 | 'selector-class-pattern': null, 14 | 15 | 'selector-max-compound-selectors': null, 16 | //! I would prefer not to have this but vuetify does use some tag selectors. :( 17 | 'selector-no-qualifying-type': null, 18 | 19 | 'scss/at-mixin-pattern': null, 20 | 'scss/at-function-pattern': null, 21 | 22 | // ---- FROM OLD .stylelintrc.js ---- 23 | //* Function 24 | 'function-calc-no-unspaced-operator': true, 25 | 'function-linear-gradient-no-nonstandard-direction': true, 26 | 27 | //* Font Family 28 | 'font-family-no-duplicate-names': true, 29 | 'font-family-no-missing-generic-family-keyword': true, 30 | 31 | //* String 32 | 'string-no-newline': true, 33 | 34 | //* Unit 35 | 'unit-no-unknown': true, 36 | 37 | //* Keyframe Declaration 38 | 'keyframe-declaration-no-important': true, 39 | 40 | //* Declaration Block 41 | 'declaration-block-no-duplicate-properties': true, 42 | 'declaration-block-no-shorthand-property-overrides': true, 43 | 44 | //* Selector 45 | 'selector-pseudo-class-no-unknown': true, 46 | 'selector-type-no-unknown': true, 47 | 48 | //* Media Feature 49 | 'media-feature-name-no-unknown': true, 50 | 51 | //* Comment 52 | 'comment-no-empty': true, 53 | 54 | //* General / Sheet 55 | 'no-duplicate-at-import-rules': true, 56 | 'no-duplicate-selectors': true, 57 | 'no-empty-source': true, 58 | 'no-extra-semicolons': true, 59 | 'no-invalid-double-slash-comments': true, 60 | 61 | //* Function 62 | 'function-url-no-scheme-relative': true, 63 | 64 | //* Declaration 65 | 'declaration-block-no-redundant-longhand-properties': true, 66 | 67 | //* General / Sheet 68 | 'no-unknown-animations': true, 69 | 70 | //* Color 71 | 'color-hex-length': 'long', 72 | 73 | //* Function 74 | 'function-comma-newline-after': 'always-multi-line', 75 | 'function-comma-space-before': 'never', 76 | 'function-max-empty-lines': 0, 77 | 'function-name-case': 'lower', 78 | 'function-url-quotes': ['always', { except: ['empty'] }], 79 | 'function-whitespace-after': 'always', 80 | }, 81 | }; 82 | -------------------------------------------------------------------------------- /COMPATIBILITY.md: -------------------------------------------------------------------------------- 1 | # Compatibility 2 | 3 | ## [vuetify-scss][vuetify-scss] -> [vuetify][vuetify] compatibility chart 4 | 5 | | Version | Minimum Vuetify Version | 6 | | ------- | ----------------------- | 7 | | v1.0.0 | ~v1.1.8 | 8 | | v1.0.1 | ~v1.1.8 | 9 | | v1.0.4 | ~v1.1.10 | 10 | | v1.0.5 | ~v1.1.11 | 11 | | v1.0.6 | ~v1.1.12 | 12 | | v1.0.7 | ~v1.1.14 | 13 | | v1.0.8 | ~v1.1.15 | 14 | | v1.1.0 | ~v1.2.0 | 15 | | v1.1.1 | ~v1.2.1 | 16 | | v1.1.2 | ~v1.2.2 | 17 | | v1.1.3 | ~v1.2.4 | 18 | | v1.1.4 | ~v1.2.6 | 19 | | v1.1.5 | ~v1.2.7 | 20 | | v1.1.6 | ~v1.2.8 | 21 | | v1.1.7 | ~v1.2.10 | 22 | | v1.2.3 | ~v1.3.0 | 23 | | v1.2.4 | ~v1.3.2 | 24 | | v1.2.7 | ~v1.3.3 | 25 | | v1.2.9 | ~v1.3.4 | 26 | | v1.2.10 | ~v1.3.5 | 27 | | v1.2.11 | ~v1.3.6 | 28 | | v1.2.12 | ~v1.3.8 | 29 | | v1.2.13 | ~v1.3.9 | 30 | | v1.2.14 | ~v1.3.10 | 31 | | v1.2.15 | ~v1.3.13 | 32 | 33 | 34 | 35 | 36 | | v1.3.6 | ~v1.4.4 | 37 | | v1.4.0 | ~v1.5.0 | 38 | 39 | [vuetify]: https://vuetifyjs.com/ 40 | [vuetify-scss]: https://github.com/nmsmith22389/vuetify-scss/ 41 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | 2 | The MIT License (MIT) 3 | 4 | Copyright (c) 2018 Neil Smith 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in all 14 | copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 22 | SOFTWARE. 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vuetify-scss 2 | 3 | [![npm](https://img.shields.io/npm/v/vuetify-scss.svg?label=version)](https://www.npmjs.com/package/vuetify-scss) 4 | [![npm](https://img.shields.io/npm/dt/vuetify-scss.svg)](https://www.npmjs.com/package/vuetify-scss) 5 | [![GitHub issues](https://img.shields.io/github/issues/nmsmith22389/vuetify-scss.svg)](https://github.com/nmsmith22389/vuetify-scss/issues) 6 | 7 | All of the Vuetify styles converted into Sass. **No more Stylus!** 🎉 8 | 9 | - [Getting Started](#getting-started) 10 | - [Prerequisites](#prerequisites) 11 | - [Installing](#installing) 12 | - [Usage](#usage) 13 | - [Changing variables](#changing-variables) 14 | - [Vuetify Compatibility](#vuetify-compatibility) 15 | - [Added / Changed Variables](#added--changed-variables) 16 | - [Helper / Utility Mixins and Functions](#helper--utility-mixins-and-functions) 17 | - [Info](#info) 18 | - [Changes](#changes) 19 | - [Versioning](#versioning) 20 | - [Authors](#authors) 21 | - [License](#license) 22 | - [Acknowledgments](#acknowledgments) 23 | 24 | ## Getting Started 25 | 26 | ### Prerequisites 27 | 28 | Of course, to use `vuetify-scss` you need to install [Vuetify][vuetify]. 29 | 30 | ```bash 31 | npm install vuetify --save-dev 32 | ``` 33 | 34 | ### Installing 35 | 36 | To start using `vuetify-scss` you first need to install it using npm. 37 | 38 | ```bash 39 | npm install vuetify-scss --save-dev 40 | ``` 41 | 42 | After installing, import `vuetify-scss`'s `.scss` files into your own. 43 | 44 | ```scss 45 | @import '~vuetify-scss'; 46 | ``` 47 | 48 | Thats's it! Now you have all the fun of [Vuetify][vuetify] with the awesomeness of Sass! 49 | 50 | ## Usage 51 | 52 | ### Changing variables 53 | 54 | To change the default variables, simply define them before `vuetify-scss` is imported. 55 | 56 | Example: 57 | ```scss 58 | // Your own variables file where you override the 59 | // default Vuetify variables. 60 | @import 'variables'; 61 | 62 | // Then import vuetify-scss. 63 | @import '~vuetify-scss'; 64 | ``` 65 | 66 | ### Vuetify Compatibility 67 | To find out which version of [vuetify-scss][vuetify-scss] corresponds to which version of [vuetify][vuetify], see the [compatibility table][compatibility]. 68 | 69 | ### Added / Changed Variables 70 | 71 | > **vuetify-scss** has a few things that have been added or changed when compared to the styles in Vuetify. *(such as variables and mixins)* 72 | 73 | Here is a list of the added / changed variables: 74 | 75 | | Variable | Default Value | Description | 76 | | --------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | 77 | | `$font-size-root` | `16px` | This is the value the [`rem()`](#helper--utility-mixins-and-functions) mixin is based on when converting pixel units to rem. Defines the HTML tag font-size.
*To change how the body font-size appears please refer to `$body-font-size`.* | 78 | | `$body-font-size` | `14px` | This variable dictates the body font size style. | 79 | | `$heading-style-tags` | `false` | If true, also styles the `h1` - `h6` tags in addition to the `.display-1`, `.headline`, etc. tags. | 80 | | `$values-use-rem` | `true` | If true, all measurements in the styles are converted to rem units, otherwise styles use px units. | 81 | 82 | ### Helper / Utility Mixins and Functions 83 | 84 | **vuetify-scss** also adds some helper / utility mixins and functions that you can use to help when writing your own styles. 85 | 86 | | Mixin / Function | Example | Description | 87 | | ---------------------------- | ------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------ | 88 | | `rem(value)` | `font-size: rem(14px);` | Converts `value` into rem or rem/px units into px if `$values-use-rem` is false.
Also accepts lists *(i.e. `rem(6px 12px 24px 48px)`)*. | 89 | | `get-color(palette, shade)` | `bg-color: get-color($blue, darken-1);` | Gets a color from a color palette.
Also takes the Material Design form *(i.e. `get-color(blue, 600)`)*. | 90 | | `map-deep-get(map, keys...)` | `color: map-deep-get($material-light, text, primary);` | Gets a value from a nested map. | 91 | | `breakpoint(breakpoint)` | `@include breakpoint(md-and-up) { /* styles */ }` | A shortcut mixin to have a style only apply to a certain breakpoint. | 92 | 93 | 94 | ## Info 95 | 96 | ### Changes 97 | To see a list of each version and it's changes, check out the [releases][releases] page. 98 | 99 | ### Versioning 100 | 101 | This project uses the [Angular commit convention][angular convention] and is automatically generated by [conventional-changelog][conventional changelog]. 102 | 103 | We use [SemVer][semver] for versioning. For the versions available, see the [tags on this repository][tags]. 104 | 105 | ### Authors 106 | 107 | * **Neil Smith** - *Creator* 108 | 109 | See also the list of [contributors][contributors] who participated in this project. 110 | 111 | ### License 112 | 113 | This project is licensed under the MIT License - see the [LICENSE.md][license] file for details 114 | 115 | ### Acknowledgments 116 | 117 | All thanks goes to [Vuetify][vuetify] for their amazing framework! 118 | 119 | [vuetify]: https://vuetifyjs.com/ 120 | [vuetify-scss]: https://github.com/nmsmith22389/vuetify-scss/ 121 | [compatibility]: COMPATIBILITY.md 122 | [releases]: https://github.com/nmsmith22389/vuetify-scss/releases 123 | [tags]: https://github.com/nmsmith22389/vuetify-scss/tags 124 | [contributors]: https://github.com/nmsmith22389/vuetify-scss/graphs/contributors 125 | [license]: LICENSE.md 126 | [angular convention]: https://github.com/conventional-changelog/conventional-changelog/blob/master/packages/conventional-changelog-angular/README.md 127 | [conventional changelog]: https://github.com/conventional-changelog/conventional-changelog 128 | [semver]: http://semver.org/ 129 | -------------------------------------------------------------------------------- /_browsers.scss: -------------------------------------------------------------------------------- 1 | @mixin firefox() { 2 | @-moz-document url-prefix() { 3 | @content; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /app.scss: -------------------------------------------------------------------------------- 1 | @import 'settings/all'; 2 | @import 'generic/all'; 3 | @import 'tools/all'; 4 | @import 'elements/all'; 5 | @import 'trumps/all'; 6 | -------------------------------------------------------------------------------- /bootstrap.scss: -------------------------------------------------------------------------------- 1 | @import 'settings/all'; 2 | @import 'tools/all'; 3 | -------------------------------------------------------------------------------- /components/_alerts.scss: -------------------------------------------------------------------------------- 1 | @import '../bootstrap'; 2 | 3 | .v-alert { 4 | border-radius: $alert-border-radius; 5 | border-style: solid; 6 | border-width: $alert-border-width; 7 | color: #ffffff; 8 | display: flex; 9 | font-size: $alert-font-size; 10 | margin: $alert-margin; 11 | padding: $alert-padding; 12 | position: relative; 13 | transition: $primary-transition; 14 | 15 | .v-alert__icon.v-icon, 16 | &__dismissible .v-icon { 17 | align-self: center; 18 | color: $alert-icon-color; 19 | font-size: $alert-icon-font-size; 20 | } 21 | 22 | &--outline .v-icon { 23 | color: inherit !important; 24 | } 25 | 26 | &__icon { 27 | margin-right: $alert-padding; 28 | } 29 | 30 | &__dismissible { 31 | align-self: flex-start; 32 | color: inherit; 33 | margin-left: $alert-padding; 34 | margin-right: 0; 35 | text-decoration: none; 36 | transition: $primary-transition; 37 | user-select: none; 38 | 39 | &:hover { 40 | opacity: 0.8; 41 | } 42 | } 43 | 44 | &--no-icon { 45 | .v-alert__icon { 46 | display: none; 47 | } 48 | } 49 | 50 | > div { 51 | align-self: center; 52 | flex: 1 1; 53 | } 54 | 55 | @media screen and (max-width: map-get($grid-breakpoints, sm)) { 56 | &__icon { 57 | display: none; 58 | } 59 | } 60 | } 61 | 62 | // Double .v-alert is intended - it increases css specificity 63 | // to properly set the border color where alert has set color 64 | // with modifier (for example "red lighten-2") 65 | .v-alert.v-alert { 66 | border-color: map-get($material-light, dividers) !important; 67 | 68 | &--outline { 69 | border: $alert-outline-border-width $alert-outline-border-style currentColor !important; 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /components/_all.scss: -------------------------------------------------------------------------------- 1 | @import 'app'; 2 | @import 'alerts'; 3 | @import 'autocompletes'; 4 | @import 'avatars'; 5 | @import 'badges'; 6 | @import 'bottom-navs'; 7 | @import 'bottom-sheets'; 8 | @import 'breadcrumbs'; 9 | @import 'button-toggle'; 10 | @import 'buttons'; 11 | @import 'calendar-daily'; 12 | @import 'calendar-weekly'; 13 | @import 'cards'; 14 | @import 'carousel'; 15 | @import 'chips'; 16 | @import 'content'; 17 | @import 'counters'; 18 | @import 'data-iterator'; 19 | @import 'data-table'; 20 | @import 'date-picker-header'; 21 | @import 'date-picker-table'; 22 | @import 'date-picker-title'; 23 | @import 'date-picker-years'; 24 | @import 'dialogs'; 25 | @import 'dividers'; 26 | @import 'expansion-panel'; 27 | // @import 'fa-icons'; 28 | @import 'footer'; 29 | @import 'forms'; 30 | @import 'grid'; 31 | @import 'icons'; 32 | @import 'images'; 33 | @import 'inputs'; 34 | @import 'item-group'; 35 | @import 'jumbotrons'; 36 | @import 'labels'; 37 | @import 'lists'; 38 | @import 'menus'; 39 | @import 'messages'; 40 | @import 'navigation-drawer'; 41 | @import 'overflow-buttons'; 42 | @import 'overlay'; 43 | @import 'pagination'; 44 | @import 'parallax'; 45 | @import 'pickers'; 46 | @import 'progress-circular'; 47 | @import 'progress-linear'; 48 | @import 'radio-group'; 49 | @import 'radios'; 50 | @import 'range-sliders'; 51 | @import 'rating'; 52 | @import 'responsive'; 53 | @import 'ripples'; 54 | @import 'select'; 55 | @import 'selection-controls'; 56 | @import 'sliders'; 57 | @import 'small-dialog'; 58 | @import 'snackbars'; 59 | @import 'speed-dial'; 60 | @import 'steppers'; 61 | @import 'subheaders'; 62 | @import 'switch'; 63 | @import 'system-bars'; 64 | @import 'tables'; 65 | @import 'tabs'; 66 | @import 'text-fields'; 67 | @import 'textarea'; 68 | @import 'time-picker-clock'; 69 | @import 'time-picker-title'; 70 | @import 'timeline'; 71 | @import 'toolbar'; 72 | @import 'tooltips'; 73 | @import 'treeview'; 74 | @import 'windows'; 75 | -------------------------------------------------------------------------------- /components/_app.scss: -------------------------------------------------------------------------------- 1 | @import '../bootstrap'; 2 | @import '../browsers'; 3 | @import '../theme'; 4 | 5 | .application { 6 | display: flex; 7 | 8 | a { 9 | cursor: pointer; 10 | } 11 | 12 | &--is-rtl { 13 | direction: rtl; 14 | } 15 | 16 | &--wrap { 17 | backface-visibility: hidden; 18 | display: flex; 19 | flex: 1 1 auto; 20 | flex-direction: column; 21 | max-width: 100%; 22 | min-height: 100vh; 23 | position: relative; 24 | } 25 | } 26 | 27 | @mixin application($material) { 28 | background: map-get($material, background); 29 | color: map-deep-get($material, text, primary); 30 | 31 | .text { 32 | &--primary { 33 | color: map-deep-get($material, text, primary) !important; 34 | } 35 | 36 | &--secondary { 37 | color: map-deep-get($material, text, secondary) !important; 38 | } 39 | 40 | &--disabled { 41 | color: map-deep-get($material, text, disabled) !important; 42 | } 43 | } 44 | } 45 | 46 | @include theme(light, 'application') { 47 | @include application($material-light); 48 | } 49 | 50 | @include theme(dark, 'application') { 51 | @include application($material-dark); 52 | } 53 | 54 | @include firefox() { 55 | @media print { 56 | .application { 57 | display: block; 58 | 59 | &--wrap { 60 | display: block; 61 | } 62 | } 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /components/_autocompletes.scss: -------------------------------------------------------------------------------- 1 | .v-autocomplete { 2 | &.v-input > .v-input__control > .v-input__slot { 3 | cursor: text; 4 | } 5 | 6 | input { 7 | align-self: center; 8 | } 9 | 10 | &--is-selecting-index { 11 | input { 12 | opacity: 0; 13 | } 14 | } 15 | 16 | // When a single select, does not have 17 | // selections padding 18 | &.v-text-field--enclosed:not(.v-text-field--solo):not(.v-text-field--single-line) { 19 | .v-select__slot > input { 20 | margin-top: rem(24px); 21 | } 22 | } 23 | 24 | &:not(.v-input--is-disabled).v-select.v-text-field { 25 | input { 26 | pointer-events: inherit; 27 | } 28 | } 29 | 30 | &__content.v-menu__content { 31 | border-radius: 0; 32 | 33 | .v-card { 34 | border-radius: 0; 35 | } 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /components/_avatars.scss: -------------------------------------------------------------------------------- 1 | @import '../bootstrap'; 2 | 3 | .v-avatar { 4 | align-items: center; 5 | border-radius: 50%; 6 | display: inline-flex; 7 | justify-content: center; 8 | position: relative; 9 | text-align: center; 10 | vertical-align: middle; 11 | 12 | img, 13 | .v-icon, 14 | .v-image { 15 | border-radius: 50%; 16 | display: inline-flex; 17 | height: inherit; 18 | width: inherit; 19 | } 20 | 21 | &--tile { 22 | border-radius: 0; 23 | 24 | img, 25 | .v-icon, 26 | .v-image { 27 | border-radius: 0; 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /components/_badges.scss: -------------------------------------------------------------------------------- 1 | @import '../bootstrap'; 2 | 3 | @mixin v-badge-rtl { 4 | &__badge { 5 | left: -$badge-width; 6 | right: initial; 7 | } 8 | 9 | &--overlap { 10 | .v-badge__badge { 11 | left: rem(-8px); 12 | right: initial; 13 | } 14 | 15 | &.v-badge--left { 16 | .v-badge__badge { 17 | left: initial; 18 | right: rem(-8px); 19 | } 20 | } 21 | } 22 | 23 | &--left { 24 | .v-badge__badge { 25 | left: initial; 26 | right: -$badge-width; 27 | } 28 | } 29 | } 30 | 31 | @include rtl('v-badge') { 32 | @include v-badge-rtl; 33 | } 34 | 35 | .v-badge { 36 | display: inline-block; 37 | position: relative; 38 | 39 | &__badge { 40 | align-items: center; 41 | border-radius: $badge-border-radius; 42 | color: $badge-color; 43 | display: flex; 44 | flex-flow: row wrap; 45 | font-size: $badge-font-size; 46 | height: $badge-height; 47 | justify-content: center; 48 | position: absolute; 49 | right: -($badge-width); 50 | top: -($badge-height / 2); 51 | transition: $primary-transition; 52 | width: $badge-width; 53 | 54 | .v-icon { 55 | font-size: $badge-font-size; 56 | } 57 | } 58 | 59 | &--overlap { 60 | .v-badge__badge { 61 | right: rem(-8px); 62 | top: rem(-8px); 63 | } 64 | 65 | &.v-badge--left { 66 | .v-badge__badge { 67 | left: rem(-8px); 68 | right: initial; 69 | } 70 | } 71 | 72 | &.v-badge--bottom { 73 | .v-badge__badge { 74 | bottom: rem(-8px); 75 | top: initial; 76 | } 77 | } 78 | } 79 | 80 | &--left { 81 | .v-badge__badge { 82 | left: -($badge-width); 83 | } 84 | } 85 | 86 | &--bottom { 87 | .v-badge__badge { 88 | bottom: -($badge-height / 2); 89 | top: initial; 90 | } 91 | } 92 | } 93 | -------------------------------------------------------------------------------- /components/_bottom-navs.scss: -------------------------------------------------------------------------------- 1 | @import '../bootstrap'; 2 | @import '../theme'; 3 | 4 | @mixin v-bottom-nav($material) { 5 | background-color: map-get($material, cards); 6 | 7 | .v-btn:not(.v-btn--active) { 8 | color: map-deep-get($material, text, secondary) !important; 9 | } 10 | } 11 | 12 | @include theme(light, 'v-bottom-nav') { 13 | @include v-bottom-nav($material-light); 14 | } 15 | 16 | @include theme(dark, 'v-bottom-nav') { 17 | @include v-bottom-nav($material-dark); 18 | } 19 | 20 | .v-item-group.v-bottom-nav { 21 | bottom: 0; 22 | box-shadow: rem(0 3px 14px 2px) rgba(#000000, 0.12); 23 | display: flex; 24 | justify-content: center; 25 | left: 0; 26 | transform: translate(0, rem(60px)); 27 | transition: all 0.4s map-get($transition, swing); 28 | width: 100%; 29 | 30 | &--absolute { 31 | position: absolute; 32 | } 33 | 34 | &--active { 35 | transform: translate(0, 0); 36 | } 37 | 38 | &--fixed { 39 | position: fixed; 40 | z-index: 4; 41 | } 42 | 43 | .v-btn { 44 | background: transparent !important; 45 | border-radius: 0; 46 | box-shadow: none !important; 47 | // https://github.com/vuetifyjs/vuetify/issues/4643 48 | flex-shrink: 1; 49 | font-weight: font-weight(regular); 50 | height: 100%; 51 | margin: 0; 52 | max-width: rem(168px); 53 | min-width: rem(80px); 54 | padding: rem(8px 12px 10px); 55 | text-transform: none; 56 | width: 100%; 57 | 58 | .v-btn__content { 59 | flex-direction: column-reverse; 60 | font-size: rem(12px); 61 | white-space: nowrap; 62 | will-change: font-size; 63 | 64 | i.v-icon { 65 | color: inherit; 66 | margin-bottom: rem(4px); 67 | transition: all 0.4s cubic-bezier(0.25, 0.8, 0.5, 1); 68 | } 69 | 70 | span { 71 | line-height: 1; 72 | } 73 | } 74 | 75 | &--active { 76 | padding-top: rem(6px); 77 | 78 | &::before { 79 | background-color: transparent; 80 | } 81 | 82 | .v-btn__content { 83 | font-size: rem(14px); 84 | 85 | .v-icon { 86 | transform: none; 87 | } 88 | } 89 | } 90 | } 91 | 92 | &--shift { 93 | .v-btn__content { 94 | font-size: rem(14px); 95 | } 96 | 97 | .v-btn { 98 | max-width: rem(96px); 99 | min-width: rem(56px); 100 | transition: all 0.3s; 101 | 102 | &--active { 103 | max-width: rem(168px); 104 | min-width: rem(96px); 105 | } 106 | } 107 | } 108 | } 109 | 110 | .v-bottom-nav--shift { 111 | &:not(.v-btn--active) .v-btn__content { 112 | .v-icon { 113 | transform: scale(1, 1) translate(0, rem(8px)); 114 | } 115 | 116 | > span:not(.v-badge) { 117 | color: transparent; 118 | } 119 | } 120 | } 121 | -------------------------------------------------------------------------------- /components/_bottom-sheets.scss: -------------------------------------------------------------------------------- 1 | @import '../bootstrap'; 2 | @import '../theme'; 3 | 4 | .v-bottom-sheet.v-dialog { 5 | align-self: flex-end; 6 | border-radius: 0; 7 | flex: 1 0 100%; 8 | margin: 0; 9 | min-width: 100%; 10 | overflow: visible; 11 | transition: 0.3s map-get($transition, fast-in-fast-out); 12 | 13 | &.v-bottom-sheet--inset { 14 | max-width: 70%; 15 | min-width: 0; 16 | 17 | @include breakpoint(xs-only) { 18 | max-width: none; 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /components/_breadcrumbs.scss: -------------------------------------------------------------------------------- 1 | @import '../bootstrap'; 2 | @import '../theme'; 3 | 4 | @mixin v-breadcrumbs($material) { 5 | .v-breadcrumbs__divider, 6 | .v-breadcrumbs__item--disabled { 7 | color: map-deep-get($material, text, disabled); 8 | } 9 | } 10 | 11 | @include theme(light, 'v-breadcrumbs') { 12 | @include v-breadcrumbs($material-light); 13 | } 14 | @include theme(dark, 'v-breadcrumbs') { 15 | @include v-breadcrumbs($material-dark); 16 | } 17 | 18 | .v-breadcrumbs { 19 | align-items: center; 20 | display: flex; 21 | flex: $breadcrumbs-flex; 22 | flex-wrap: wrap; 23 | list-style-type: none; 24 | margin: $breadcrumbs-margin; 25 | padding: $breadcrumbs-padding; 26 | 27 | li { 28 | align-items: center; 29 | display: inline-flex; 30 | font-size: $breadcrumbs-item-font-size; 31 | 32 | .v-icon { 33 | font-size: $breadcrumbs-item-large-font-size; 34 | } 35 | 36 | &:nth-child(even) { 37 | padding: $breadcrumbs-even-child-padding; 38 | } 39 | } 40 | 41 | &--large { 42 | li { 43 | font-size: $breadcrumbs-item-large-font-size; 44 | 45 | .v-icon { 46 | font-size: $breadcrumbs-item-large-font-size; 47 | } 48 | } 49 | } 50 | 51 | &__item { 52 | align-items: center; 53 | display: inline-flex; 54 | text-decoration: none; 55 | transition: $primary-transition; 56 | 57 | &--disabled { 58 | pointer-events: none; 59 | } 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /components/_button-toggle.scss: -------------------------------------------------------------------------------- 1 | @import '../bootstrap'; 2 | @import '../theme'; 3 | 4 | // Theme 5 | @mixin v-btn-toggle($material) { 6 | background: map-get($material, cards); 7 | 8 | .v-btn { 9 | color: map-deep-get($material, text, primary); 10 | } 11 | 12 | &:not(.v-btn-toggle--only-child) { 13 | .v-btn { 14 | &.v-btn--active:not(:last-child) { 15 | border-right-color: map-deep-get($material, buttons, disabled); 16 | } 17 | } 18 | } 19 | } 20 | 21 | @include theme(light, 'v-btn-toggle') { 22 | @include v-btn-toggle($material-light); 23 | } 24 | 25 | @include theme(dark, 'v-btn-toggle') { 26 | @include v-btn-toggle($material-dark); 27 | } 28 | 29 | .v-btn-toggle { 30 | border-radius: rem(2px); 31 | display: inline-flex; 32 | transition: $primary-transition; 33 | will-change: background, box-shadow; 34 | 35 | .v-btn { 36 | border-radius: 0; 37 | justify-content: center; 38 | margin: 0; 39 | min-width: auto; 40 | opacity: 0.4; 41 | padding: rem(0 8px); 42 | width: auto; 43 | 44 | &:not(:last-child) { 45 | border-right: rem(1px) solid transparent; 46 | } 47 | 48 | &::after { 49 | display: none; 50 | } 51 | 52 | &.v-btn--active { 53 | opacity: 1; 54 | } 55 | 56 | span + .v-icon { 57 | font-size: initial; 58 | margin-left: rem(10px); 59 | } 60 | 61 | &:first-child { 62 | border-radius: rem(2px 0 0 2px); 63 | } 64 | 65 | &:last-child { 66 | border-radius: rem(0 2px 2px 0); 67 | } 68 | } 69 | 70 | &--selected { 71 | @include elevation(2); 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /components/_calendar-daily.scss: -------------------------------------------------------------------------------- 1 | @import '../bootstrap'; 2 | @import '../theme'; 3 | 4 | @mixin v-calendar-daily($material) { 5 | background-color: map-deep-get($material, calendar, background-color); 6 | 7 | .v-calendar-daily__intervals-head { 8 | border-right: map-deep-get($material, calendar, line-color) 1px solid; 9 | } 10 | 11 | .v-calendar-daily_head-day { 12 | border-bottom: map-deep-get($material, calendar, line-color) 1px solid; 13 | border-right: map-deep-get($material, calendar, line-color) 1px solid; 14 | color: map-deep-get($material, calendar, text-color); 15 | 16 | &.v-past { 17 | .v-calendar-daily_head-weekday, 18 | .v-calendar-daily_head-day-label { 19 | color: map-deep-get($material, calendar, past-color); 20 | } 21 | } 22 | } 23 | 24 | .v-calendar-daily__intervals-body { 25 | border-right: map-deep-get($material, calendar, line-color) 1px solid; 26 | 27 | .v-calendar-daily__interval-text { 28 | color: map-deep-get($material, calendar, interval-color); 29 | } 30 | } 31 | 32 | .v-calendar-daily__day { 33 | border-bottom: map-deep-get($material, calendar, interval-line-color) 1px solid; 34 | border-right: map-deep-get($material, calendar, interval-line-color) 1px solid; 35 | } 36 | 37 | .v-calendar-daily__day-interval { 38 | border-top: map-deep-get($material, calendar, interval-line-color) 1px solid; 39 | 40 | &:first-child { 41 | border-top: none !important; 42 | } 43 | } 44 | } 45 | 46 | @include theme(light, 'v-calendar-daily') { 47 | @include v-calendar-daily($material-light); 48 | } 49 | 50 | @include theme(dark, 'v-calendar-daily') { 51 | @include v-calendar-daily($material-dark); 52 | } 53 | 54 | .v-calendar-daily { 55 | display: flex; 56 | flex-direction: column; 57 | height: 100%; 58 | overflow: hidden; 59 | } 60 | 61 | .v-calendar-daily__head { 62 | display: flex; 63 | flex: none; 64 | } 65 | 66 | .v-calendar-daily__intervals-head { 67 | flex: none; 68 | width: $calendar-daily-interval-gutter-width; 69 | } 70 | 71 | .v-calendar-daily_head-day { 72 | flex: 1 1 auto; 73 | width: 0; 74 | } 75 | 76 | .v-calendar-daily_head-weekday { 77 | font-size: $calendar-daily-weekday-font-size; 78 | padding: $calendar-daily-weekday-padding; 79 | user-select: none; 80 | } 81 | 82 | .v-calendar-daily_head-day-label { 83 | cursor: pointer; 84 | font-size: $calendar-daily-day-font-size; 85 | line-height: $calendar-daily-day-line-height; 86 | padding: $calendar-daily-day-padding; 87 | user-select: none; 88 | 89 | &:hover { 90 | text-decoration: underline; 91 | } 92 | } 93 | 94 | .v-calendar-daily__body { 95 | display: flex; 96 | flex: 1 1 60%; 97 | flex-direction: column; 98 | overflow: hidden; 99 | position: relative; 100 | } 101 | 102 | .v-calendar-daily__scroll-area { 103 | align-items: flex-start; 104 | display: flex; 105 | flex: 1 1 auto; 106 | overflow-y: scroll; 107 | } 108 | 109 | .v-calendar-daily__pane { 110 | align-items: flex-start; 111 | display: flex; 112 | flex: none; 113 | overflow-y: hidden; 114 | width: 100%; 115 | } 116 | 117 | .v-calendar-daily__day-container { 118 | display: flex; 119 | flex: 1; 120 | height: 100%; 121 | width: 100%; 122 | } 123 | 124 | .v-calendar-daily__intervals-body { 125 | flex: none; 126 | user-select: none; 127 | width: $calendar-daily-interval-gutter-width; 128 | } 129 | 130 | .v-calendar-daily__interval { 131 | border-bottom: none; 132 | text-align: center; 133 | } 134 | 135 | .v-calendar-daily__interval-text { 136 | display: block; 137 | font-size: $calendar-daily-interval-gutter-font-size; 138 | position: relative; 139 | top: $calendar-daily-interval-gutter-top; 140 | } 141 | 142 | .v-calendar-daily__day { 143 | flex: 1; 144 | position: relative; 145 | width: 0; 146 | } 147 | -------------------------------------------------------------------------------- /components/_calendar-weekly.scss: -------------------------------------------------------------------------------- 1 | @import '../bootstrap'; 2 | @import '../theme'; 3 | 4 | @mixin v-calendar-weekly($material) { 5 | background-color: map-deep-get($material, calendar, background-color); 6 | 7 | .v-calendar-weekly__head-weekday { 8 | border-right: map-deep-get($material, calendar, line-color) 1px solid; 9 | color: map-deep-get($material, calendar, text-color); 10 | 11 | &.v-past { 12 | color: map-deep-get($material, calendar, past-color); 13 | } 14 | 15 | &.v-outside { 16 | background-color: map-deep-get($material, calendar, outside-background-color); 17 | } 18 | } 19 | 20 | .v-calendar-weekly__day { 21 | border-bottom: map-deep-get($material, calendar, line-color) 1px solid; 22 | border-right: map-deep-get($material, calendar, line-color) 1px solid; 23 | color: map-deep-get($material, calendar, text-color); 24 | 25 | &.v-outside { 26 | background-color: map-deep-get($material, calendar, outside-background-color); 27 | } 28 | } 29 | } 30 | 31 | @include theme(light, 'v-calendar-weekly') { 32 | @include v-calendar-weekly($material-light); 33 | } 34 | 35 | @include theme(dark, 'v-calendar-weekly') { 36 | @include v-calendar-weekly($material-dark); 37 | } 38 | 39 | .v-calendar-weekly { 40 | display: flex; 41 | flex-direction: column; 42 | height: 100%; 43 | width: 100%; 44 | } 45 | 46 | .v-calendar-weekly__head { 47 | display: flex; 48 | user-select: none; 49 | } 50 | 51 | .v-calendar-weekly__head-weekday { 52 | flex: 1 0 rem(20px); 53 | font-size: $calendar-weekly-weekday-font-size; 54 | padding: $calendar-weekly-weekday-padding; 55 | user-select: none; 56 | } 57 | 58 | .v-calendar-weekly__week { 59 | display: flex; 60 | flex: 1; 61 | } 62 | 63 | .v-calendar-weekly__day { 64 | flex: 1; 65 | overflow: hidden; 66 | padding: $calendar-weekly-day-padding; 67 | position: relative; 68 | user-select: none; 69 | width: 0; 70 | 71 | &.v-present { 72 | .v-calendar-weekly__day-label { 73 | border: 1px solid currentColor; 74 | } 75 | 76 | .v-calendar-weekly__day-month { 77 | color: currentColor; 78 | } 79 | } 80 | } 81 | 82 | .v-calendar-weekly__day-label { 83 | border-radius: $calendar-weekly-day-label-radius; 84 | box-shadow: none; 85 | cursor: pointer; 86 | height: $calendar-weekly-day-label-size; 87 | left: 0; 88 | line-height: $calendar-weekly-day-label-size; 89 | position: absolute; 90 | text-align: center; 91 | text-decoration: none; 92 | top: 0; 93 | user-select: none; 94 | width: $calendar-weekly-day-label-size; 95 | 96 | &:hover { 97 | text-decoration: underline; 98 | } 99 | } 100 | 101 | .v-calendar-weekly__day-month { 102 | box-shadow: none; 103 | height: $calendar-weekly-day-label-size; 104 | left: $calendar-weekly-day-month-left; 105 | line-height: $calendar-weekly-day-label-size; 106 | position: absolute; 107 | text-decoration: none; 108 | top: 0; 109 | user-select: none; 110 | } 111 | -------------------------------------------------------------------------------- /components/_cards.scss: -------------------------------------------------------------------------------- 1 | @import '../bootstrap'; 2 | @import '../theme'; 3 | 4 | // Theme 5 | @mixin v-card($material) { 6 | background-color: map-get($material, cards); 7 | border-color: map-get($material, cards); 8 | color: map-deep-get($material, text, primary); 9 | } 10 | 11 | @include theme(light, 'v-card') { 12 | @include v-card($material-light); 13 | } 14 | 15 | @include theme(dark, 'v-card') { 16 | @include v-card($material-dark); 17 | } 18 | 19 | .v-card { 20 | @include elevation(2); 21 | text-decoration: none; 22 | 23 | > *:first-child:not(.v-btn):not(.v-chip) { 24 | border-top-left-radius: inherit; 25 | border-top-right-radius: inherit; 26 | } 27 | 28 | > *:last-child:not(.v-btn):not(.v-chip) { 29 | border-bottom-left-radius: inherit; 30 | border-bottom-right-radius: inherit; 31 | } 32 | 33 | &--flat { 34 | @include elevation(0); 35 | } 36 | 37 | &--hover { 38 | cursor: pointer; 39 | transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); 40 | transition-property: box-shadow; 41 | 42 | &:hover { 43 | @include elevation(8); 44 | } 45 | } 46 | 47 | &__title { 48 | align-items: center; 49 | display: flex; 50 | flex-wrap: wrap; 51 | padding: rem(16px); 52 | 53 | &--primary { 54 | padding-top: rem(24px); 55 | } 56 | } 57 | 58 | &__text { 59 | padding: rem(16px); 60 | width: 100%; 61 | } 62 | 63 | &__actions { 64 | align-items: center; 65 | display: flex; 66 | padding: rem(8px); 67 | 68 | > *, 69 | .v-btn { 70 | margin: 0; 71 | } 72 | 73 | .v-btn + .v-btn { 74 | margin-left: rem(8px); 75 | } 76 | } 77 | } 78 | -------------------------------------------------------------------------------- /components/_carousel.scss: -------------------------------------------------------------------------------- 1 | @import '../bootstrap'; 2 | 3 | @mixin v-carousel-rtl { 4 | &__prev { 5 | left: auto; 6 | right: rem(5px); 7 | } 8 | 9 | &__next { 10 | left: rem(5px); 11 | right: auto; 12 | } 13 | } 14 | 15 | @include rtl('v-carousel') { 16 | @include v-carousel-rtl; 17 | } 18 | 19 | .v-carousel { 20 | @include elevation(2); 21 | overflow: hidden; 22 | position: relative; 23 | width: 100%; 24 | 25 | &__prev, 26 | &__next { 27 | position: absolute; 28 | top: 50%; 29 | transform: translateY(-50%); 30 | z-index: 1; 31 | 32 | .v-btn { 33 | height: auto; 34 | margin: 0; 35 | width: auto; 36 | 37 | i { 38 | font-size: rem(48px); 39 | } 40 | 41 | &:hover { 42 | background: none; 43 | } 44 | } 45 | } 46 | 47 | &__prev { 48 | left: rem(5px); 49 | } 50 | 51 | &__next { 52 | right: rem(5px); 53 | } 54 | 55 | &__controls { 56 | align-items: center; 57 | background: rgba(0, 0, 0, 0.5); 58 | bottom: 0; 59 | display: flex; 60 | height: rem(50px); 61 | justify-content: center; 62 | left: 0; 63 | list-style-type: none; 64 | position: absolute; 65 | width: 100%; 66 | z-index: 1; 67 | 68 | > .v-item-group { 69 | flex: 0 1 auto; 70 | } 71 | 72 | &__item { 73 | margin: rem(0 8px) !important; 74 | 75 | .v-icon { 76 | opacity: 0.5; 77 | transition: $primary-transition; 78 | } 79 | 80 | &--active { 81 | .v-icon { 82 | opacity: 1; 83 | vertical-align: middle; 84 | } 85 | } 86 | 87 | &:hover { 88 | background: none; 89 | 90 | .v-icon { 91 | opacity: 0.8; 92 | } 93 | } 94 | } 95 | } 96 | } 97 | -------------------------------------------------------------------------------- /components/_chips.scss: -------------------------------------------------------------------------------- 1 | @import '../bootstrap'; 2 | @import '../theme'; 3 | 4 | @mixin v-chip($material) { 5 | background: map-deep-get($material, chips, background); 6 | color: map-deep-get($material, chips, color); 7 | 8 | &--disabled { 9 | color: map-deep-get($material, text, disabled); 10 | } 11 | } 12 | 13 | @mixin v-chip-rtl { 14 | &__close { 15 | margin: $chip-close-margin-rtl; 16 | } 17 | 18 | &--removable { 19 | .v-chip__content { 20 | padding: $chip-removable-padding-rtl; 21 | } 22 | } 23 | 24 | &--select-multi { 25 | margin: $chip-margin 0 $chip-margin $chip-margin; 26 | } 27 | 28 | .v-avatar { 29 | margin-left: rem(8px); 30 | margin-right: rem(-12px); 31 | } 32 | 33 | .v-icon { 34 | &--right { 35 | margin-left: $chip-icon-negative-offset; 36 | margin-right: $chip-icon-offset; 37 | } 38 | 39 | &--left { 40 | margin-left: $chip-icon-offset; 41 | margin-right: $chip-icon-negative-offset; 42 | } 43 | } 44 | } 45 | 46 | @include theme(light, 'v-chip') { 47 | @include v-chip($material-light); 48 | } 49 | 50 | @include theme(dark, 'v-chip') { 51 | @include v-chip($material-dark); 52 | } 53 | 54 | @include rtl('v-chip') { 55 | @include v-chip-rtl; 56 | } 57 | 58 | .v-chip { 59 | align-items: center; 60 | border-radius: $chip-border-radius; 61 | display: inline-flex; 62 | font-size: $chip-font-size; 63 | margin: $chip-margin; 64 | outline: none; 65 | position: relative; 66 | transition: $primary-transition; 67 | vertical-align: middle; 68 | 69 | .v-chip__content { 70 | align-items: center; 71 | border-radius: $chip-border-radius; 72 | cursor: default; 73 | display: inline-flex; 74 | height: $chip-height; 75 | justify-content: space-between; 76 | padding: $chip-padding; 77 | vertical-align: middle; 78 | white-space: nowrap; 79 | z-index: 1; 80 | } 81 | 82 | &--removable { 83 | .v-chip__content { 84 | padding: $chip-removeable-padding; 85 | } 86 | } 87 | 88 | .v-avatar { 89 | // Important is needed to account for new avatar structure 90 | height: $chip-height !important; 91 | margin-left: rem(-12px); 92 | margin-right: rem(8px); 93 | min-width: $chip-height; 94 | width: $chip-height !important; 95 | 96 | img { 97 | height: 100%; 98 | width: 100%; 99 | } 100 | } 101 | 102 | &:focus:not(.v-chip--disabled), 103 | &--active, 104 | &--selected { 105 | @include elevation(2); 106 | border-color: rgba(#000000, 0.13); 107 | // overflow: hidden; // TEMP 108 | 109 | &::after { 110 | background: currentColor; 111 | border-radius: inherit; 112 | content: ''; 113 | height: 100%; 114 | left: 0; 115 | opacity: 0.13; 116 | pointer-events: none; 117 | position: absolute; 118 | top: 0; 119 | transition: inherit; 120 | width: 100%; 121 | } 122 | } 123 | 124 | &--label { 125 | border-radius: $chip-label-border-radius; 126 | 127 | .v-chip__content { 128 | border-radius: $chip-label-border-radius; 129 | } 130 | } 131 | 132 | // Increase specificity to override theme background 133 | &#{&}.v-chip--outline { 134 | background: $chip-outline-background; 135 | border: rem(1px) solid currentColor; 136 | color: $chip-outline-color; 137 | height: $chip-height; 138 | 139 | .v-avatar { 140 | margin-left: rem(-13px); 141 | } 142 | } 143 | 144 | &--small { 145 | height: $chip-small-height !important; 146 | 147 | .v-avatar { 148 | height: $chip-small-height !important; 149 | min-width: $chip-small-height; 150 | width: $chip-small-height !important; 151 | } 152 | 153 | .v-icon { 154 | font-size: $chip-small-font-size; 155 | } 156 | } 157 | 158 | &__close { 159 | align-items: center; 160 | color: inherit; 161 | display: flex; 162 | font-size: $chip-icon-font-size; 163 | margin: $chip-close-margin; 164 | text-decoration: none; 165 | user-select: none; 166 | 167 | > .v-icon { 168 | color: inherit !important; 169 | cursor: pointer; 170 | font-size: rem(20px); 171 | opacity: 0.5; 172 | 173 | &:hover { 174 | opacity: 1; 175 | } 176 | } 177 | } 178 | 179 | &--disabled { 180 | .v-chip__close { 181 | pointer-events: none; 182 | } 183 | } 184 | 185 | &--select-multi { 186 | margin: $chip-margin $chip-margin $chip-margin 0; 187 | } 188 | 189 | .v-icon { 190 | color: inherit; 191 | 192 | &--right { 193 | margin-left: $chip-icon-offset; 194 | margin-right: $chip-icon-negative-offset; 195 | } 196 | 197 | &--left { 198 | margin-left: $chip-icon-negative-offset; 199 | margin-right: $chip-icon-offset; 200 | } 201 | } 202 | } 203 | -------------------------------------------------------------------------------- /components/_content.scss: -------------------------------------------------------------------------------- 1 | @import '../bootstrap'; 2 | @import '../browsers'; 3 | 4 | .v-content { 5 | @include bootable; 6 | 7 | display: flex; 8 | flex: 1 0 auto; 9 | max-width: 100%; 10 | 11 | &__wrap { 12 | flex: 1 1 auto; 13 | max-width: 100%; 14 | position: relative; 15 | } 16 | } 17 | 18 | @include firefox { 19 | @media print { 20 | .v-content { 21 | display: block; 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /components/_counters.scss: -------------------------------------------------------------------------------- 1 | @import '../bootstrap'; 2 | @import '../theme'; 3 | 4 | // Theme 5 | @mixin v-counter($material) { 6 | color: map-deep-get($material, text, secondary); 7 | } 8 | 9 | @include theme(light, 'v-counter') { 10 | @include v-counter($material-light); 11 | } 12 | 13 | @include theme(dark, 'v-counter') { 14 | @include v-counter($material-dark); 15 | } 16 | 17 | .v-counter { 18 | flex: 0 1 auto; 19 | font-size: rem(12px); 20 | line-height: 1; 21 | min-height: rem(12px); 22 | } 23 | -------------------------------------------------------------------------------- /components/_data-iterator.scss: -------------------------------------------------------------------------------- 1 | @import '../bootstrap'; 2 | @import '../theme'; 3 | 4 | @mixin v-dataiterator($material) { 5 | .v-data-iterator__actions { 6 | color: rgba(map-get($material, fg-color), map-get($material, secondary-text-percent)); 7 | 8 | &__select { 9 | .v-select { 10 | .v-select__selection--comma { 11 | color: rgba( 12 | map-get($material, fg-color), 13 | map-get($material, secondary-text-percent) 14 | ) !important; 15 | } 16 | 17 | .v-input__append-inner { 18 | color: rgba( 19 | map-get($material, fg-color), 20 | map-get($material, secondary-text-percent) 21 | ) !important; 22 | } 23 | } 24 | } 25 | } 26 | } 27 | 28 | @include theme(light, 'v-data-iterator') { 29 | @include v-dataiterator($material-light); 30 | } 31 | 32 | @include theme(dark, 'v-data-iterator') { 33 | @include v-dataiterator($material-dark); 34 | } 35 | 36 | // Actions 37 | .v-data-iterator__actions { 38 | align-items: center; 39 | display: flex; 40 | flex-wrap: wrap-reverse; 41 | font-size: rem(12px); 42 | justify-content: flex-end; 43 | 44 | .v-btn { 45 | color: inherit; 46 | 47 | &:last-of-type { 48 | margin-left: rem(14px); 49 | } 50 | } 51 | 52 | &__range-controls { 53 | align-items: center; 54 | display: flex; 55 | min-height: rem(48px); 56 | } 57 | 58 | &__pagination { 59 | display: block; 60 | margin: rem(0 32px 0 24px); 61 | text-align: center; 62 | } 63 | 64 | &__select { 65 | align-items: center; 66 | display: flex; 67 | justify-content: flex-end; 68 | margin-right: rem(14px); 69 | white-space: nowrap; 70 | 71 | .v-select { 72 | flex: 0 1 0; 73 | margin: rem(13px 0 13px 34px); 74 | padding: 0; 75 | position: initial; 76 | } 77 | 78 | .v-select__selections { 79 | flex-wrap: nowrap; 80 | 81 | .v-select__selection--comma { 82 | font-size: rem(12px); 83 | } 84 | } 85 | } 86 | } 87 | -------------------------------------------------------------------------------- /components/_data-table.scss: -------------------------------------------------------------------------------- 1 | @import '../bootstrap'; 2 | @import '../theme'; 3 | 4 | // Theme 5 | @mixin v-datatable($material) { 6 | thead { 7 | .column.sortable { 8 | .v-icon { 9 | color: rgba( 10 | map-get($material, fg-color), 11 | map-get($material, disabledORhints-text-percent) 12 | ); 13 | } 14 | 15 | &:hover { 16 | color: rgba(map-get($material, fg-color), map-get($material, primary-text-percent)); 17 | } 18 | 19 | &.active { 20 | color: rgba(map-get($material, fg-color), map-get($material, primary-text-percent)); 21 | 22 | .v-icon { 23 | color: rgba( 24 | map-get($material, fg-color), 25 | map-get($material, primary-text-percent) 26 | ); 27 | } 28 | } 29 | } 30 | } 31 | 32 | .v-datatable__actions { 33 | background-color: map-get($material, cards); 34 | border-top: rem(1px) solid 35 | rgba(map-get($material, fg-color), map-get($material, divider-percent)); 36 | color: rgba(map-get($material, fg-color), map-get($material, secondary-text-percent)); 37 | } 38 | } 39 | 40 | @include theme(light, 'v-datatable') { 41 | @include v-datatable($material-light); 42 | } 43 | 44 | @include theme(dark, 'v-datatable') { 45 | @include v-datatable($material-dark); 46 | } 47 | 48 | .v-datatable { 49 | .v-input--selection-controls { 50 | margin: 0; 51 | padding: 0; 52 | } 53 | 54 | thead { 55 | th.column.sortable { 56 | cursor: pointer; 57 | outline: 0; 58 | 59 | .v-icon { 60 | display: inline-block; 61 | font-size: rem(16px); 62 | opacity: 0; 63 | transition: 0.3s map-get($transition, swing); 64 | } 65 | 66 | &:focus, 67 | &:hover { 68 | .v-icon { 69 | opacity: 0.6; 70 | } 71 | } 72 | 73 | &.active { 74 | transform: none; 75 | 76 | .v-icon { 77 | opacity: 1; 78 | } 79 | 80 | &.desc { 81 | .v-icon { 82 | transform: rotate(-180deg); 83 | } 84 | } 85 | } 86 | } 87 | } 88 | } 89 | 90 | // Actions 91 | .v-datatable__actions { 92 | align-items: center; 93 | display: flex; 94 | flex-wrap: wrap-reverse; 95 | font-size: rem(12px); 96 | justify-content: flex-end; 97 | 98 | .v-btn { 99 | color: inherit; 100 | 101 | &:last-of-type { 102 | margin-left: rem(14px); 103 | } 104 | } 105 | 106 | &__range-controls { 107 | align-items: center; 108 | display: flex; 109 | min-height: rem(48px); 110 | } 111 | 112 | &__pagination { 113 | display: block; 114 | margin: rem(0 32px 0 24px); 115 | text-align: center; 116 | } 117 | 118 | &__select { 119 | align-items: center; 120 | display: flex; 121 | justify-content: flex-end; 122 | margin-right: rem(14px); 123 | white-space: nowrap; 124 | 125 | .v-select { 126 | flex: 0 1 0; 127 | margin: rem(13px 0 13px 34px); 128 | padding: 0; 129 | position: initial; 130 | 131 | .v-select__selections { 132 | flex-wrap: nowrap; 133 | } 134 | 135 | .v-select__selection--comma { 136 | font-size: rem(12px); 137 | } 138 | } 139 | } 140 | } 141 | 142 | .v-datatable__progress { 143 | height: auto !important; 144 | 145 | tr, 146 | td, 147 | th { 148 | height: auto !important; 149 | } 150 | 151 | th { 152 | padding: 0 !important; 153 | 154 | .v-progress-linear { 155 | margin: 0; 156 | } 157 | } 158 | } 159 | 160 | .v-datatable__expand { 161 | &-row { 162 | border: none !important; 163 | } 164 | 165 | &-col { 166 | height: 0 !important; 167 | padding: 0 !important; 168 | 169 | &--expanded { 170 | border-bottom: rem(1px) solid rgba(0, 0, 0, 0.12); 171 | } 172 | } 173 | 174 | &-content { 175 | transition: height $primary-transition; 176 | 177 | > .v-card { 178 | border-radius: 0; 179 | box-shadow: none; 180 | } 181 | } 182 | } 183 | -------------------------------------------------------------------------------- /components/_date-picker-header.scss: -------------------------------------------------------------------------------- 1 | @import '../bootstrap'; 2 | @import '../theme'; 3 | 4 | @mixin v-date-picker-header($material) { 5 | .v-date-picker-header__value:not(.v-date-picker-header__value--disabled) { 6 | button:not(:hover):not(:focus) { 7 | color: map-deep-get($material, text, primary); 8 | } 9 | } 10 | 11 | .v-date-picker-header__value--disabled { 12 | button { 13 | color: map-deep-get($material, text, disabled); 14 | } 15 | } 16 | } 17 | 18 | @include theme(light, 'v-date-picker-header') { 19 | @include v-date-picker-header($material-light); 20 | } 21 | 22 | @include theme(dark, 'v-date-picker-header') { 23 | @include v-date-picker-header($material-dark); 24 | } 25 | 26 | .v-date-picker-header { 27 | align-items: center; 28 | display: flex; 29 | justify-content: space-between; 30 | padding: rem(4px 16px); 31 | position: relative; 32 | 33 | .v-btn { 34 | margin: 0; 35 | z-index: auto; 36 | } 37 | 38 | .v-icon { 39 | cursor: pointer; 40 | user-select: none; 41 | } 42 | } 43 | 44 | .v-date-picker-header__value { 45 | flex: 1; 46 | overflow: hidden; 47 | position: relative; 48 | text-align: center; 49 | 50 | div { 51 | transition: $primary-transition; 52 | width: 100%; 53 | } 54 | 55 | button { 56 | cursor: pointer; 57 | font-weight: bold; 58 | outline: none; 59 | padding: 0.5rem; 60 | transition: $primary-transition; 61 | } 62 | } 63 | 64 | .v-date-picker-header--disabled { 65 | pointer-events: none; 66 | } 67 | -------------------------------------------------------------------------------- /components/_date-picker-table.scss: -------------------------------------------------------------------------------- 1 | @import '../bootstrap'; 2 | @import '../theme'; 3 | 4 | @mixin v-date-picker-table($material) { 5 | th, 6 | .v-date-picker-table--date__week { 7 | color: map-deep-get($material, text, disabled); 8 | } 9 | } 10 | 11 | @include theme(light, 'v-date-picker-table') { 12 | @include v-date-picker-table($material-light); 13 | } 14 | 15 | @include theme(dark, 'v-date-picker-table') { 16 | @include v-date-picker-table($material-dark); 17 | } 18 | 19 | .v-date-picker-table { 20 | height: rem(242px); 21 | padding: rem(0 12px); 22 | position: relative; 23 | 24 | table { 25 | table-layout: fixed; 26 | top: 0; 27 | transition: $primary-transition; 28 | width: 100%; 29 | } 30 | 31 | td, 32 | th { 33 | position: relative; 34 | text-align: center; 35 | } 36 | 37 | th { 38 | font-size: rem(12px); 39 | } 40 | 41 | &--date .v-btn { 42 | height: rem(32px); 43 | width: rem(32px); 44 | } 45 | 46 | .v-btn { 47 | font-size: rem(12px); 48 | margin: 0; 49 | z-index: auto; 50 | 51 | &.v-btn--active { 52 | color: #ffffff; 53 | } 54 | } 55 | } 56 | 57 | .v-date-picker-table--month { 58 | td { 59 | height: rem(56px); 60 | text-align: center; 61 | vertical-align: middle; 62 | width: 33.33333%; 63 | 64 | .v-btn { 65 | margin: 0 auto; 66 | max-width: rem(160px); 67 | min-width: rem(40px); 68 | width: 100%; 69 | } 70 | } 71 | } 72 | 73 | .v-date-picker-table--date { 74 | th { 75 | font-weight: 600; 76 | padding: rem(8px 0); 77 | } 78 | 79 | td { 80 | width: rem(45px); 81 | } 82 | } 83 | 84 | .v-date-picker-table__events { 85 | height: rem(8px); 86 | left: 0; 87 | position: absolute; 88 | text-align: center; 89 | white-space: pre; 90 | width: 100%; 91 | 92 | > div { 93 | border-radius: 50%; 94 | display: inline-block; 95 | height: rem(8px); 96 | margin: rem(0 1px); 97 | width: rem(8px); 98 | } 99 | } 100 | 101 | .v-date-picker-table--date .v-date-picker-table__events { 102 | bottom: rem(6px); 103 | } 104 | 105 | .v-date-picker-table--month .v-date-picker-table__events { 106 | bottom: rem(8px); 107 | } 108 | 109 | .v-date-picker-table--disabled { 110 | pointer-events: none; 111 | } 112 | -------------------------------------------------------------------------------- /components/_date-picker-title.scss: -------------------------------------------------------------------------------- 1 | @import '../bootstrap'; 2 | 3 | @mixin v-date-picker-title-rtl { 4 | .v-picker__title__btn { 5 | text-align: right; 6 | } 7 | } 8 | 9 | @include rtl('v-date-picker-title') { 10 | @include v-date-picker-title-rtl; 11 | } 12 | 13 | .v-date-picker-title { 14 | display: flex; 15 | flex-flow: column wrap; 16 | justify-content: space-between; 17 | line-height: 1; 18 | } 19 | 20 | .v-date-picker-title__year { 21 | align-items: center; 22 | display: inline-flex; 23 | font-size: rem(14px); 24 | font-weight: font-weight(medium); 25 | margin-bottom: rem(8px); 26 | } 27 | 28 | .v-date-picker-title__date { 29 | font-size: rem(34px); 30 | font-weight: font-weight(medium); 31 | margin-bottom: rem(-8px); 32 | overflow: hidden; 33 | padding-bottom: rem(8px); 34 | position: relative; 35 | text-align: left; 36 | 37 | > div { 38 | position: relative; 39 | } 40 | } 41 | 42 | .v-date-picker-title--disabled { 43 | pointer-events: none; 44 | } 45 | -------------------------------------------------------------------------------- /components/_date-picker-years.scss: -------------------------------------------------------------------------------- 1 | @import '../bootstrap'; 2 | 3 | .v-date-picker-years { 4 | font-size: rem(16px); 5 | font-weight: font-weight(regular); 6 | height: rem(286px); 7 | list-style-type: none; 8 | overflow: auto; 9 | padding: 0; 10 | text-align: center; 11 | 12 | li { 13 | cursor: pointer; 14 | padding: rem(8px 0); 15 | transition: none; 16 | 17 | &.active { 18 | font-size: rem(26px); 19 | font-weight: font-weight(medium); 20 | padding: rem(10px 0); 21 | } 22 | 23 | &:hover { 24 | background: rgba(0, 0, 0, 0.12); 25 | } 26 | } 27 | } 28 | 29 | .v-picker--landscape { 30 | .v-date-picker-years { 31 | height: rem(286px); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /components/_dialogs.scss: -------------------------------------------------------------------------------- 1 | @import '../bootstrap'; 2 | 3 | .v-dialog { 4 | @include elevation(24); 5 | border-radius: $card-border-radius; 6 | margin: rem(24px); 7 | overflow-y: auto; 8 | pointer-events: auto; 9 | transition: 0.3s map-get($transition, fast-in-fast-out); 10 | width: 100%; 11 | z-index: inherit; 12 | 13 | &__content { 14 | align-items: center; 15 | display: flex; 16 | height: 100%; 17 | justify-content: center; 18 | left: 0; 19 | outline: none; 20 | pointer-events: none; 21 | position: fixed; 22 | top: 0; 23 | transition: 0.2s map-get($transition, fast-in-fast-out); 24 | width: 100%; 25 | z-index: 6; 26 | } 27 | 28 | &:not(.v-dialog--fullscreen) { 29 | max-height: 90%; 30 | } 31 | 32 | &__activator { 33 | cursor: pointer; 34 | 35 | * { 36 | cursor: pointer; 37 | } 38 | } 39 | 40 | &__container { 41 | display: inline-block; 42 | vertical-align: middle; 43 | } 44 | 45 | @keyframes animate-dialog { 46 | 0% { 47 | transform: scale(1); 48 | } 49 | 50 | 50% { 51 | transform: scale(1.03); 52 | } 53 | 54 | 100% { 55 | transform: scale(1); 56 | } 57 | } 58 | 59 | &--animated { 60 | animation-duration: 0.15s; 61 | animation-name: animate-dialog; 62 | animation-timing-function: map-get($transition, fast-in-fast-out); 63 | } 64 | 65 | &--fullscreen { 66 | border-radius: 0; 67 | height: 100%; 68 | left: 0; 69 | margin: 0; 70 | overflow-y: auto; 71 | position: fixed; 72 | top: 0; 73 | 74 | > .v-card { 75 | margin: 0 !important; 76 | min-height: 100%; 77 | min-width: 100%; 78 | padding: 0 !important; 79 | } 80 | } 81 | 82 | &--scrollable { 83 | display: flex; 84 | 85 | > .v-card { 86 | display: flex; 87 | flex: 1 1 100%; 88 | flex-direction: column; 89 | 90 | > .v-card__title, 91 | > .v-card__actions { 92 | flex: 1 0 auto; 93 | } 94 | 95 | > .v-card__text { 96 | backface-visibility: hidden; 97 | overflow-y: auto; 98 | } 99 | } 100 | } 101 | } 102 | -------------------------------------------------------------------------------- /components/_dividers.scss: -------------------------------------------------------------------------------- 1 | @import '../bootstrap'; 2 | @import '../theme'; 3 | 4 | @mixin v-divider($material) { 5 | background-color: map-get($material, dividers); 6 | } 7 | 8 | @include theme(light, 'v-divider') { 9 | @include v-divider($material-light); 10 | } 11 | 12 | @include theme(dark, 'v-divider') { 13 | @include v-divider($material-dark); 14 | } 15 | 16 | .v-divider { 17 | border: solid; 18 | border-width: thin 0 0; 19 | display: block; 20 | flex: 1 1 0; 21 | height: 0; 22 | max-height: 0; 23 | max-width: 100%; 24 | transition: inherit; 25 | 26 | &--inset:not(.v-divider--vertical) { 27 | margin-left: rem(72px); 28 | width: calc(100% - #{rem(72px)}); 29 | } 30 | 31 | &--vertical { 32 | align-self: stretch; 33 | border: solid; 34 | border-width: 0 thin 0 0; 35 | display: inline-flex; 36 | height: inherit; 37 | max-height: 100%; 38 | max-width: 0; 39 | min-height: 100%; 40 | vertical-align: text-bottom; 41 | width: 0; 42 | 43 | &.v-divider--inset { 44 | margin-top: rem(8px); 45 | max-height: calc(100% - #{rem(16px)}); 46 | min-height: 0; 47 | } 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /components/_expansion-panel.scss: -------------------------------------------------------------------------------- 1 | @import '../bootstrap'; 2 | @import '../theme'; 3 | 4 | // Theme 5 | @mixin v-expansion-panel($material) { 6 | .v-expansion-panel__container { 7 | background-color: map-get($material, cards); 8 | border-top: rem(1px) solid 9 | rgba(map-get($material, fg-color), map-get($material, divider-percent)); 10 | color: map-deep-get($material, text, primary); 11 | 12 | .v-expansion-panel__header { 13 | .v-expansion-panel__header__icon { 14 | .v-icon { 15 | color: map-deep-get($material, icons, active); 16 | } 17 | } 18 | } 19 | 20 | &--disabled { 21 | color: map-deep-get($material, text, disabled); 22 | } 23 | } 24 | 25 | &--focusable { 26 | .v-expansion-panel__container { 27 | &:focus { 28 | background-color: map-deep-get($material, expansion-panels, focus); 29 | } 30 | } 31 | } 32 | } 33 | 34 | @include theme(light, 'v-expansion-panel') { 35 | @include v-expansion-panel($material-light); 36 | } 37 | 38 | @include theme(dark, 'v-expansion-panel') { 39 | @include v-expansion-panel($material-dark); 40 | } 41 | 42 | .v-expansion-panel { 43 | @include elevation(1); 44 | display: flex; 45 | flex-wrap: wrap; 46 | justify-content: center; 47 | list-style-type: none; 48 | padding: 0; 49 | text-align: left; 50 | width: 100%; 51 | 52 | &__container { 53 | flex: 1 0 100%; 54 | max-width: 100%; 55 | outline: none; 56 | transition: $primary-transition; 57 | 58 | &:first-child { 59 | border-top: none !important; 60 | } 61 | 62 | .v-expansion-panel__header__icon { 63 | margin-left: auto; 64 | } 65 | 66 | &--disabled { 67 | .v-expansion-panel__header { 68 | pointer-events: none; 69 | } 70 | } 71 | 72 | &--active { 73 | > .v-expansion-panel__header { 74 | .v-expansion-panel__header__icon .v-icon { 75 | transform: rotate(-180deg); 76 | } 77 | } 78 | } 79 | } 80 | 81 | &__header { 82 | align-items: center; 83 | cursor: pointer; 84 | display: flex; 85 | min-height: rem(48px); 86 | padding: rem(12px 24px); 87 | position: relative; 88 | 89 | > *:not(.v-expansion-panel__header__icon) { 90 | flex: 1 1 auto; 91 | } 92 | } 93 | 94 | &__body { 95 | transition: $primary-transition; 96 | 97 | > .v-card { 98 | @include elevation(0, true); 99 | border-radius: 0; 100 | } 101 | } 102 | 103 | &--popout, 104 | &--inset { 105 | @include elevation(0); 106 | 107 | .v-expansion-panel__container--active { 108 | @include elevation(3); 109 | margin: map-deep-get($spacers, three, x); 110 | } 111 | 112 | .v-expansion-panel__container { 113 | max-width: 95%; 114 | } 115 | } 116 | 117 | &--popout { 118 | .v-expansion-panel__container--active { 119 | max-width: 100%; 120 | } 121 | } 122 | 123 | &--inset { 124 | .v-expansion-panel__container--active { 125 | max-width: 85%; 126 | } 127 | } 128 | } 129 | -------------------------------------------------------------------------------- /components/_footer.scss: -------------------------------------------------------------------------------- 1 | @import '../bootstrap'; 2 | @import '../theme'; 3 | 4 | @mixin v-footer($material) { 5 | background: map-get($material, app-bar); 6 | color: map-deep-get($material, text, primary); 7 | } 8 | 9 | @include theme(light, 'v-footer') { 10 | @include v-footer($material-light); 11 | } 12 | 13 | @include theme(dark, 'v-footer') { 14 | @include v-footer($material-dark); 15 | } 16 | 17 | .v-footer { 18 | align-items: center; 19 | display: flex; 20 | flex: 0 1 auto !important; // Don't let devs break their code 21 | min-height: $footer-height; 22 | transition: 0.2s map-get($transition, fast-out-slow-in); 23 | 24 | &--absolute, 25 | &--fixed { 26 | bottom: 0; 27 | left: 0; 28 | width: 100%; 29 | z-index: 3; 30 | } 31 | 32 | &--inset { 33 | z-index: 2; 34 | } 35 | 36 | &--absolute { 37 | position: absolute; 38 | } 39 | 40 | &--fixed { 41 | position: fixed; 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /components/_forms.scss: -------------------------------------------------------------------------------- 1 | @import '../bootstrap'; 2 | 3 | .v-form { 4 | > .container { 5 | padding: map-get($grid-gutters, lg); 6 | 7 | > .layout > .flex { 8 | padding: (map-get($grid-gutters, lg) / 2); 9 | } 10 | 11 | > .layout:only-child { 12 | margin: -(map-get($grid-gutters, lg) / 2); 13 | } 14 | 15 | > .layout:not(:only-child) { 16 | margin: auto (-(map-get($grid-gutters, lg) / 2)); 17 | } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /components/_grid.scss: -------------------------------------------------------------------------------- 1 | @import '../bootstrap'; 2 | 3 | .container { 4 | flex: 1 1 100%; 5 | margin: auto; 6 | padding: map-get($grid-gutters, xl); 7 | width: 100%; 8 | 9 | @each $size, $width in $container-max-widths { 10 | @media only screen and (min-width: $width) { 11 | max-width: ($width * 0.9375); 12 | } 13 | } 14 | 15 | @include breakpoint(sm-and-down) { 16 | padding: map-get($grid-gutters, lg); 17 | } 18 | 19 | &.fluid { 20 | max-width: 100%; 21 | } 22 | 23 | &.fill-height { 24 | align-items: center; 25 | display: flex; 26 | 27 | > .layout { 28 | flex: 1 1 auto; 29 | height: 100%; 30 | } 31 | } 32 | 33 | &.grid-list { 34 | @each $size, $gutter in $grid-gutters { 35 | &-#{$size} { 36 | padding: $gutter; 37 | 38 | .layout { 39 | .flex { 40 | padding: $gutter / 2; 41 | } 42 | } 43 | 44 | .layout:only-child { 45 | margin: -($gutter / 2); 46 | } 47 | 48 | .layout:not(:only-child) { 49 | margin: auto (-($gutter / 2)); 50 | } 51 | 52 | *:not(:only-child) { 53 | .layout:first-child { 54 | margin-top: -($gutter / 2); 55 | } 56 | 57 | .layout:last-child { 58 | margin-bottom: -($gutter / 2); 59 | } 60 | } 61 | } 62 | } 63 | } 64 | } 65 | 66 | .layout { 67 | display: flex; 68 | flex: 1 1 auto; 69 | flex-wrap: nowrap; 70 | // https://github.com/vuetifyjs/vuetify/issues/3873 71 | min-width: 0; 72 | 73 | &.row { 74 | flex-direction: row; 75 | 76 | &.reverse { 77 | flex-direction: row-reverse; 78 | } 79 | } 80 | 81 | &.column { 82 | flex-direction: column; 83 | 84 | &.reverse { 85 | flex-direction: column-reverse; 86 | } 87 | 88 | > .flex { 89 | max-width: 100%; 90 | } 91 | } 92 | 93 | &.wrap { 94 | flex-wrap: wrap; 95 | } 96 | } 97 | 98 | @each $size, $width in $grid-breakpoints { 99 | @media all and (min-width: $width) { 100 | @for $n from 1 through $grid-columns { 101 | .flex.#{$size}#{$n} { 102 | flex-basis: percentage($n / $grid-columns); 103 | flex-grow: 0; 104 | max-width: percentage($n / $grid-columns); 105 | } 106 | 107 | .flex.order-#{$size}#{$n} { 108 | order: $n; 109 | } 110 | } 111 | 112 | @for $n from 0 through $grid-columns { 113 | .flex.offset-#{$size}#{$n} { 114 | // Offsets can only ever work in row layouts 115 | margin-left: percentage($n / $grid-columns); 116 | } 117 | } 118 | } 119 | } 120 | 121 | .flex, 122 | .child-flex > * { 123 | flex: 1 1 auto; 124 | max-width: 100%; 125 | } 126 | 127 | .align { 128 | &-start { 129 | align-items: flex-start; 130 | } 131 | 132 | &-end { 133 | align-items: flex-end; 134 | } 135 | 136 | &-center { 137 | align-items: center; 138 | } 139 | 140 | &-baseline { 141 | align-items: baseline; 142 | } 143 | } 144 | 145 | .align-self { 146 | &-start { 147 | align-self: flex-start; 148 | } 149 | 150 | &-end { 151 | align-self: flex-end; 152 | } 153 | 154 | &-center { 155 | align-self: center; 156 | } 157 | 158 | &-baseline { 159 | align-self: baseline; 160 | } 161 | } 162 | 163 | .align-content { 164 | &-start { 165 | align-content: flex-start; 166 | } 167 | 168 | &-end { 169 | align-content: flex-end; 170 | } 171 | 172 | &-center { 173 | align-content: center; 174 | } 175 | 176 | &-space-between { 177 | align-content: space-between; 178 | } 179 | 180 | &-space-around { 181 | align-content: space-around; 182 | } 183 | } 184 | 185 | .justify { 186 | &-start { 187 | justify-content: flex-start; 188 | } 189 | 190 | &-end { 191 | justify-content: flex-end; 192 | } 193 | 194 | &-center { 195 | justify-content: center; 196 | } 197 | 198 | &-space-around { 199 | justify-content: space-around; 200 | } 201 | 202 | &-space-between { 203 | justify-content: space-between; 204 | } 205 | } 206 | 207 | .justify-self { 208 | &-start { 209 | justify-self: flex-start; 210 | } 211 | 212 | &-end { 213 | justify-self: flex-end; 214 | } 215 | 216 | &-center { 217 | justify-self: center; 218 | } 219 | 220 | &-baseline { 221 | justify-self: baseline; 222 | } 223 | } 224 | 225 | .spacer { 226 | flex-grow: 1 !important; 227 | } 228 | 229 | .grow { 230 | flex-grow: 1 !important; 231 | flex-shrink: 0 !important; 232 | } 233 | 234 | .shrink { 235 | flex-grow: 0 !important; 236 | flex-shrink: 1 !important; 237 | } 238 | 239 | .scroll-y { 240 | overflow-y: auto; 241 | } 242 | 243 | .fill-height { 244 | height: 100%; 245 | } 246 | 247 | .hide-overflow { 248 | overflow: hidden !important; 249 | } 250 | 251 | .show-overflow { 252 | overflow: visible !important; 253 | } 254 | 255 | .no-wrap { 256 | white-space: nowrap; 257 | } 258 | 259 | .ellipsis { 260 | overflow: hidden; 261 | text-overflow: ellipsis; 262 | white-space: nowrap; 263 | } 264 | 265 | // Display helpers 266 | .d-flex { 267 | display: flex !important; 268 | } 269 | 270 | .d-inline-flex { 271 | display: inline-flex !important; 272 | } 273 | 274 | // TODO: Remove this in v2.0 (╯°□°）╯︵ ┻━┻ 275 | .d-flex, 276 | .d-inline-flex { 277 | > * { 278 | flex: 1 1 auto !important; 279 | } 280 | } 281 | 282 | .d-block { 283 | display: block !important; 284 | } 285 | 286 | .d-inline-block { 287 | display: inline-block !important; 288 | } 289 | 290 | .d-inline { 291 | display: inline !important; 292 | } 293 | 294 | .d-none { 295 | display: none !important; 296 | } 297 | -------------------------------------------------------------------------------- /components/_icons.scss: -------------------------------------------------------------------------------- 1 | @import '../bootstrap'; 2 | @import '../theme'; 3 | 4 | // Theme 5 | @mixin v-icon($material) { 6 | color: map-deep-get($material, icons, active); 7 | 8 | &.v-icon--disabled { 9 | color: map-deep-get($material, icons, inactive) !important; 10 | } 11 | } 12 | 13 | @include theme(light, 'v-icon') { 14 | @include v-icon($material-light); 15 | } 16 | 17 | @include theme(dark, 'v-icon') { 18 | @include v-icon($material-dark); 19 | } 20 | 21 | .v-icon { 22 | align-items: center; 23 | display: inline-flex; 24 | font-feature-settings: 'liga'; 25 | font-size: rem(1.5rem); 26 | justify-content: center; 27 | line-height: 1; 28 | transition: $primary-transition; 29 | vertical-align: text-bottom; 30 | 31 | &--right { 32 | margin-left: map-get($grid-gutters, lg); 33 | } 34 | 35 | &--left { 36 | margin-right: map-get($grid-gutters, lg); 37 | } 38 | 39 | &.v-icon.v-icon--link { 40 | cursor: pointer; 41 | } 42 | 43 | &--disabled { 44 | opacity: 0.6; 45 | pointer-events: none; 46 | } 47 | 48 | &--is-component { 49 | height: rem(24px); 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /components/_images.scss: -------------------------------------------------------------------------------- 1 | @import '../bootstrap'; 2 | 3 | .v-image { 4 | z-index: 0; 5 | 6 | &__image, 7 | &__placeholder { 8 | height: 100%; 9 | left: 0; 10 | position: absolute; 11 | top: 0; 12 | width: 100%; 13 | z-index: -1; 14 | } 15 | 16 | &__image { 17 | background-repeat: no-repeat; 18 | 19 | &--preload { 20 | filter: blur(rem(2px)); 21 | } 22 | 23 | &--contain { 24 | background-size: contain; 25 | } 26 | 27 | &--cover { 28 | background-size: cover; 29 | } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /components/_inputs.scss: -------------------------------------------------------------------------------- 1 | @import '../bootstrap'; 2 | @import '../theme'; 3 | 4 | // Theme 5 | @mixin v-input($material) { 6 | &:not(.v-input--is-disabled) { 7 | input, 8 | textarea { 9 | color: map-deep-get($material, text, primary); 10 | } 11 | } 12 | 13 | input::placeholder, 14 | textarea::placeholder { 15 | color: map-deep-get($material, text, disabled); 16 | } 17 | 18 | &--is-disabled { 19 | .v-label, 20 | input, 21 | textarea { 22 | color: map-deep-get($material, text, disabled); 23 | } 24 | } 25 | } 26 | 27 | @include theme(light, 'v-input') { 28 | @include v-input($material-light); 29 | } 30 | 31 | @include theme(dark, 'v-input') { 32 | @include v-input($material-dark); 33 | } 34 | 35 | .v-input { 36 | align-items: flex-start; 37 | display: flex; 38 | flex: 1 1 auto; 39 | font-size: rem(1rem); 40 | text-align: left; 41 | 42 | .v-progress-linear { 43 | left: 0; 44 | margin: 0; 45 | position: absolute; 46 | top: calc(100% - #{rem(1px)}); 47 | } 48 | 49 | input { 50 | max-height: rem(32px); 51 | } 52 | 53 | input, 54 | textarea { 55 | // Remove Firefox red outline 56 | &:invalid { 57 | box-shadow: none; 58 | } 59 | 60 | &:focus, 61 | &:active { 62 | outline: none; 63 | } 64 | } 65 | 66 | .v-label { 67 | height: rem(20px); 68 | line-height: rem(20px); 69 | } 70 | 71 | &__append-outer, 72 | &__prepend-outer { 73 | display: inline-flex; 74 | line-height: 1; 75 | margin-bottom: rem(4px); 76 | margin-top: rem(4px); 77 | 78 | .v-icon { 79 | user-select: none; 80 | } 81 | } 82 | 83 | &__append-outer { 84 | margin-left: rem(9px); 85 | } 86 | 87 | &__prepend-outer { 88 | margin-right: rem(9px); 89 | } 90 | 91 | &__control { 92 | display: flex; 93 | flex-flow: column wrap; 94 | flex-grow: 1; 95 | height: auto; 96 | width: 100%; // For IE11 97 | } 98 | 99 | &__icon { 100 | align-items: center; 101 | display: inline-flex; 102 | flex: 1 0 auto; 103 | height: rem(24px); 104 | justify-content: center; 105 | min-width: rem(24px); 106 | width: rem(24px); 107 | 108 | &--clear { 109 | border-radius: 50%; 110 | } 111 | } 112 | 113 | &__slot { 114 | align-items: center; 115 | color: inherit; 116 | display: flex; 117 | margin-bottom: rem(8px); 118 | min-height: inherit; 119 | position: relative; 120 | transition: $primary-transition; 121 | width: 100%; 122 | } 123 | 124 | &--is-disabled:not(.v-input--is-readonly) { 125 | pointer-events: none; 126 | } 127 | 128 | &--is-loading > .v-input__control > .v-input__slot { 129 | &::before, 130 | &::after { 131 | display: none; 132 | } 133 | } 134 | 135 | &--hide-details > .v-input__control > .v-input__slot { 136 | margin-bottom: 0; 137 | } 138 | 139 | &--has-state { 140 | &.error--text .v-label { 141 | // stylelint-disable-next-line no-unknown-animations 142 | animation: shake 0.6s map-get($transition, swing); 143 | } 144 | } 145 | } 146 | -------------------------------------------------------------------------------- /components/_item-group.scss: -------------------------------------------------------------------------------- 1 | @import '../bootstrap'; 2 | 3 | .v-item-group { 4 | flex: 0 1 auto; 5 | position: relative; 6 | transition: $primary-transition; 7 | 8 | > * { 9 | cursor: pointer; 10 | flex: 1 1 auto; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /components/_jumbotrons.scss: -------------------------------------------------------------------------------- 1 | @import '../bootstrap'; 2 | @import '../theme'; 3 | 4 | @mixin v-jumbotron($material) { 5 | .v-jumbotron__content { 6 | color: map-deep-get($material, text, primary); 7 | } 8 | } 9 | 10 | @include theme(light, 'v-jumbotron') { 11 | @include v-jumbotron($material-light); 12 | } 13 | 14 | @include theme(dark, 'v-jumbotron') { 15 | @include v-jumbotron($material-dark); 16 | } 17 | 18 | .v-jumbotron { 19 | display: block; 20 | top: 0; 21 | transition: 0.3s map-get($transition, swing); 22 | width: 100%; 23 | 24 | &__wrapper { 25 | height: 100%; 26 | overflow: hidden; 27 | position: relative; 28 | transition: inherit; 29 | width: 100%; 30 | } 31 | 32 | &__background { 33 | bottom: 0; 34 | contain: strict; 35 | left: 0; 36 | position: absolute; 37 | right: 0; 38 | top: 0; 39 | transition: inherit; 40 | } 41 | 42 | &__image { 43 | left: 50%; 44 | min-width: 100%; 45 | position: absolute; 46 | top: 50%; 47 | transform: translate(-50%, -50%); 48 | transition: inherit; 49 | will-change: transform; 50 | } 51 | 52 | &__content { 53 | height: 100%; 54 | position: relative; 55 | transition: inherit; 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /components/_labels.scss: -------------------------------------------------------------------------------- 1 | @import '../bootstrap'; 2 | @import '../theme'; 3 | 4 | @mixin v-label($material) { 5 | color: map-deep-get($material, text, secondary); 6 | 7 | &--is-disabled { 8 | color: map-deep-get($material, text, disabled); 9 | } 10 | } 11 | 12 | @include theme(light, 'v-label') { 13 | @include v-label($material-light); 14 | } 15 | 16 | @include theme(dark, 'v-label') { 17 | @include v-label($material-dark); 18 | } 19 | 20 | .v-label { 21 | font-size: rem(16px); 22 | line-height: 1; 23 | min-height: rem(8px); 24 | transition: 0.3s map-get($transition, swing); 25 | } 26 | -------------------------------------------------------------------------------- /components/_menus.scss: -------------------------------------------------------------------------------- 1 | @import '../bootstrap'; 2 | 3 | .v-menu { 4 | display: block; 5 | vertical-align: middle; 6 | 7 | &--inline { 8 | display: inline-block; 9 | } 10 | 11 | &__activator { 12 | align-items: center; 13 | cursor: pointer; 14 | display: flex; 15 | 16 | * { 17 | cursor: pointer; 18 | } 19 | } 20 | 21 | &__content { 22 | @include elevation(8); 23 | border-radius: rem(2px); 24 | contain: content; 25 | display: inline-block; 26 | max-width: 80%; 27 | overflow-x: hidden; 28 | overflow-y: auto; 29 | position: absolute; 30 | // This is required for an issue on Chrome 65 31 | // that prevents scrolling after a menu is opened 32 | will-change: transform; 33 | 34 | &--active { 35 | pointer-events: none; 36 | } 37 | 38 | > .v-card { 39 | backface-visibility: hidden; 40 | contain: content; 41 | } 42 | } 43 | 44 | > .v-menu__content { 45 | max-width: none; 46 | } 47 | 48 | &-transition { 49 | &-enter { 50 | .v-list__tile { 51 | min-width: 0; 52 | pointer-events: none; 53 | } 54 | 55 | &.v-menu__content--auto { 56 | transition: none !important; 57 | 58 | .v-list__tile { 59 | opacity: 0; 60 | transform: translateY(rem(-15px)); 61 | } 62 | 63 | .v-list__tile--active { 64 | opacity: 1; 65 | pointer-events: auto; 66 | transform: none !important; 67 | } 68 | } 69 | } 70 | 71 | &-enter-to { 72 | .v-list__tile { 73 | pointer-events: auto; 74 | transition-delay: 0.1s; 75 | } 76 | } 77 | 78 | &-leave-active, 79 | &-leave-to { 80 | pointer-events: none; 81 | } 82 | 83 | &-enter, 84 | &-leave-to { 85 | opacity: 0; 86 | } 87 | 88 | &-enter-active, 89 | &-leave-active { 90 | transition: all 0.3s map-get($transition, fast-in-fast-out); 91 | } 92 | } 93 | } 94 | -------------------------------------------------------------------------------- /components/_messages.scss: -------------------------------------------------------------------------------- 1 | @import '../bootstrap'; 2 | @import '../theme'; 3 | 4 | // Theme 5 | @mixin v-messages($material) { 6 | color: map-deep-get($material, text, secondary); 7 | } 8 | 9 | @mixin v-messages-rtl { 10 | text-align: right; 11 | } 12 | 13 | @include theme(light, 'v-messages') { 14 | @include v-messages($material-light); 15 | } 16 | 17 | @include theme(dark, 'v-messages') { 18 | @include v-messages($material-dark); 19 | } 20 | 21 | @include rtl('v-messages') { 22 | @include v-messages-rtl; 23 | } 24 | 25 | .v-messages { 26 | flex: 1 1 auto; 27 | font-size: rem(12px); 28 | min-height: rem(12px); 29 | min-width: rem(1px); // Ensure takes up space with no messages and inside of flex 30 | position: relative; 31 | 32 | &__message { 33 | hyphens: auto; 34 | line-height: 1; 35 | overflow-wrap: break-word; 36 | word-break: break-word; 37 | word-wrap: break-word; 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /components/_navigation-drawer.scss: -------------------------------------------------------------------------------- 1 | @import '../bootstrap'; 2 | @import '../theme'; 3 | 4 | @mixin v-navigation-drawer($material) { 5 | background-color: map-get($material, cards); 6 | 7 | &:not(.v-navigation-drawer--floating) { 8 | .v-navigation-drawer__border { 9 | background-color: map-get($material, dividers); 10 | } 11 | } 12 | 13 | .v-divider { 14 | border-color: map-get($material, dividers); 15 | } 16 | } 17 | 18 | @include theme(light, 'v-navigation-drawer') { 19 | @include v-navigation-drawer($material-light); 20 | } 21 | 22 | @include theme(dark, 'v-navigation-drawer') { 23 | @include v-navigation-drawer($material-dark); 24 | } 25 | 26 | .v-navigation-drawer { 27 | @include bootable; 28 | 29 | display: block; 30 | left: 0; 31 | max-width: 100%; 32 | -webkit-overflow-scrolling: touch; 33 | overflow-x: hidden; 34 | overflow-y: auto; 35 | pointer-events: auto; 36 | top: 0; 37 | will-change: transform; 38 | z-index: 3; 39 | 40 | &[data-booted='true'] { 41 | transition-property: transform, width; 42 | } 43 | 44 | &__border { 45 | height: 100%; 46 | position: absolute; 47 | right: 0; 48 | top: 0; 49 | width: rem(1px); 50 | } 51 | 52 | &.v-navigation-drawer--right { 53 | &::after { 54 | left: 0; 55 | right: initial; 56 | } 57 | } 58 | 59 | &--right { 60 | left: auto; 61 | right: 0; 62 | 63 | > .v-navigation-drawer__border { 64 | left: 0; 65 | right: auto; 66 | } 67 | } 68 | 69 | &--absolute { 70 | position: absolute; 71 | } 72 | 73 | &--fixed { 74 | position: fixed; 75 | } 76 | 77 | &--floating::after { 78 | display: none; 79 | } 80 | 81 | &--mini-variant { 82 | overflow: hidden; 83 | 84 | .v-list__group__header__prepend-icon { 85 | flex: 1 0 auto; 86 | justify-content: center; 87 | width: 100%; 88 | } 89 | 90 | .v-list__tile__action, 91 | .v-list__tile__avatar { 92 | justify-content: center; 93 | min-width: rem(48px); 94 | } 95 | 96 | .v-list__tile__content, 97 | .v-list__tile::after { 98 | opacity: 0; 99 | } 100 | 101 | .v-subheader, 102 | .v-divider, 103 | .v-list--group { 104 | display: none !important; 105 | } 106 | } 107 | 108 | &--temporary, 109 | &--is-mobile { 110 | z-index: 6; 111 | 112 | &:not(.v-navigation-drawer--close) { 113 | @include elevation(16); 114 | } 115 | } 116 | 117 | .v-list { 118 | background: inherit; 119 | } 120 | 121 | > .v-list { 122 | .v-list__tile { 123 | font-weight: $navigation-drawer-item-font-weight; 124 | transition: none; 125 | 126 | &--active { 127 | .v-list__tile__title { 128 | color: inherit; 129 | } 130 | } 131 | } 132 | 133 | .v-list--group { 134 | .v-list__tile { 135 | font-weight: $navigation-drawer-group-item-font-weight; 136 | } 137 | 138 | &__header--active { 139 | &::after { 140 | background: transparent; 141 | } 142 | } 143 | } 144 | } 145 | 146 | > .v-list:not(.v-list--dense) { 147 | .v-list__tile { 148 | font-size: $navigation-drawer-item-font-size; 149 | } 150 | } 151 | } 152 | -------------------------------------------------------------------------------- /components/_overflow-buttons.scss: -------------------------------------------------------------------------------- 1 | @import '../bootstrap'; 2 | @import '../theme'; 3 | 4 | @mixin v-overflow-btn($material) { 5 | .v-input__control, 6 | .v-input__slot { 7 | &::before { 8 | background-color: map-get( 9 | $material, 10 | dividers 11 | ) !important; // override v-text-field bottom border 12 | } 13 | } 14 | 15 | &--segmented, 16 | &--editable:hover, 17 | &--editable.v-input--is-focused, 18 | &--editable.v-select--is-menu-active { 19 | .v-input__append-inner { 20 | border-left: rem(1px) solid map-get($material, dividers); 21 | } 22 | } 23 | 24 | &:hover, 25 | &.v-input--is-focused, 26 | &.v-select--is-menu-active { 27 | .v-input__slot { 28 | background: map-get($material, cards); 29 | } 30 | } 31 | } 32 | 33 | @include theme(light, 'v-overflow-btn') { 34 | @include v-overflow-btn($material-light); 35 | } 36 | 37 | @include theme(dark, 'v-overflow-btn') { 38 | @include v-overflow-btn($material-dark); 39 | } 40 | 41 | .v-overflow-btn { 42 | margin-top: rem(12px); 43 | padding-top: 0; 44 | 45 | &:not(.v-overflow-btn--editable) > .v-input__control > .v-input__slot { 46 | cursor: pointer; 47 | } 48 | 49 | .v-select__slot { 50 | height: rem(48px); 51 | 52 | input { 53 | cursor: pointer; 54 | margin-left: rem(16px); 55 | } 56 | } 57 | 58 | .v-select__selection--comma:first-child { 59 | margin-left: rem(16px); 60 | } 61 | 62 | .v-input__slot { 63 | transition: 0.3s map-get($transition, swing); 64 | 65 | &::after { 66 | content: none; 67 | } 68 | } 69 | 70 | .v-label { 71 | margin-left: rem(16px); 72 | top: calc(50% - #{rem(10px)}); 73 | } 74 | 75 | .v-input__append-inner { 76 | align-items: center; 77 | align-self: auto; 78 | flex-shrink: 0; 79 | height: rem(48px); 80 | margin-top: 0; 81 | padding: 0; 82 | width: rem(48px); 83 | } 84 | 85 | .v-input__append-outer, 86 | .v-input__prepend-outer { 87 | margin-bottom: rem(12px); 88 | margin-top: rem(12px); 89 | } 90 | 91 | .v-input__control::before { 92 | content: ''; 93 | // TODO: move to mixin 94 | height: rem(1px); 95 | left: 0; 96 | position: absolute; 97 | top: rem(-1px); 98 | transition: $primary-transition; 99 | width: 100%; 100 | } 101 | 102 | &.v-input--is-focused, 103 | &.v-select--is-menu-active { 104 | .v-input__slot { 105 | @include elevation(2); 106 | } 107 | } 108 | 109 | .v-select__selections { 110 | width: 0; 111 | } 112 | 113 | &--segmented { 114 | .v-select__selections { 115 | flex-wrap: nowrap; 116 | 117 | .v-btn { 118 | border-radius: 0; 119 | height: rem(48px); 120 | margin: 0; 121 | margin-right: rem(-16px); // push past the input's padding 122 | width: 100%; 123 | 124 | &__content { 125 | justify-content: start; 126 | 127 | &::before { 128 | background-color: transparent; 129 | } 130 | } 131 | } 132 | } 133 | } 134 | 135 | &--editable { 136 | .v-select__slot { 137 | input { 138 | cursor: text; 139 | } 140 | } 141 | 142 | .v-input__append-inner, 143 | .v-input__append-inner * { 144 | cursor: pointer; 145 | } 146 | } 147 | } 148 | -------------------------------------------------------------------------------- /components/_overlay.scss: -------------------------------------------------------------------------------- 1 | @import '../bootstrap'; 2 | 3 | .v-overlay { 4 | bottom: 0; 5 | left: 0; 6 | pointer-events: none; 7 | position: fixed; 8 | right: 0; 9 | top: 0; 10 | // The overlay has a dynamically set 11 | // z-index, we want the transition 12 | // timing to affect its changing 13 | // https://github.com/vuetifyjs/vuetify/issues/2146 14 | transition: 0.3s map-get($transition, swing); 15 | // This is the standard index 16 | z-index: 5; 17 | 18 | &--absolute { 19 | position: absolute; 20 | } 21 | 22 | &::before { 23 | background-color: rgba(33, 33, 33, 1); 24 | bottom: 0; 25 | content: ''; 26 | height: 100%; 27 | left: 0; 28 | opacity: 0; 29 | position: absolute; 30 | right: 0; 31 | top: 0; 32 | transition: inherit; 33 | // Delay the transition to avoid a 34 | // rendering bug that is visible 35 | // within Edge and Firefox 36 | // https://github.com/vuetifyjs/vuetify/issues/2146 37 | transition-delay: 150ms; 38 | width: 100%; 39 | } 40 | 41 | &--active { 42 | pointer-events: auto; 43 | touch-action: none; 44 | 45 | &::before { 46 | opacity: 0.46; 47 | } 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /components/_pagination.scss: -------------------------------------------------------------------------------- 1 | @import '../bootstrap'; 2 | @import '../theme'; 3 | 4 | @mixin v-pagination($material) { 5 | .v-pagination__item { 6 | background: map-get($material, cards); 7 | color: map-get($material, fg-color); 8 | 9 | &--active { 10 | color: map-deep-get($material, text, theme); 11 | } 12 | } 13 | 14 | .v-pagination__navigation { 15 | background: map-get($material, cards); 16 | 17 | .v-icon { 18 | color: rgba(map-get($material, fg-color), map-get($material, active-icon-percent)); 19 | } 20 | } 21 | } 22 | 23 | @include theme(light, 'v-pagination') { 24 | @include v-pagination($material-light); 25 | } 26 | 27 | @include theme(dark, 'v-pagination') { 28 | @include v-pagination($material-dark); 29 | } 30 | 31 | .v-pagination { 32 | align-items: center; 33 | display: inline-flex; 34 | list-style-type: none; 35 | margin: 0; 36 | max-width: 100%; 37 | min-width: rem(34px); 38 | padding: rem(0 5px); 39 | 40 | width: auto; 41 | 42 | > li { 43 | align-items: center; 44 | display: flex; 45 | } 46 | 47 | &--circle { 48 | .v-pagination__item, 49 | .v-pagination__more, 50 | .v-pagination__navigation { 51 | border-radius: 50%; 52 | } 53 | } 54 | 55 | &--disabled { 56 | opacity: 0.6; 57 | pointer-events: none; 58 | } 59 | 60 | &__item { 61 | @include elevation(2); 62 | background: transparent; 63 | border-radius: rem(4px); 64 | font-size: $button-font-size; 65 | height: rem(34px); 66 | margin: rem(0.3rem); 67 | text-decoration: none; 68 | transition: 0.3s map-get($transition, linear-out-slow-in); 69 | width: rem(34px); 70 | 71 | &--active { 72 | @include elevation(4); 73 | } 74 | } 75 | 76 | &__navigation { 77 | @include elevation(2); 78 | align-items: center; 79 | border-radius: rem(4px); 80 | display: inline-flex; 81 | height: rem(2rem); 82 | justify-content: center; 83 | margin: rem(0.3rem 10px); 84 | text-decoration: none; 85 | width: rem(2rem); 86 | 87 | .v-icon { 88 | font-size: rem(2rem); 89 | transition: $secondary-transition; 90 | vertical-align: middle; 91 | } 92 | 93 | &--disabled { 94 | opacity: 0.6; 95 | pointer-events: none; 96 | } 97 | } 98 | 99 | &__more { 100 | align-items: flex-end; 101 | display: inline-flex; 102 | height: rem(2rem); 103 | justify-content: center; 104 | margin: rem(0.3rem); 105 | width: rem(2rem); 106 | } 107 | } 108 | -------------------------------------------------------------------------------- /components/_parallax.scss: -------------------------------------------------------------------------------- 1 | @import '../bootstrap'; 2 | 3 | .v-parallax { 4 | overflow: hidden; 5 | position: relative; 6 | z-index: 0; 7 | 8 | &__image-container { 9 | bottom: 0; 10 | contain: strict; 11 | left: 0; 12 | position: absolute; 13 | right: 0; 14 | top: 0; 15 | z-index: 1; 16 | } 17 | 18 | &__image { 19 | bottom: 0; 20 | display: none; 21 | left: 50%; 22 | min-height: 100%; 23 | min-width: 100%; 24 | position: absolute; 25 | transform: translate(-50%, 0); 26 | transition: 0.3s opacity map-get($transition, swing); 27 | will-change: transform; 28 | z-index: 1; 29 | } 30 | 31 | &__content { 32 | color: #ffffff; 33 | display: flex; 34 | flex-direction: column; 35 | height: 100%; 36 | justify-content: center; 37 | padding: rem(0 1rem); 38 | position: relative; 39 | z-index: 2; 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /components/_pickers.scss: -------------------------------------------------------------------------------- 1 | @import '../bootstrap'; 2 | @import '../theme'; 3 | 4 | // Theme 5 | @mixin v-picker-title($material) { 6 | background: map-deep-get($material, picker, title); 7 | } 8 | 9 | @include theme(light, 'v-picker__title') { 10 | @include v-picker-title($material-light); 11 | } 12 | 13 | @include theme(dark, 'v-picker__title') { 14 | @include v-picker-title($material-dark); 15 | } 16 | 17 | @mixin v-picker-body($material) { 18 | background: map-deep-get($material, picker, body); 19 | } 20 | 21 | @include theme(light, 'v-picker__body') { 22 | @include v-picker-body($material-light); 23 | } 24 | 25 | @include theme(dark, 'v-picker__body') { 26 | @include v-picker-body($material-dark); 27 | } 28 | 29 | .v-picker { 30 | border-radius: $card-border-radius; 31 | contain: layout style; 32 | display: inline-flex; 33 | flex-direction: column; 34 | position: relative; 35 | vertical-align: top; 36 | 37 | &--full-width { 38 | display: flex; 39 | } 40 | 41 | &__title { 42 | border-top-left-radius: $card-border-radius; 43 | border-top-right-radius: $card-border-radius; 44 | color: #ffffff; 45 | padding: rem(16px); 46 | } 47 | 48 | &__title__btn { 49 | transition: $primary-transition; 50 | 51 | &:not(.v-picker__title__btn--active) { 52 | cursor: pointer; 53 | opacity: 0.6; 54 | 55 | &:hover:not(:focus) { 56 | opacity: 1; 57 | } 58 | } 59 | 60 | &--readonly { 61 | pointer-events: none; 62 | } 63 | 64 | &--active { 65 | opacity: 1; 66 | } 67 | } 68 | 69 | &__body { 70 | align-items: center; 71 | display: flex; 72 | flex: 1 0 auto; 73 | flex-direction: column; 74 | height: auto; 75 | overflow: hidden; 76 | position: relative; 77 | z-index: 0; 78 | 79 | > div { 80 | width: 100%; 81 | 82 | &.fade-transition-leave-active { 83 | position: absolute; 84 | } 85 | } 86 | } 87 | 88 | &--landscape { 89 | .v-picker__title { 90 | border-bottom-right-radius: 0; 91 | border-top-right-radius: 0; 92 | height: 100%; 93 | left: 0; 94 | position: absolute; 95 | top: 0; 96 | width: rem(170px); 97 | z-index: 1; 98 | } 99 | 100 | .v-picker__body, 101 | .v-picker__actions { 102 | margin-left: rem(170px); 103 | } 104 | } 105 | } 106 | -------------------------------------------------------------------------------- /components/_progress-circular.scss: -------------------------------------------------------------------------------- 1 | @import '../bootstrap'; 2 | 3 | .v-progress-circular { 4 | display: inline-flex; 5 | position: relative; 6 | vertical-align: middle; 7 | 8 | svg { 9 | bottom: 0; 10 | height: 100%; 11 | left: 0; 12 | margin: auto; 13 | position: absolute; 14 | right: 0; 15 | top: 0; 16 | width: 100%; 17 | z-index: 0; 18 | } 19 | 20 | &--indeterminate { 21 | svg { 22 | animation: $progress-circular-rotate-animation; 23 | transform-origin: center center; 24 | transition: $process-circular-intermediate-svg-transition; 25 | } 26 | 27 | .v-progress-circular__overlay { 28 | animation: $progress-circular-rotate-dash; 29 | stroke-dasharray: 80, 200; 30 | stroke-dashoffset: 0; 31 | stroke-linecap: round; 32 | } 33 | } 34 | 35 | &__underlay { 36 | stroke: $progress-circular-underlay-stroke; 37 | z-index: 1; 38 | } 39 | 40 | &__overlay { 41 | stroke: currentColor; 42 | transition: $progress-circular-overlay-transition; 43 | z-index: 2; 44 | } 45 | 46 | &__info { 47 | left: 50%; 48 | position: absolute; 49 | top: 50%; 50 | transform: translate(-50%, -50%); 51 | } 52 | 53 | @keyframes progress-circular-dash { 54 | 0% { 55 | stroke-dasharray: 1, 200; 56 | stroke-dashoffset: 0; 57 | } 58 | 59 | 50% { 60 | stroke-dasharray: 100, 200; 61 | stroke-dashoffset: rem(-15px); 62 | } 63 | 64 | 100% { 65 | stroke-dasharray: 100, 200; 66 | stroke-dashoffset: rem(-125px); 67 | } 68 | } 69 | 70 | @keyframes progress-circular-rotate { 71 | 100% { 72 | transform: rotate(360deg); 73 | } 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /components/_progress-linear.scss: -------------------------------------------------------------------------------- 1 | @import '../bootstrap'; 2 | 3 | .v-progress-linear { 4 | background: transparent; 5 | margin: rem(1rem 0); 6 | overflow: hidden; 7 | position: relative; 8 | width: 100%; 9 | 10 | &__bar { 11 | height: inherit; 12 | position: relative; 13 | transition: 0.2s map-get($transition, ease-in-out); 14 | width: 100%; 15 | z-index: 1; 16 | 17 | &__determinate { 18 | height: inherit; 19 | transition: 0.2s map-get($transition, ease-in-out); 20 | } 21 | 22 | &__indeterminate { 23 | .long, 24 | .short { 25 | background-color: inherit; 26 | bottom: 0; 27 | height: inherit; 28 | left: 0; 29 | position: absolute; 30 | top: 0; 31 | width: auto; 32 | will-change: left, right; 33 | } 34 | 35 | &--active .long { 36 | animation: indeterminate; 37 | animation-duration: 2.2s; 38 | animation-iteration-count: infinite; 39 | } 40 | 41 | &--active .short { 42 | animation: indeterminate-short; 43 | animation-duration: 2.2s; 44 | animation-iteration-count: infinite; 45 | } 46 | } 47 | } 48 | 49 | &__background { 50 | bottom: 0; 51 | left: 0; 52 | position: absolute; 53 | top: 0; 54 | transition: 0.3s ease-in; 55 | } 56 | 57 | &__content { 58 | left: 0; 59 | position: absolute; 60 | top: 0; 61 | width: 100%; 62 | z-index: 2; 63 | } 64 | 65 | &--query { 66 | .v-progress-linear__bar__indeterminate { 67 | &--active .long { 68 | animation: query; 69 | animation-duration: 2s; 70 | animation-iteration-count: infinite; 71 | } 72 | 73 | &--active .short { 74 | animation: query-short; 75 | animation-duration: 2s; 76 | animation-iteration-count: infinite; 77 | } 78 | } 79 | } 80 | 81 | @keyframes indeterminate { 82 | 0% { 83 | left: -90%; 84 | right: 100%; 85 | } 86 | 87 | 60% { 88 | left: -90%; 89 | right: 100%; 90 | } 91 | 92 | 100% { 93 | left: 100%; 94 | right: -35%; 95 | } 96 | } 97 | 98 | @keyframes indeterminate-short { 99 | 0% { 100 | left: -200%; 101 | right: 100%; 102 | } 103 | 104 | 60% { 105 | left: 107%; 106 | right: -8%; 107 | } 108 | 109 | 100% { 110 | left: 107%; 111 | right: -8%; 112 | } 113 | } 114 | 115 | @keyframes query { 116 | 0% { 117 | left: 100%; 118 | right: -90%; 119 | } 120 | 121 | 60% { 122 | left: 100%; 123 | right: -90%; 124 | } 125 | 126 | 100% { 127 | left: -35%; 128 | right: 100%; 129 | } 130 | } 131 | 132 | @keyframes query-short { 133 | 0% { 134 | left: 100%; 135 | right: -200%; 136 | } 137 | 138 | 60% { 139 | left: -8%; 140 | right: 107%; 141 | } 142 | 143 | 100% { 144 | left: -8%; 145 | right: 107%; 146 | } 147 | } 148 | } 149 | -------------------------------------------------------------------------------- /components/_radio-group.scss: -------------------------------------------------------------------------------- 1 | @import '../bootstrap'; 2 | @import '../theme'; 3 | 4 | .v-input--radio-group { 5 | &__input { 6 | display: flex; 7 | width: 100%; 8 | 9 | &--column .v-input--radio-group__input > .v-label { 10 | padding-bottom: rem(8px); 11 | } 12 | 13 | &--row .v-input--radio-group__input > .v-label { 14 | padding-right: rem(8px); 15 | } 16 | } 17 | 18 | &--row { 19 | .v-input--radio-group__input { 20 | flex-flow: row wrap; 21 | } 22 | } 23 | 24 | &--column { 25 | .v-radio:not(:last-child):not(:only-child) { 26 | margin-bottom: rem(8px); 27 | } 28 | 29 | .v-input--radio-group__input { 30 | flex-direction: column; 31 | } 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /components/_radios.scss: -------------------------------------------------------------------------------- 1 | @import '../bootstrap'; 2 | @import '../theme'; 3 | 4 | @mixin v-radio($material) { 5 | &--is-disabled { 6 | label { 7 | color: map-deep-get($material, text, disabled); 8 | } 9 | 10 | .v-icon { 11 | // needed for helper override 12 | color: map-deep-get($material, buttons, disabled) !important; 13 | } 14 | } 15 | } 16 | 17 | @include theme(light, 'v-radio') { 18 | @include v-radio($material-light); 19 | } 20 | 21 | @include theme(dark, 'v-radio') { 22 | @include v-radio($material-dark); 23 | } 24 | 25 | .v-radio { 26 | align-items: center; 27 | display: flex; 28 | height: auto; 29 | margin-right: rem(16px); 30 | outline: none; 31 | 32 | &--is-disabled { 33 | pointer-events: none; 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /components/_range-sliders.scss: -------------------------------------------------------------------------------- 1 | @import '../bootstrap'; 2 | @import '../theme'; 3 | 4 | // Theme 5 | @mixin v-range-slider($material) { 6 | &.v-input--slider.v-input--is-disabled { 7 | .v-slider.v-slider { 8 | .v-slider__thumb { 9 | background: map-deep-get($material, selection-controls, thumb, disabled); 10 | } 11 | } 12 | } 13 | } 14 | 15 | @include theme(light, 'v-input--range-slider') { 16 | @include v-range-slider($material-light); 17 | } 18 | 19 | @include theme(dark, 'v-input--range-slider') { 20 | @include v-range-slider($material-dark); 21 | } 22 | 23 | // Input Group 24 | .v-input--range-slider { 25 | &.v-input--is-disabled { 26 | .v-slider__track-fill { 27 | display: none; 28 | } 29 | 30 | &.v-input--slider { 31 | .v-slider.v-slider { 32 | .v-slider__thumb { 33 | border-color: transparent; 34 | } 35 | } 36 | } 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /components/_rating.scss: -------------------------------------------------------------------------------- 1 | .v-rating { 2 | .v-icon { 3 | border-radius: 50%; 4 | padding: rem(0.5rem); 5 | user-select: none; 6 | } 7 | 8 | &--readonly { 9 | .v-icon { 10 | pointer-events: none; 11 | } 12 | } 13 | 14 | &--dense { 15 | .v-icon { 16 | padding: rem(0.1rem); 17 | } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /components/_responsive.scss: -------------------------------------------------------------------------------- 1 | @import '../bootstrap'; 2 | 3 | .v-responsive { 4 | display: flex; 5 | flex: 1 0 auto; 6 | overflow: hidden; 7 | position: relative; 8 | 9 | &__content { 10 | flex: 1 0 0; 11 | } 12 | 13 | &__sizer { 14 | flex: 0 0 0; 15 | transition: padding-bottom 0.2s map-get($transition, swing); 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/_ripples.scss: -------------------------------------------------------------------------------- 1 | .v-ripple { 2 | &__container { 3 | border-radius: inherit; 4 | color: inherit; 5 | contain: strict; 6 | height: 100%; 7 | left: 0; 8 | overflow: hidden; 9 | pointer-events: none; 10 | position: absolute; 11 | top: 0; 12 | width: 100%; 13 | z-index: 0; 14 | } 15 | 16 | &__animation { 17 | background: currentColor; 18 | border-radius: 50%; 19 | color: inherit; 20 | left: 0; 21 | opacity: 0; 22 | overflow: hidden; 23 | pointer-events: none; 24 | position: absolute; 25 | top: 0; 26 | will-change: transform, opacity; 27 | 28 | &--enter { 29 | transition: none; 30 | } 31 | 32 | &--in { 33 | transition: $ripple-animation-transition-in; 34 | } 35 | 36 | &--out { 37 | transition: $ripple-animation-transition-out; 38 | } 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /components/_select.scss: -------------------------------------------------------------------------------- 1 | @import '../bootstrap'; 2 | @import '../theme'; 3 | 4 | @mixin v-select($material) { 5 | // Needs an explicit color to override 6 | // higher level color 7 | .v-select__selections { 8 | color: map-deep-get($material, text, primary); 9 | } 10 | 11 | &.v-input--is-disabled { 12 | .v-select__selections { 13 | color: map-deep-get($material, text, disabled); 14 | } 15 | } 16 | 17 | .v-chip--disabled, 18 | .v-select__selection--disabled { 19 | color: map-deep-get($material, text, disabled); 20 | } 21 | 22 | &.v-text-field--solo-inverted.v-input--is-focused { 23 | .v-select__selections { 24 | color: map-deep-get($material, inputs, solo-inverted-focused-text); 25 | } 26 | } 27 | } 28 | 29 | @include theme(light, 'v-select') { 30 | @include v-select($material-light); 31 | } 32 | 33 | @include theme(dark, 'v-select') { 34 | @include v-select($material-dark); 35 | } 36 | 37 | .v-select { 38 | position: relative; 39 | 40 | > .v-input__control > .v-input__slot { 41 | cursor: pointer; 42 | } 43 | 44 | .v-chip { 45 | flex: 0 1 auto; 46 | } 47 | 48 | .fade-transition-leave-active { 49 | left: 0; 50 | position: absolute; 51 | } 52 | 53 | &.v-input--is-dirty { 54 | ::placeholder { 55 | color: transparent !important; 56 | } 57 | } 58 | 59 | &:not(.v-input--is-dirty) { 60 | &:not(.v-input--is-focused) { 61 | .v-text-field__prefix { 62 | line-height: rem(20px); 63 | position: absolute; 64 | top: rem(7px); 65 | transition: $primary-transition; 66 | } 67 | } 68 | } 69 | 70 | &.v-text-field--enclosed:not(.v-text-field--single-line) { 71 | .v-select__selections { 72 | padding-top: rem(24px); 73 | } 74 | } 75 | 76 | &.v-text-field { 77 | input { 78 | flex: 1 1; // Doesn't resize on IE11 with 3rd param 79 | margin-top: 0; 80 | min-width: 0; 81 | pointer-events: none; 82 | position: relative; 83 | } 84 | } 85 | 86 | &.v-select--is-menu-active { 87 | .v-input__icon--append .v-icon { 88 | transform: rotate(180deg); 89 | } 90 | } 91 | 92 | &.v-select--chips { 93 | input { 94 | margin: 0; 95 | } 96 | 97 | .v-select__selections { 98 | min-height: rem(42px); 99 | } 100 | 101 | &.v-select--chips--small { 102 | .v-select__selections { 103 | min-height: rem(32px); 104 | } 105 | } 106 | 107 | &:not(.v-text-field--single-line) { 108 | &.v-text-field--box, 109 | &.v-text-field--enclosed { 110 | .v-select__selections { 111 | min-height: rem(68px); 112 | } 113 | 114 | &.v-select--chips--small { 115 | .v-select__selections { 116 | min-height: rem(56px); 117 | } 118 | } 119 | } 120 | } 121 | } 122 | 123 | &.v-text-field--reverse { 124 | .v-select__slot, 125 | .v-select__selections { 126 | flex-direction: row-reverse; 127 | } 128 | } 129 | 130 | &__selections { 131 | align-items: center; 132 | display: flex; 133 | flex: 1 1 auto; 134 | flex-wrap: wrap; 135 | line-height: rem(18px); 136 | } 137 | 138 | &__selection { 139 | max-width: 90%; 140 | 141 | &--comma { 142 | align-items: center; 143 | display: inline-flex; 144 | margin: rem(7px 4px 7px 0); 145 | } 146 | } 147 | 148 | &__slot { 149 | align-items: center; 150 | display: flex; 151 | position: relative; 152 | width: 100%; 153 | } 154 | 155 | &:not(.v-text-field--single-line) { 156 | .v-select__slot { 157 | // If an input is a direct child 158 | // there is no selections div 159 | // and we must move input to 160 | // the end of the container 161 | > input { 162 | align-self: flex-end; 163 | } 164 | } 165 | } 166 | } 167 | -------------------------------------------------------------------------------- /components/_selection-controls.scss: -------------------------------------------------------------------------------- 1 | @import '../bootstrap'; 2 | @import '../theme'; 3 | 4 | // Theme 5 | @mixin selection-control($material) { 6 | &.v-input--is-disabled { 7 | .v-icon { 8 | // needed for helper override 9 | color: map-deep-get($material, buttons, disabled) !important; 10 | } 11 | } 12 | } 13 | 14 | @mixin v-selection-control-rtl { 15 | .v-input--selection-controls__input { 16 | margin-left: rem(8px); 17 | margin-right: 0; 18 | } 19 | } 20 | 21 | @include theme(light, 'v-input--selection-controls') { 22 | @include selection-control($material-light); 23 | } 24 | 25 | @include theme(dark, 'v-input--selection-controls') { 26 | @include selection-control($material-dark); 27 | } 28 | 29 | @include rtl('v-input--selection-controls') { 30 | @include v-selection-control-rtl; 31 | } 32 | 33 | .v-input--selection-controls { 34 | margin-top: $input-top-spacing; 35 | padding-top: rem(4px); 36 | 37 | .v-input__append-outer, 38 | .v-input__prepend-outer { 39 | margin-bottom: 0; 40 | margin-top: 0; 41 | } 42 | 43 | .v-input__control { 44 | flex-grow: 0; 45 | width: auto; 46 | } 47 | 48 | &:not(.v-input--hide-details) { 49 | .v-input__slot { 50 | margin-bottom: rem(12px); 51 | } 52 | } 53 | 54 | &__input { 55 | color: inherit; 56 | display: inline-flex; 57 | flex: 0 0 auto; 58 | height: rem(24px); 59 | margin-right: rem(8px); 60 | position: relative; 61 | transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); 62 | transition-property: color, transform; 63 | user-select: none; 64 | width: rem(24px); 65 | 66 | input { 67 | cursor: pointer; 68 | height: 100%; 69 | opacity: 0; 70 | position: absolute; 71 | user-select: none; 72 | width: 100%; 73 | } 74 | 75 | // Sibling selector to avoid targeting v-radio-group's label 76 | + .v-label { 77 | cursor: pointer; 78 | user-select: none; 79 | } 80 | } 81 | 82 | &__ripple { 83 | border-radius: 50%; 84 | cursor: pointer; 85 | height: rem(34px); 86 | left: rem(-12px); 87 | margin: rem(7px); 88 | position: absolute; 89 | top: calc(50% - #{rem(24px)}); 90 | transition: inherit; 91 | width: rem(34px); 92 | 93 | &::before { 94 | border-radius: inherit; 95 | bottom: 0; 96 | content: ''; 97 | left: 0; 98 | opacity: 0.2; 99 | position: absolute; 100 | right: 0; 101 | top: 0; 102 | transform: scale(0.2); 103 | transform-origin: center center; 104 | transition: inherit; 105 | } 106 | 107 | .v-ripple__container { 108 | transform: scale(1.4); 109 | } 110 | } 111 | 112 | &.v-input .v-label { 113 | align-items: center; 114 | display: inline-flex; 115 | height: auto; 116 | top: 0; 117 | } 118 | 119 | &.v-input--is-focused, 120 | .v-radio--is-focused { 121 | .v-input--selection-controls__ripple::before { 122 | background: currentColor; 123 | transform: scale(0.8); 124 | } 125 | } 126 | } 127 | -------------------------------------------------------------------------------- /components/_sheet.scss: -------------------------------------------------------------------------------- 1 | @import '../bootstrap'; 2 | @import '../theme'; 3 | 4 | /* Themes */ 5 | @mixin v-sheet($material) { 6 | background-color: map-get($material, cards); 7 | border-color: map-get($material, cards); 8 | color: map-deep-get($material, text, primary); 9 | } 10 | 11 | @include theme(light, 'v-sheet') { 12 | @include v-sheet($material-light); 13 | } 14 | 15 | @include theme(dark, 'v-sheet') { 16 | @include v-sheet($material-dark); 17 | } 18 | 19 | .v-sheet { 20 | border-radius: $sheet-border-radius; 21 | display: block; 22 | position: relative; 23 | transition: $primary-transition; 24 | 25 | &--tile { 26 | border-radius: 0; 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /components/_small-dialog.scss: -------------------------------------------------------------------------------- 1 | @import '../bootstrap'; 2 | @import '../theme'; 3 | 4 | @mixin v-small-dialog($material) { 5 | a { 6 | color: rgba(map-get($material, fg-color), map-get($material, primary-text-percent)); 7 | } 8 | } 9 | 10 | @include theme(light, 'v-small-dialog') { 11 | @include v-small-dialog($material-light); 12 | } 13 | 14 | @include theme(dark, 'v-small-dialog') { 15 | @include v-small-dialog($material-dark); 16 | } 17 | 18 | @mixin content-actions($material) { 19 | background: map-get($material, cards); 20 | } 21 | 22 | @include theme(light, 'v-small-dialog__content') { 23 | @include content-actions($material-light); 24 | } 25 | 26 | @include theme(dark, 'v-small-dialog__content') { 27 | @include content-actions($material-dark); 28 | } 29 | 30 | @include theme(light, 'v-small-dialog__actions') { 31 | @include content-actions($material-light); 32 | } 33 | 34 | @include theme(dark, 'v-small-dialog__actions') { 35 | @include content-actions($material-dark); 36 | } 37 | 38 | .v-small-dialog { 39 | display: block; 40 | height: 100%; 41 | width: 100%; 42 | 43 | &__content { 44 | padding: rem(0 rem(24px)); 45 | } 46 | 47 | &__actions { 48 | text-align: right; 49 | white-space: pre; 50 | } 51 | 52 | a { 53 | align-items: center; 54 | display: flex; 55 | 56 | height: 100%; 57 | text-decoration: none; 58 | 59 | > * { 60 | width: 100%; 61 | } 62 | } 63 | 64 | .v-menu__activator { 65 | height: 100%; 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /components/_snackbars.scss: -------------------------------------------------------------------------------- 1 | @import '../bootstrap'; 2 | 3 | @mixin v-snack-rtl { 4 | &__content { 5 | .v-btn { 6 | margin: rem(0 24px 0 0); 7 | } 8 | } 9 | } 10 | 11 | @include rtl('v-snack') { 12 | @include v-snack-rtl; 13 | } 14 | 15 | .v-snack { 16 | align-items: center; 17 | color: $snackbar-color; 18 | display: flex; 19 | font-size: rem(14px); 20 | left: 0; 21 | pointer-events: none; 22 | position: fixed; 23 | right: 0; 24 | z-index: 1000; 25 | 26 | &--absolute { 27 | position: absolute; 28 | } 29 | 30 | &--top { 31 | top: 0; 32 | } 33 | 34 | &--bottom { 35 | bottom: 0; 36 | } 37 | 38 | &__wrapper { 39 | @include elevation(6); 40 | align-items: center; 41 | background-color: $snackbar-background-color; 42 | display: flex; 43 | pointer-events: auto; 44 | width: 100%; 45 | } 46 | 47 | &__content { 48 | align-items: center; 49 | display: flex; 50 | height: rem(48px); 51 | justify-content: space-between; 52 | overflow: hidden; 53 | padding: rem(14px 24px); 54 | width: 100%; 55 | 56 | .v-btn { 57 | color: $snackbar-color; 58 | flex: 0 0 auto; 59 | height: auto; 60 | margin: rem(0 0 0 24px); 61 | min-width: auto; 62 | padding: rem(8px); 63 | width: auto; 64 | 65 | &__content { 66 | margin: rem(-2px); 67 | 68 | &::before { 69 | display: none; 70 | } 71 | } 72 | } 73 | } 74 | 75 | &--multi-line &__content { 76 | height: rem(80px); 77 | padding: rem(24px); 78 | } 79 | 80 | &--vertical &__content { 81 | // https://stackoverflow.com/questions/35111090/text-in-a-flex-container-doesnt-wrap-in-ie11 82 | align-items: stretch; 83 | flex-direction: column; 84 | height: rem(112px); 85 | padding: rem(24px 24px 14px); 86 | 87 | .v-btn { 88 | // specificity 89 | &.v-btn { 90 | justify-content: flex-end; 91 | margin-left: 0; 92 | margin-top: rem(24px); 93 | padding: 0; 94 | } 95 | 96 | &__content { 97 | flex: 0 0 auto; 98 | margin: 0; 99 | } 100 | } 101 | } 102 | 103 | &--auto-height &__content { 104 | height: auto; 105 | } 106 | } 107 | 108 | @mixin v-snack-sm-and-up-rtl { 109 | @include breakpoint(sm-and-up) { 110 | &__content .v-btn:first-of-type { 111 | margin-left: 0; 112 | margin-right: rem(42px); 113 | } 114 | } 115 | } 116 | 117 | @include rtl('v-snack') { 118 | @include v-snack-sm-and-up-rtl; 119 | } 120 | 121 | @include breakpoint(sm-and-up) { 122 | .v-snack { 123 | &__wrapper { 124 | border-radius: rem(2px); 125 | margin: 0 auto; 126 | max-width: rem(568px); 127 | min-width: rem(288px); 128 | width: auto; 129 | 130 | .v-snack--left & { 131 | margin-left: 0; 132 | } 133 | 134 | .v-snack--right & { 135 | margin-right: 0; 136 | } 137 | } 138 | 139 | &--left, 140 | &--right { 141 | margin: 0 $snackbar-corner-offset; 142 | 143 | &.v-snack--top { 144 | transform: translateY($snackbar-corner-offset); 145 | } 146 | 147 | &.v-snack--bottom { 148 | transform: translateY(0 - $snackbar-corner-offset); 149 | } 150 | } 151 | 152 | &__content .v-btn:first-of-type { 153 | margin-left: rem(42px); 154 | } 155 | } 156 | } 157 | 158 | .v-snack-transition { 159 | &-enter-active, 160 | &-leave-active { 161 | transition: transform 0.4s map-get($transition, swing); 162 | 163 | .v-snack__content { 164 | transition: opacity 0.3s linear 0.1s; 165 | } 166 | } 167 | 168 | &-enter { 169 | .v-snack__content { 170 | opacity: 0; 171 | } 172 | } 173 | 174 | &-enter-to, 175 | &-leave { 176 | .v-snack__content { 177 | opacity: 1; 178 | } 179 | } 180 | 181 | &-enter, 182 | &-leave-to { 183 | &.v-snack.v-snack--top { 184 | // Extra 8px to hide the bottom shadow 185 | transform: translateY(calc(-100% - #{rem(8px)})); 186 | } 187 | 188 | &.v-snack.v-snack--bottom { 189 | transform: translateY(100%); 190 | } 191 | } 192 | } 193 | -------------------------------------------------------------------------------- /components/_speed-dial.scss: -------------------------------------------------------------------------------- 1 | @import '../bootstrap'; 2 | 3 | .v-speed-dial { 4 | position: relative; 5 | 6 | &--absolute { 7 | position: absolute; 8 | } 9 | 10 | &--fixed { 11 | position: fixed; 12 | } 13 | 14 | &--fixed, 15 | &--absolute { 16 | z-index: 4; 17 | 18 | > .v-btn--floating { 19 | margin: 0; 20 | } 21 | } 22 | 23 | &--top { 24 | &:not(.v-speed-dial--absolute) { 25 | top: map-get($grid-gutters, lg); 26 | } 27 | 28 | &.v-speed-dial--absolute { 29 | top: 50%; 30 | transform: translateY(-50%); 31 | } 32 | } 33 | 34 | &--bottom { 35 | &:not(.v-speed-dial--absolute) { 36 | bottom: map-get($grid-gutters, lg); 37 | } 38 | 39 | &.v-speed-dial--absolute { 40 | bottom: 50%; 41 | transform: translateY(50%); 42 | } 43 | } 44 | 45 | &--left { 46 | left: map-get($grid-gutters, lg); 47 | } 48 | 49 | &--right { 50 | right: map-get($grid-gutters, lg); 51 | } 52 | 53 | &--direction { 54 | &-left, 55 | &-right { 56 | .v-speed-dial__list { 57 | height: 100%; 58 | top: 0; 59 | } 60 | } 61 | 62 | &-top, 63 | &-bottom { 64 | .v-speed-dial__list { 65 | left: 0; 66 | width: 100%; 67 | } 68 | } 69 | 70 | &-top { 71 | .v-speed-dial__list { 72 | bottom: 100%; 73 | flex-direction: column-reverse; 74 | } 75 | } 76 | 77 | &-right { 78 | .v-speed-dial__list { 79 | flex-direction: row; 80 | left: 100%; 81 | } 82 | } 83 | 84 | &-bottom { 85 | .v-speed-dial__list { 86 | flex-direction: column; 87 | top: 100%; 88 | } 89 | } 90 | 91 | &-left { 92 | .v-speed-dial__list { 93 | flex-direction: row-reverse; 94 | right: 100%; 95 | } 96 | } 97 | } 98 | } 99 | 100 | // Elements 101 | .v-speed-dial__list { 102 | align-items: center; 103 | display: flex; 104 | justify-content: center; 105 | position: absolute; 106 | 107 | .v-btn { 108 | @for $n from 1 through 7 { 109 | &:nth-child(#{$n}) { 110 | transition-delay: #{$n * 0.05}s; 111 | } 112 | } 113 | } 114 | } 115 | -------------------------------------------------------------------------------- /components/_steppers.scss: -------------------------------------------------------------------------------- 1 | @import '../bootstrap'; 2 | @import '../theme'; 3 | 4 | @mixin v-stepper($material) { 5 | background: map-get($material, bg-color); 6 | 7 | .v-stepper__step { 8 | &:not(.v-stepper__step--active) { 9 | &:not(.v-stepper__step--complete) { 10 | &:not(.v-stepper__step--error) { 11 | .v-stepper__step__step { 12 | background: rgba( 13 | map-get($material, fg-color), 14 | map-get($material, disabledORhints-text-percent) 15 | ); 16 | } 17 | } 18 | } 19 | } 20 | 21 | &__step { 22 | color: map-deep-get($material, stepper, active); 23 | 24 | .v-icon { 25 | color: map-deep-get($material, stepper, active); 26 | } 27 | } 28 | 29 | &--active { 30 | .v-stepper__label { 31 | text-shadow: 0 0 0 rgba(map-get($material, fg-color), 1); 32 | } 33 | } 34 | 35 | &--editable:hover { 36 | background: rgba(map-get($material, fg-color), 0.06); 37 | 38 | .v-stepper__label { 39 | text-shadow: 0 0 0 rgba(map-get($material, fg-color), 1); 40 | } 41 | } 42 | 43 | &--complete { 44 | .v-stepper__label { 45 | color: map-deep-get($material, stepper, completed); 46 | } 47 | } 48 | 49 | &--inactive { 50 | &.v-stepper__step--editable:not(.v-stepper__step--error) { 51 | &:hover { 52 | .v-stepper__step__step { 53 | background: map-deep-get($material, stepper, hover); 54 | } 55 | } 56 | } 57 | } 58 | } 59 | 60 | .v-stepper__header { 61 | .v-divider { 62 | border-color: rgba(map-get($material, fg-color), map-get($material, divider-percent)); 63 | } 64 | } 65 | 66 | .v-stepper__label { 67 | color: rgba(map-get($material, fg-color), map-get($material, disabledORhints-text-percent)); 68 | 69 | small { 70 | color: rgba(map-get($material, fg-color), map-get($material, secondary-text-percent)); 71 | } 72 | } 73 | 74 | &--non-linear { 75 | .v-stepper__step:not(.v-stepper__step--complete):not(.v-stepper__step--error) { 76 | .v-stepper__label { 77 | color: rgba( 78 | map-get($material, fg-color), 79 | map-get($material, secondary-text-percent) 80 | ); 81 | } 82 | } 83 | } 84 | 85 | &--vertical { 86 | .v-stepper__content:not(:last-child) { 87 | border-left: rem(1px) solid 88 | rgba(map-get($material, fg-color), map-get($material, divider-percent)); 89 | } 90 | } 91 | } 92 | 93 | @mixin v-stepper-rtl() { 94 | .v-stepper__step__step { 95 | margin-left: rem(12px); 96 | margin-right: 0; 97 | } 98 | } 99 | 100 | @include theme(light, 'v-stepper') { 101 | @include v-stepper($material-light); 102 | } 103 | 104 | @include theme(dark, 'v-stepper') { 105 | @include v-stepper($material-dark); 106 | } 107 | 108 | @include rtl('v-stepper') { 109 | @include v-stepper-rtl; 110 | } 111 | 112 | .v-stepper { 113 | @include elevation(2); 114 | overflow: hidden; 115 | position: relative; 116 | 117 | &__header { 118 | @include elevation(2); 119 | align-items: stretch; 120 | display: flex; 121 | flex-wrap: wrap; 122 | height: rem(72px); 123 | justify-content: space-between; 124 | 125 | .v-divider { 126 | align-self: center; 127 | margin: rem(0 -16px); 128 | } 129 | } 130 | 131 | &__items { 132 | overflow: hidden; 133 | position: relative; 134 | } 135 | 136 | &__step__step { 137 | align-items: center; 138 | border-radius: 50%; 139 | display: inline-flex; 140 | font-size: rem(12px); 141 | height: rem(24px); 142 | justify-content: center; 143 | margin-right: rem(8px); 144 | min-width: rem(24px); 145 | transition: 0.3s map-get($transition, fast-in-fast-out); 146 | width: rem(24px); 147 | 148 | .v-icon { 149 | font-size: rem(18px); 150 | } 151 | } 152 | 153 | &__step { 154 | align-items: center; 155 | display: flex; 156 | flex-direction: row; 157 | padding: rem(24px); 158 | position: relative; 159 | 160 | &--active { 161 | .v-stepper__label { 162 | transition: 0.3s map-get($transition, ease-in-out); 163 | } 164 | } 165 | 166 | &--editable { 167 | cursor: pointer; 168 | } 169 | 170 | &.v-stepper__step--error { 171 | .v-stepper__step__step { 172 | background: transparent; 173 | color: inherit; 174 | 175 | .v-icon { 176 | color: inherit; 177 | font-size: rem(24px); 178 | } 179 | } 180 | 181 | .v-stepper__label { 182 | color: inherit; 183 | font-weight: font-weight(medium); 184 | text-shadow: none; 185 | 186 | small { 187 | color: inherit; 188 | } 189 | } 190 | } 191 | } 192 | 193 | &__label { 194 | align-items: flex-start; 195 | display: flex; 196 | flex-direction: column; 197 | text-align: left; 198 | 199 | small { 200 | font-size: rem(12px); 201 | font-weight: font-weight(light); 202 | text-shadow: none; 203 | } 204 | } 205 | 206 | &__wrapper { 207 | overflow: hidden; 208 | transition: none; 209 | } 210 | 211 | &__content { 212 | flex: 1 0 auto; 213 | padding: rem(24px 24px 16px); 214 | top: 0; 215 | // Chrome has an issue with overflow hidden for rendering 216 | // Originally used translateZ but this messes up fixed 217 | // elements within the stepper 218 | // Fix for #512 and #620 219 | // overflow: hidden 220 | width: 100%; 221 | 222 | > .v-btn { 223 | margin: rem(24px 8px 8px 0); 224 | } 225 | } 226 | 227 | &--is-booted { 228 | .v-stepper__content, 229 | .v-stepper__wrapper { 230 | transition: 0.3s map-get($transition, swing); 231 | } 232 | } 233 | 234 | &--vertical { 235 | padding-bottom: rem(36px); 236 | 237 | .v-stepper__content { 238 | margin: rem(-8px -36px -16px 36px); 239 | padding: rem(16px 60px 16px 23px); 240 | width: auto; 241 | } 242 | 243 | .v-stepper__step { 244 | padding: rem(24px 24px 16px); 245 | } 246 | 247 | .v-stepper__step__step { 248 | margin-right: rem(12px); 249 | } 250 | } 251 | 252 | &--alt-labels { 253 | .v-stepper__header { 254 | height: auto; 255 | 256 | .v-divider { 257 | align-self: flex-start; 258 | margin: rem(35px -67px 0); 259 | } 260 | } 261 | 262 | .v-stepper__step { 263 | align-items: center; 264 | flex-basis: rem(175px); 265 | flex-direction: column; 266 | justify-content: flex-start; 267 | 268 | small { 269 | align-self: center; 270 | } 271 | } 272 | 273 | .v-stepper__step__step { 274 | margin-bottom: rem(11px); 275 | margin-right: 0; 276 | } 277 | } 278 | } 279 | 280 | @include breakpoint(sm-and-down) { 281 | .v-stepper:not(.v-stepper--vertical) { 282 | .v-stepper__label { 283 | display: none; 284 | } 285 | 286 | .v-stepper__step__step { 287 | margin-right: 0; 288 | } 289 | } 290 | } 291 | -------------------------------------------------------------------------------- /components/_subheaders.scss: -------------------------------------------------------------------------------- 1 | @import '../bootstrap'; 2 | @import '../theme'; 3 | 4 | @mixin v-subheader($material) { 5 | color: map-deep-get($material, text, secondary); 6 | } 7 | 8 | @include theme(light, 'v-subheader') { 9 | @include v-subheader($material-light); 10 | } 11 | 12 | @include theme(dark, 'v-subheader') { 13 | @include v-subheader($material-dark); 14 | } 15 | 16 | .v-subheader { 17 | align-items: center; 18 | display: flex; 19 | font-size: map-deep-get($headings, body-2, size); 20 | font-weight: map-deep-get($headings, body-2, weight); 21 | height: $list-item-single-height; 22 | padding: 0 $list-right-padding 0 $list-left-padding; 23 | 24 | &--inset { 25 | margin-left: $subheader-inset-margin; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /components/_switch.scss: -------------------------------------------------------------------------------- 1 | @import '../bootstrap'; 2 | @import '../theme'; 3 | 4 | // Theme 5 | @mixin v-input--switch($material) { 6 | &__thumb { 7 | color: map-deep-get($material, selection-controls, thumb, inactive); 8 | } 9 | 10 | &__track { 11 | color: map-deep-get($material, selection-controls, track, inactive); 12 | } 13 | 14 | &.v-input--is-disabled { 15 | .v-input--switch__thumb { 16 | color: map-deep-get($material, selection-controls, thumb, disabled) !important; 17 | } 18 | 19 | .v-input--switch__track { 20 | color: map-deep-get($material, selection-controls, track, disabled) !important; 21 | } 22 | } 23 | } 24 | 25 | @mixin v-input--switch-rtl() { 26 | .v-input--selection-controls__ripple { 27 | left: auto; 28 | right: rem(-14px); 29 | } 30 | 31 | &.v-input--is-dirty { 32 | .v-input--selection-controls__ripple, 33 | .v-input--switch__thumb { 34 | transform: translate(rem(-16px), 0); 35 | } 36 | } 37 | } 38 | 39 | @include theme(light, 'v-input--switch') { 40 | @include v-input--switch($material-light); 41 | } 42 | 43 | @include theme(dark, 'v-input--switch') { 44 | @include v-input--switch($material-dark); 45 | } 46 | 47 | @include rtl('v-input--switch') { 48 | @include v-input--switch-rtl; 49 | } 50 | 51 | .v-input--switch { 52 | &__track, 53 | &__thumb { 54 | background-color: currentColor; 55 | pointer-events: none; 56 | transition: inherit; 57 | } 58 | 59 | &__track { 60 | border-radius: rem(8px); 61 | height: rem(14px); 62 | left: rem(2px); 63 | opacity: 0.6; 64 | position: absolute; 65 | right: rem(2px); 66 | top: calc(50% - #{rem(7px)}); 67 | } 68 | 69 | &__thumb { 70 | @include elevation(4); 71 | align-items: center; 72 | border-radius: 50%; 73 | display: flex; 74 | height: rem(20px); 75 | justify-content: center; 76 | position: relative; 77 | top: calc(50% - #{rem(10px)}); 78 | width: rem(20px); 79 | } 80 | 81 | .v-input--selection-controls__input { 82 | width: rem(38px); 83 | } 84 | 85 | .v-input--selection-controls__ripple { 86 | left: rem(-14px); 87 | top: calc(50% - #{rem(24px)}); 88 | } 89 | 90 | &.v-input--is-dirty { 91 | .v-input--selection-controls__ripple, 92 | .v-input--switch__thumb { 93 | transform: translate(rem(16px), 0); 94 | } 95 | } 96 | } 97 | -------------------------------------------------------------------------------- /components/_system-bars.scss: -------------------------------------------------------------------------------- 1 | @import '../bootstrap'; 2 | @import '../theme'; 3 | 4 | // Theme 5 | @mixin v-system-bar($material) { 6 | background-color: map-deep-get($material, status-bar, regular); 7 | color: map-deep-get($material, text, secondary); 8 | 9 | .v-icon { 10 | color: map-deep-get($material, text, secondary); 11 | } 12 | 13 | &--lights-out { 14 | background-color: map-deep-get($material, status-bar, lights-out) !important; 15 | } 16 | } 17 | 18 | @include theme(light, 'v-system-bar') { 19 | @include v-system-bar($material-light); 20 | } 21 | 22 | @include theme(dark, 'v-system-bar') { 23 | @include v-system-bar($material-dark); 24 | } 25 | 26 | .v-system-bar { 27 | align-items: center; 28 | display: flex; 29 | font-size: map-deep-get($headings, body-2, size); 30 | font-weight: map-deep-get($headings, body-2, weight); 31 | padding: rem(0 8px); 32 | 33 | .v-icon { 34 | font-size: map-deep-get($headings, subheading, size); 35 | } 36 | 37 | &--fixed, 38 | &--absolute { 39 | left: 0; 40 | top: 0; 41 | width: 100%; 42 | z-index: 3; 43 | } 44 | 45 | &--fixed { 46 | position: fixed; 47 | } 48 | 49 | &--absolute { 50 | position: absolute; 51 | } 52 | 53 | &--status { 54 | .v-icon { 55 | margin-right: rem(4px); 56 | } 57 | } 58 | 59 | &--window { 60 | .v-icon { 61 | font-size: map-deep-get($headings, h6, size); 62 | margin-right: rem(8px); 63 | } 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /components/_tables.scss: -------------------------------------------------------------------------------- 1 | @import '../bootstrap'; 2 | @import '../theme'; 3 | 4 | // Theme 5 | @mixin v-table($material) { 6 | background-color: map-get($material, cards); 7 | color: map-deep-get($material, text, primary); 8 | 9 | thead { 10 | tr { 11 | &:first-child { 12 | border-bottom: rem(1px) solid 13 | rgba(map-get($material, fg-color), map-get($material, divider-percent)); 14 | } 15 | } 16 | 17 | th { 18 | color: rgba(map-get($material, text-color), map-get($material, secondary-text-percent)); 19 | } 20 | } 21 | 22 | tbody { 23 | tr { 24 | &:not(:last-child) { 25 | border-bottom: rem(1px) solid 26 | rgba(map-get($material, fg-color), map-get($material, divider-percent)); 27 | } 28 | 29 | &[active] { 30 | background: map-deep-get($material, table, active); 31 | } 32 | 33 | &:hover:not(.v-datatable__expand-row) { 34 | background: map-deep-get($material, table, hover); 35 | } 36 | } 37 | } 38 | 39 | tfoot { 40 | tr { 41 | border-top: rem(1px) solid 42 | rgba(map-get($material, fg-color), map-get($material, divider-percent)); 43 | } 44 | } 45 | } 46 | 47 | @include theme(light, 'v-table') { 48 | @include v-table($material-light); 49 | } 50 | 51 | @include theme(dark, 'v-table') { 52 | @include v-table($material-dark); 53 | } 54 | 55 | .v-table { 56 | &__overflow { 57 | overflow-x: auto; 58 | overflow-y: hidden; 59 | width: 100%; 60 | } 61 | } 62 | 63 | table.v-table { 64 | border-collapse: collapse; 65 | border-radius: rem(2px); 66 | border-spacing: 0; 67 | max-width: 100%; 68 | width: 100%; 69 | 70 | thead, 71 | tbody { 72 | td, 73 | th { 74 | &:not(:nth-child(1)), 75 | &:first-child { 76 | padding: rem(0 24px); 77 | } 78 | } 79 | } 80 | 81 | thead { 82 | tr { 83 | height: rem(56px); 84 | } 85 | 86 | th { 87 | font-size: rem(12px); 88 | font-weight: font-weight(medium); 89 | transition: 0.3s map-get($transition, swing); 90 | user-select: none; 91 | white-space: nowrap; 92 | 93 | &.sortable { 94 | pointer-events: auto; 95 | } 96 | 97 | > div { 98 | width: 100%; 99 | } 100 | } 101 | } 102 | 103 | tbody { 104 | tr { 105 | transition: background $primary-transition; 106 | will-change: background; 107 | } 108 | 109 | td, 110 | th { 111 | height: rem(48px); 112 | } 113 | 114 | td { 115 | font-size: rem(13px); 116 | font-weight: font-weight(regular); 117 | } 118 | } 119 | 120 | .v-input--selection-controls { 121 | padding: 0; 122 | 123 | .v-input__details { 124 | display: none; 125 | } 126 | 127 | &.checkbox { 128 | .v-icon { 129 | left: 50%; 130 | transform: translateX(-50%); 131 | } 132 | 133 | .v-input--selection-controls__ripple { 134 | left: 50%; 135 | transform: translate(-50%, -50%); 136 | } 137 | } 138 | } 139 | 140 | tfoot { 141 | tr { 142 | height: rem(48px); 143 | 144 | td { 145 | padding: rem(0 24px); 146 | } 147 | } 148 | } 149 | } 150 | -------------------------------------------------------------------------------- /components/_tabs.scss: -------------------------------------------------------------------------------- 1 | @import '../bootstrap'; 2 | @import '../theme'; 3 | 4 | // Theme 5 | @mixin v-tabs__bar($material) { 6 | background-color: map-get($material, cards); 7 | 8 | .v-tabs__div { 9 | color: map-deep-get($material, tabs, active); 10 | } 11 | 12 | .v-tabs__item--disabled { 13 | color: map-deep-get($material, buttons, disabled); 14 | } 15 | } 16 | 17 | @include theme(light, 'v-tabs__bar') { 18 | @include v-tabs__bar($material-light); 19 | } 20 | 21 | @include theme(dark, 'v-tabs__bar') { 22 | @include v-tabs__bar($material-dark); 23 | } 24 | 25 | .v-tabs { 26 | position: relative; 27 | } 28 | 29 | .v-tabs__bar { 30 | border-radius: inherit; 31 | position: relative; 32 | } 33 | 34 | .v-tabs__icon { 35 | align-items: center; 36 | cursor: pointer; 37 | display: inline-flex; 38 | height: 100%; 39 | position: absolute; 40 | top: 0; 41 | user-select: none; 42 | width: rem(32px); 43 | 44 | &--prev { 45 | left: rem(4px); 46 | } 47 | 48 | &--next { 49 | right: rem(4px); 50 | } 51 | } 52 | 53 | .v-tabs__wrapper { 54 | contain: content; 55 | display: flex; 56 | overflow: hidden; 57 | 58 | &--show-arrows { 59 | margin-left: rem(40px); 60 | margin-right: rem(40px); 61 | 62 | .v-tabs__container--align-with-title { 63 | padding-left: rem(16px); 64 | 65 | @include breakpoint(xs-only) { 66 | padding-left: rem(24px); 67 | } 68 | } 69 | } 70 | } 71 | 72 | .v-tabs__container { 73 | display: flex; 74 | flex: 1 0 auto; 75 | height: rem(48px); 76 | list-style-type: none; 77 | position: relative; 78 | transition: transform 0.6s cubic-bezier(0.86, 0, 0.07, 1); 79 | white-space: nowrap; 80 | 81 | &--overflow { 82 | .v-tabs__div { 83 | flex: 1 0 auto; 84 | } 85 | } 86 | 87 | &--grow { 88 | .v-tabs__div { 89 | flex: 1 0 auto; 90 | max-width: none; 91 | } 92 | } 93 | 94 | &--icons-and-text { 95 | height: rem(72px); 96 | 97 | .v-tabs__item { 98 | flex-direction: column-reverse; 99 | 100 | .v-icon { 101 | margin-bottom: rem(6px); 102 | } 103 | } 104 | } 105 | 106 | &--align-with-title { 107 | padding-left: rem(56px); 108 | } 109 | 110 | &--fixed-tabs, 111 | &--icons-and-text { 112 | .v-tabs__div { 113 | min-width: rem(72px); 114 | 115 | @include breakpoint(sm-and-up) { 116 | min-width: rem(160px); 117 | } 118 | } 119 | } 120 | 121 | &--fixed-tabs { 122 | .v-tabs__div { 123 | @include breakpoint(xs-only) { 124 | flex: 1 0 auto; 125 | } 126 | } 127 | } 128 | 129 | &--centered, 130 | &--fixed-tabs, 131 | &--right { 132 | > .v-tabs__div:first-child { 133 | margin-left: auto; 134 | } 135 | 136 | .v-tabs__slider-wrapper + .v-tabs__div { 137 | margin-left: auto; 138 | } 139 | } 140 | 141 | &--centered, 142 | &--fixed-tabs { 143 | > .v-tabs__div:last-child { 144 | margin-right: auto; 145 | } 146 | } 147 | } 148 | 149 | .v-tabs__div { 150 | align-items: center; 151 | display: inline-flex; 152 | flex: 0 1 auto; 153 | font-size: rem(14px); 154 | font-weight: font-weight(medium); 155 | height: inherit; 156 | line-height: normal; 157 | max-width: rem(264px); 158 | text-align: center; 159 | text-transform: $tab-text-transform; 160 | vertical-align: middle; 161 | } 162 | 163 | .v-tabs__item { 164 | align-items: center; 165 | color: inherit; 166 | display: flex; 167 | flex: 1 1 auto; 168 | height: 100%; 169 | justify-content: center; 170 | max-width: inherit; 171 | padding: rem(6px 12px); 172 | text-decoration: none; 173 | transition: $primary-transition; 174 | user-select: none; 175 | white-space: normal; 176 | 177 | &:not(.v-tabs__item--active) { 178 | opacity: 0.7; 179 | } 180 | 181 | &--disabled { 182 | pointer-events: none; 183 | } 184 | } 185 | 186 | .v-tabs__slider { 187 | height: rem(2px); 188 | width: 100%; 189 | 190 | &-wrapper { 191 | bottom: 0; 192 | margin: 0 !important; 193 | position: absolute; 194 | transition: $primary-transition; 195 | } 196 | } 197 | -------------------------------------------------------------------------------- /components/_textarea.scss: -------------------------------------------------------------------------------- 1 | @import '../bootstrap'; 2 | @import '../theme'; 3 | 4 | @mixin v-textarea($material) { 5 | &.v-text-field--solo-inverted.v-text-field--solo { 6 | &.v-input--is-focused { 7 | textarea { 8 | color: map-deep-get($material, inputs, solo-inverted-focused-text); 9 | } 10 | } 11 | } 12 | } 13 | 14 | @mixin v-textarea-rtl { 15 | &.v-text-field--enclosed { 16 | .v-text-field__slot { 17 | margin-left: rem(-12px); 18 | margin-right: 0; 19 | 20 | textarea { 21 | padding-left: rem(12px); 22 | padding-right: 0; 23 | } 24 | } 25 | } 26 | } 27 | 28 | @include theme(light, 'v-textarea') { 29 | @include v-textarea($material-light); 30 | } 31 | 32 | @include theme(dark, 'v-textarea') { 33 | @include v-textarea($material-dark); 34 | } 35 | 36 | @include rtl('v-textarea') { 37 | @include v-textarea-rtl; 38 | } 39 | 40 | .v-textarea { 41 | textarea { 42 | flex: 1 1 auto; 43 | line-height: rem(18px); 44 | max-width: 100%; 45 | min-height: rem(32px); 46 | outline: none; 47 | padding: rem(7px 0 8px); 48 | width: 100%; 49 | } 50 | 51 | .v-text-field__prefix { 52 | align-self: start; 53 | padding-top: rem(4px); 54 | } 55 | 56 | &.v-text-field--full-width, 57 | &.v-text-field--full-width.v-text-field--single-line { 58 | .v-text-field__slot { 59 | textarea { 60 | margin-top: 0; 61 | } 62 | } 63 | 64 | .v-text-field__details { 65 | bottom: rem(4px); 66 | } 67 | } 68 | 69 | &.v-text-field--enclosed { 70 | .v-text-field__slot { 71 | margin-right: rem(-12px); 72 | 73 | textarea { 74 | padding-right: rem(12px); 75 | } 76 | } 77 | } 78 | 79 | &.v-text-field--box, 80 | &.v-text-field--enclosed { 81 | .v-text-field__prefix, 82 | textarea { 83 | margin-top: rem(24px); 84 | } 85 | 86 | &.v-text-field--single-line { 87 | .v-text-field__prefix, 88 | textarea { 89 | margin-top: rem(12px); 90 | } 91 | 92 | .v-label { 93 | top: rem(18px); 94 | } 95 | 96 | &.v-text-field--outline { 97 | .v-input__control { 98 | padding-top: 0; 99 | } 100 | } 101 | } 102 | } 103 | 104 | &.v-text-field--solo { 105 | align-items: flex-start; 106 | 107 | // Essentially revert styles 108 | // applied by v-text-field 109 | .v-input__prepend-inner, 110 | .v-input__prepend-outer, 111 | .v-input__append-inner, 112 | .v-input__append-outer { 113 | align-self: flex-start; 114 | margin-top: rem(16px); 115 | } 116 | } 117 | 118 | &--auto-grow { 119 | textarea { 120 | overflow: hidden; 121 | } 122 | } 123 | 124 | &--no-resize { 125 | textarea { 126 | resize: none; 127 | } 128 | } 129 | } 130 | -------------------------------------------------------------------------------- /components/_time-picker-clock.scss: -------------------------------------------------------------------------------- 1 | @import '../bootstrap'; 2 | @import '../theme'; 3 | 4 | // Theme 5 | @mixin v-time-picker-clock($material) { 6 | background: map-deep-get($material, picker, clock); 7 | 8 | .v-time-picker-clock__item--disabled { 9 | color: map-deep-get($material, buttons, disabled); 10 | 11 | &.v-time-picker-clock__item--active { 12 | color: map-deep-get($material-dark, buttons, disabled); 13 | } 14 | } 15 | 16 | &--indeterminate { 17 | .v-time-picker-clock__hand { 18 | background-color: map-deep-get($material, picker, indeterminateTime); 19 | 20 | &::after { 21 | color: map-deep-get($material, picker, indeterminateTime); 22 | } 23 | } 24 | 25 | .v-time-picker-clock__item--active { 26 | background-color: map-deep-get($material, picker, indeterminateTime); 27 | } 28 | } 29 | } 30 | 31 | @include theme(light, 'v-time-picker-clock') { 32 | @include v-time-picker-clock($material-light); 33 | } 34 | 35 | @include theme(dark, 'v-time-picker-clock') { 36 | @include v-time-picker-clock($material-dark); 37 | } 38 | 39 | .v-time-picker-clock { 40 | border-radius: 100%; 41 | padding-top: 100%; 42 | position: relative; 43 | transition: $primary-transition; 44 | user-select: none; 45 | width: 100%; 46 | 47 | &__container { 48 | align-items: center; 49 | display: flex; 50 | justify-content: center; 51 | padding: rem(10px); 52 | } 53 | 54 | &__hand { 55 | bottom: 50%; 56 | height: calc(50% - #{rem(4px)}); 57 | left: calc(50% - #{rem(1px)}); 58 | position: absolute; 59 | transform-origin: center bottom; 60 | width: rem(2px); 61 | will-change: transform; 62 | z-index: 1; 63 | 64 | &::before { 65 | background: transparent; 66 | border-color: inherit; 67 | border-radius: 100%; 68 | border-style: solid; 69 | border-width: rem(2px); 70 | content: ''; 71 | height: rem(10px); 72 | left: 50%; 73 | position: absolute; 74 | top: rem(-4px); 75 | transform: translate(-50%, -50%); 76 | width: rem(10px); 77 | } 78 | 79 | &::after { 80 | background-color: inherit; 81 | border-color: inherit; 82 | border-radius: 100%; 83 | border-style: solid; 84 | content: ''; 85 | height: rem(8px); 86 | left: 50%; 87 | position: absolute; 88 | top: 100%; 89 | transform: translate(-50%, -50%); 90 | width: rem(8px); 91 | } 92 | 93 | &--inner::after { 94 | height: rem(14px); 95 | } 96 | } 97 | } 98 | 99 | .v-picker--full-width { 100 | .v-time-picker-clock__container { 101 | max-width: rem(290px); 102 | } 103 | } 104 | 105 | .v-time-picker-clock__inner { 106 | bottom: rem(27px); 107 | left: rem(27px); 108 | position: absolute; 109 | right: rem(27px); 110 | top: rem(27px); 111 | } 112 | 113 | .v-time-picker-clock__item { 114 | align-items: center; 115 | border-radius: 100%; 116 | cursor: default; 117 | display: flex; 118 | font-size: $time-picker-number-font-size; 119 | height: $time-picker-indicator-size; 120 | justify-content: center; 121 | position: absolute; 122 | text-align: center; 123 | transform: translate(-50%, -50%); 124 | user-select: none; 125 | width: $time-picker-indicator-size; 126 | 127 | > span { 128 | z-index: 1; 129 | } 130 | 131 | &::before, 132 | &::after { 133 | border-radius: 100%; 134 | content: ''; 135 | // height: rem(14px); 136 | height: $time-picker-indicator-size; 137 | left: 50%; 138 | position: absolute; 139 | top: 50%; 140 | transform: translate(-50%, -50%); 141 | // width: rem(14px); 142 | width: $time-picker-indicator-size; 143 | } 144 | 145 | &--active { 146 | color: #ffffff; 147 | cursor: default; 148 | z-index: 2; 149 | } 150 | 151 | &--disabled { 152 | pointer-events: none; 153 | } 154 | } 155 | -------------------------------------------------------------------------------- /components/_time-picker-title.scss: -------------------------------------------------------------------------------- 1 | @import '../bootstrap'; 2 | 3 | .v-time-picker-title { 4 | color: #ffffff; 5 | display: flex; 6 | justify-content: flex-end; 7 | line-height: 1; 8 | } 9 | 10 | .v-time-picker-title__time { 11 | white-space: nowrap; 12 | 13 | .v-picker__title__btn, 14 | span { 15 | align-items: center; 16 | display: inline-flex; 17 | font-size: rem(70px); 18 | height: rem(70px); 19 | justify-content: center; 20 | } 21 | } 22 | 23 | .v-time-picker-title__ampm { 24 | align-self: flex-end; 25 | display: flex; 26 | flex-direction: column; 27 | font-size: rem(16px); 28 | margin: rem(8px 0 6px 8px); 29 | text-transform: uppercase; 30 | 31 | div:only-child { 32 | flex-direction: row; 33 | } 34 | } 35 | 36 | .v-picker__title--landscape { 37 | .v-time-picker-title { 38 | flex-direction: column; 39 | height: 100%; 40 | justify-content: center; 41 | } 42 | 43 | .v-time-picker-title__time { 44 | text-align: right; 45 | 46 | .v-picker__title__btn, 47 | span { 48 | font-size: rem(55px); 49 | height: rem(55px); 50 | } 51 | } 52 | 53 | .v-time-picker-title__ampm { 54 | align-self: initial; 55 | margin: rem(16px 0 0); 56 | text-align: center; 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /components/_timeline.scss: -------------------------------------------------------------------------------- 1 | @import '../bootstrap'; 2 | @import '../theme'; 3 | 4 | @mixin v-timeline($material) { 5 | &::before { 6 | background: map-get($material, dividers); 7 | 8 | .v-timeline-item { 9 | &__dot { 10 | background: map-get($material, cards); 11 | 12 | .v-card { 13 | &::before { 14 | border-right-color: $shadow-key-ambient-opacity; 15 | } 16 | } 17 | } 18 | } 19 | } 20 | } 21 | 22 | @include theme(light, 'v-timeline') { 23 | @include v-timeline($material-light); 24 | } 25 | 26 | @include theme(dark, 'v-timeline') { 27 | @include v-timeline($material-dark); 28 | } 29 | 30 | @mixin timeline-dots($dot-size, $inner-dot-size, $inner-dot-margin) { 31 | height: $dot-size; 32 | left: calc(50% - #{$dot-size / 2}); 33 | width: $dot-size; 34 | 35 | .v-timeline-item__inner-dot { 36 | height: $inner-dot-size; 37 | margin: $inner-dot-margin; 38 | width: $inner-dot-size; 39 | } 40 | } 41 | 42 | .v-timeline-item { 43 | display: flex; 44 | flex-direction: row-reverse; 45 | padding-bottom: rem(24px); 46 | 47 | &:nth-child(odd):not(.v-timeline-item--right), 48 | &--left { 49 | flex-direction: row; 50 | 51 | .v-card::before, 52 | .v-card::after { 53 | left: 100%; 54 | transform: rotate(180deg); 55 | } 56 | 57 | .v-timeline-item__opposite { 58 | margin-left: rem(96px); 59 | text-align: left; 60 | 61 | .v-card::before, 62 | .v-card::after { 63 | left: rem(-10px); 64 | transform: rotate(0); 65 | } 66 | } 67 | } 68 | 69 | &:nth-child(even):not(.v-timeline-item--left), 70 | &--right { 71 | .v-card::before, 72 | .v-card::after { 73 | right: 100%; 74 | } 75 | 76 | .v-timeline-item__opposite { 77 | margin-right: rem(96px); 78 | text-align: right; 79 | 80 | .v-card::before, 81 | .v-card::after { 82 | right: rem(-10px); 83 | transform: rotate(180deg); 84 | } 85 | } 86 | } 87 | 88 | &__dot, 89 | &__inner-dot { 90 | border-radius: 50%; 91 | } 92 | 93 | &__dot { 94 | @include elevation(1); 95 | @include timeline-dots( 96 | $timeline-dot-regular-size, 97 | $timeline-inner-dot-regular-size, 98 | $timeline-inner-dot-regular-margin 99 | ); 100 | align-self: center; 101 | position: absolute; 102 | 103 | &--small { 104 | @include timeline-dots( 105 | $timeline-dot-small-size, 106 | $timeline-inner-dot-small-size, 107 | $timeline-inner-dot-small-margin 108 | ); 109 | } 110 | 111 | &--large { 112 | @include timeline-dots( 113 | $timeline-dot-large-size, 114 | $timeline-inner-dot-large-size, 115 | $timeline-inner-dot-large-margin 116 | ); 117 | } 118 | } 119 | 120 | &__inner-dot { 121 | align-items: center; 122 | display: flex; 123 | justify-content: center; 124 | } 125 | 126 | &__body { 127 | flex: 1 1 100%; 128 | height: 100%; 129 | max-width: calc(50% - #{rem(48px)}); 130 | position: relative; 131 | } 132 | 133 | .v-card { 134 | &::before, 135 | &::after { 136 | border-bottom: $timeline-wedge-size solid transparent; 137 | border-right: $timeline-wedge-size solid #000000; 138 | border-top: $timeline-wedge-size solid transparent; 139 | content: ''; 140 | position: absolute; 141 | top: calc(50% - #{$timeline-wedge-size}); 142 | } 143 | 144 | &::after { 145 | border-right-color: inherit; 146 | } 147 | 148 | &::before { 149 | top: calc(50% - #{$timeline-wedge-size} + #{rem(2px)}); 150 | } 151 | } 152 | 153 | &__opposite { 154 | align-self: center; 155 | flex: 1 1 auto; 156 | max-width: calc(50% - #{rem(48px)}); 157 | } 158 | 159 | &--fill-dot { 160 | .v-timeline-item__inner-dot { 161 | height: inherit; 162 | margin: 0; 163 | width: inherit; 164 | } 165 | } 166 | } 167 | 168 | .v-timeline { 169 | padding-top: rem(24px); 170 | position: relative; 171 | 172 | &::before { 173 | bottom: 0; 174 | content: ''; 175 | height: 100%; 176 | left: calc(50% - #{rem(1px)}); 177 | position: absolute; 178 | top: 0; 179 | width: rem(2px); 180 | } 181 | 182 | &--align-top { 183 | .v-timeline-item { 184 | position: relative; 185 | 186 | &__dot { 187 | top: rem(6px); 188 | 189 | &--small { 190 | top: rem(12px); 191 | } 192 | 193 | &--large { 194 | top: 0; 195 | } 196 | } 197 | 198 | .v-card { 199 | &::before { 200 | top: calc(0% + #{$timeline-wedge-size} + #{rem(2px)}); 201 | } 202 | 203 | &::after { 204 | top: calc(0% + #{$timeline-wedge-size}); 205 | } 206 | } 207 | } 208 | } 209 | 210 | &--dense { 211 | &::before { 212 | left: rem(18px); // -1 for line width 213 | } 214 | 215 | .v-timeline-item { 216 | &:nth-child(odd):not(.v-timeline-item--right), 217 | &--left { 218 | flex-direction: row-reverse; 219 | 220 | .v-card { 221 | &::before, 222 | &::after { 223 | left: -$timeline-wedge-size; 224 | right: initial; 225 | transform: none; 226 | } 227 | } 228 | } 229 | 230 | &__dot { 231 | left: 0; 232 | } 233 | 234 | &__dot--small { 235 | left: rem(7px); // -1 for line width 236 | } 237 | 238 | &__dot--large { 239 | left: rem(-7px); 240 | } 241 | 242 | &__body { 243 | max-width: calc(100% - #{rem(64px)}); 244 | } 245 | 246 | &__opposite { 247 | display: none; 248 | } 249 | } 250 | } 251 | } 252 | -------------------------------------------------------------------------------- /components/_toolbar.scss: -------------------------------------------------------------------------------- 1 | @import '../bootstrap'; 2 | @import '../theme'; 3 | 4 | // Theme 5 | @mixin v-toolbar($material) { 6 | background-color: map-get($material, app-bar); 7 | color: map-deep-get($material, text, primary); 8 | } 9 | 10 | @mixin v-toolbar-rtl { 11 | &__title { 12 | &:not(:first-child) { 13 | margin-left: 0; 14 | margin-right: rem(20px); 15 | } 16 | } 17 | } 18 | 19 | @include theme(light, 'v-toolbar') { 20 | @include v-toolbar($material-light); 21 | } 22 | 23 | @include theme(dark, 'v-toolbar') { 24 | @include v-toolbar($material-dark); 25 | } 26 | 27 | @include rtl('v-toolbar') { 28 | @include v-toolbar-rtl; 29 | } 30 | 31 | @mixin v-toolbar-content($direction) { 32 | &.v-btn--icon { 33 | margin-#{$direction}: rem(-6px); 34 | } 35 | 36 | &.v-menu .v-menu__activator, 37 | &.v-tooltip span { 38 | .v-btn { 39 | margin-#{$direction}: 0; 40 | } 41 | 42 | .v-btn--icon { 43 | margin-#{$direction}: rem(-6px); 44 | } 45 | } 46 | margin-#{$direction}: 0; 47 | } 48 | 49 | .v-toolbar { 50 | @include bootable; 51 | @include elevation(4); 52 | 53 | position: relative; 54 | width: 100%; 55 | will-change: padding-left, padding-right; 56 | 57 | // TODO: Do we even need this? 58 | .v-text-field--enclosed, 59 | .v-text-field--box { 60 | margin: 0; 61 | 62 | .v-text-field__details { 63 | display: none; 64 | } 65 | } 66 | 67 | // Children 68 | .v-tabs { 69 | width: 100%; 70 | } 71 | 72 | &__title { 73 | font-size: map-deep-get($headings, h6, size); 74 | font-weight: map-deep-get($headings, h6, weight); 75 | letter-spacing: map-deep-get($headings, h6, letter-spacing); 76 | overflow: hidden; 77 | text-overflow: ellipsis; 78 | white-space: nowrap; 79 | 80 | &:not(:first-child) { 81 | margin-left: rem(20px); 82 | } 83 | } 84 | 85 | &__content, 86 | &__extension { 87 | align-items: center; 88 | display: flex; 89 | padding: 0 map-get($grid-gutters, xl); 90 | 91 | @include breakpoint(sm-and-down) { 92 | padding: 0 map-get($grid-gutters, lg); 93 | } 94 | 95 | .v-btn--icon { 96 | margin: rem(6px); 97 | } 98 | 99 | > *:first-child { 100 | @include v-toolbar-content(left); 101 | } 102 | 103 | > *:last-child { 104 | @include v-toolbar-content(right); 105 | } 106 | 107 | > .v-list { 108 | flex: 1 1 auto; 109 | max-height: 100%; 110 | } 111 | 112 | > .v-list:first-child { 113 | margin-left: -#{map-get($grid-gutters, xl)}; 114 | 115 | @include breakpoint(sm-and-down) { 116 | margin-left: -#{map-get($grid-gutters, lg)}; 117 | } 118 | } 119 | 120 | > .v-list:last-child { 121 | margin-right: -#{map-get($grid-gutters, xl)}; 122 | 123 | @include breakpoint(sm-and-down) { 124 | margin-right: -#{map-get($grid-gutters, lg)}; 125 | } 126 | } 127 | } 128 | 129 | &__extension { 130 | > .v-toolbar__title { 131 | margin-left: rem(72px); 132 | } 133 | } 134 | 135 | &__items { 136 | display: flex; 137 | height: inherit; 138 | max-width: 100%; 139 | padding: 0; 140 | 141 | .v-btn { 142 | align-items: center; 143 | align-self: center; 144 | } 145 | 146 | .v-tooltip, 147 | .v-tooltip > span { 148 | height: inherit; 149 | } 150 | 151 | .v-btn:not(.v-btn--floating):not(.v-btn--icon), 152 | .v-menu, 153 | .v-menu__activator { 154 | height: inherit; 155 | margin: 0; 156 | } 157 | } 158 | 159 | // Types 160 | .v-overflow-btn, 161 | .v-btn-toggle { 162 | @include elevation(0); 163 | } 164 | 165 | .v-input { 166 | margin: 0; 167 | } 168 | 169 | .v-overflow-btn { 170 | .v-input__control, 171 | .v-input__slot { 172 | &::before { 173 | display: none; 174 | } 175 | } 176 | } 177 | 178 | &--card { 179 | @include elevation(0); 180 | border-radius: $card-border-radius $card-border-radius 0 0; 181 | } 182 | 183 | &--fixed { 184 | position: fixed; 185 | z-index: 2; 186 | } 187 | 188 | &--fixed, 189 | &--absolute { 190 | left: 0; 191 | top: 0; 192 | } 193 | 194 | &--absolute { 195 | position: absolute; 196 | z-index: 2; 197 | } 198 | 199 | &--floating { 200 | display: inline-flex; 201 | margin: map-get($grid-gutters, lg); 202 | width: auto; 203 | } 204 | 205 | &--clipped { 206 | z-index: 3; 207 | } 208 | } 209 | -------------------------------------------------------------------------------- /components/_tooltips.scss: -------------------------------------------------------------------------------- 1 | @import '../bootstrap'; 2 | 3 | .v-tooltip { 4 | @include breakpoint(sm-and-down) { 5 | .v-tooltip__content { 6 | padding: rem(10px 16px); 7 | } 8 | } 9 | 10 | &__content { 11 | @include elevation(2); 12 | background: map-get($grey, darken-2); 13 | border-radius: rem(2px); 14 | color: #ffffff; 15 | display: inline-block; 16 | font-size: rem(12px); 17 | padding: rem(5px 8px); 18 | position: absolute; 19 | text-transform: initial; 20 | width: auto; 21 | 22 | &[class*='-active'] { 23 | pointer-events: none; 24 | transition: 0.15s map-get($transition, swing); 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /components/_treeview.scss: -------------------------------------------------------------------------------- 1 | @import '../bootstrap'; 2 | @import '../theme'; 3 | 4 | // Theme 5 | @mixin v-treeview($material) { 6 | color: map-deep-get($material, text, primary); 7 | 8 | &--hoverable .v-treeview-node__root:hover, 9 | .v-treeview-node--active { 10 | background: map-get($material, dividers); 11 | } 12 | } 13 | 14 | @mixin v-treeview-rtl() { 15 | > .v-treeview-node { 16 | margin-right: 0; 17 | 18 | &--leaf { 19 | margin-left: 0; 20 | margin-right: rem(24px); 21 | } 22 | } 23 | 24 | &-node { 25 | margin-left: 0; 26 | margin-right: rem(26px); 27 | 28 | &--leaf { 29 | margin-left: 0; 30 | margin-right: rem(50px); 31 | } 32 | 33 | &__toggle { 34 | transform: rotate(90deg); 35 | 36 | &--open { 37 | transform: none; 38 | } 39 | } 40 | } 41 | } 42 | 43 | @include theme(light, 'v-treeview') { 44 | @include v-treeview($material-light); 45 | } 46 | 47 | @include theme(dark, 'v-treeview') { 48 | @include v-treeview($material-dark); 49 | } 50 | 51 | @include rtl('v-treeview') { 52 | @include v-treeview-rtl; 53 | } 54 | 55 | .v-treeview { 56 | > .v-treeview-node { 57 | margin-left: 0; 58 | 59 | &--leaf { 60 | margin-left: rem(24px); 61 | } 62 | } 63 | 64 | &-node { 65 | margin-left: rem(26px); 66 | 67 | &--excluded { 68 | display: none; 69 | } 70 | 71 | &--click { 72 | > .v-treeview-node__root, 73 | > .v-treeview-node__root > .v-treeview-node__content > * { 74 | cursor: pointer; 75 | user-select: none; 76 | } 77 | } 78 | 79 | &--leaf { 80 | margin-left: rem(50px); 81 | } 82 | 83 | &__root { 84 | align-items: center; 85 | display: flex; 86 | height: rem(34px); 87 | } 88 | 89 | &__content { 90 | align-items: center; 91 | display: flex; 92 | flex-grow: 1; 93 | flex-shrink: 0; 94 | 95 | // TODO: this is temporary fix for d-flex * shenanigans 96 | .v-btn { 97 | flex-grow: 0 !important; 98 | flex-shrink: 1 !important; 99 | } 100 | } 101 | 102 | &__label { 103 | flex-grow: 1; 104 | flex-shrink: 0; 105 | font-size: rem(1.2rem); 106 | margin-left: rem(6px); 107 | 108 | .v-icon { 109 | padding-right: rem(8px); 110 | } 111 | } 112 | 113 | &__checkbox { 114 | user-select: none; 115 | } 116 | 117 | &__toggle { 118 | transform: rotate(-90deg); 119 | user-select: none; 120 | 121 | &--open { 122 | transform: none; 123 | } 124 | 125 | &--loading { 126 | // stylelint-disable-next-line no-unknown-animations 127 | animation: progress-circular-rotate 1s linear infinite; 128 | } 129 | } 130 | 131 | &__children { 132 | transition: all $treeview-transition; 133 | } 134 | } 135 | } 136 | -------------------------------------------------------------------------------- /components/_windows.scss: -------------------------------------------------------------------------------- 1 | @import '../bootstrap'; 2 | 3 | .v-window { 4 | &__container { 5 | position: relative; 6 | transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1); 7 | 8 | &--is-active { 9 | overflow: hidden; 10 | } 11 | } 12 | 13 | &-x-transition, 14 | &-x-reverse-transition, 15 | &-y-transition, 16 | &-y-reverse-transition { 17 | &-enter-active, 18 | &-leave-active { 19 | transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1); 20 | } 21 | 22 | &-leave, 23 | &-leave-to { 24 | position: absolute !important; 25 | top: 0; 26 | width: 100%; 27 | } 28 | } 29 | 30 | &-x-transition { 31 | &-enter { 32 | transform: translateX(100%); 33 | } 34 | 35 | &-leave-to { 36 | transform: translateX(-100%); 37 | } 38 | } 39 | 40 | &-x-reverse-transition { 41 | &-enter { 42 | transform: translateX(-100%); 43 | } 44 | 45 | &-leave-to { 46 | transform: translateX(100%); 47 | } 48 | } 49 | 50 | &-y-transition { 51 | &-enter { 52 | transform: translateY(100%); 53 | } 54 | 55 | &-leave-to { 56 | transform: translateY(-100%); 57 | } 58 | } 59 | 60 | &-y-reverse-transition { 61 | &-enter { 62 | transform: translateY(-100%); 63 | } 64 | 65 | &-leave-to { 66 | transform: translateY(100%); 67 | } 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /elements/_all.scss: -------------------------------------------------------------------------------- 1 | @import 'blockquote'; 2 | @import 'code'; 3 | @import 'global'; 4 | @import 'headings'; 5 | @import 'lists'; 6 | @import 'typography'; 7 | -------------------------------------------------------------------------------- /elements/_blockquote.scss: -------------------------------------------------------------------------------- 1 | .blockquote { 2 | font-size: 1.125rem; 3 | font-weight: font-weight(light); 4 | padding: map-deep-get($spacers, three, y) 0 map-deep-get($spacers, three, y) 5 | map-deep-get($spacers, four, x); 6 | } 7 | -------------------------------------------------------------------------------- /elements/_code.scss: -------------------------------------------------------------------------------- 1 | code, 2 | kbd { 3 | border-radius: 3px; 4 | display: inline-block; 5 | font-size: 85%; 6 | // stylelint-disable-next-line color-named 7 | font-weight: font-weight(black); 8 | white-space: pre-wrap; 9 | 10 | &::after, 11 | &::before { 12 | content: '\00a0'; 13 | letter-spacing: -1px; 14 | } 15 | } 16 | 17 | code { 18 | @include elevation(1); 19 | background-color: map-get($grey, lighten-4); 20 | color: #bd4147; 21 | } 22 | 23 | kbd { 24 | background: map-get($grey, darken-2); 25 | color: #ffffff; 26 | } 27 | -------------------------------------------------------------------------------- /elements/_global.scss: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: $font-size-root; 3 | -webkit-font-smoothing: antialiased; 4 | -moz-osx-font-smoothing: grayscale; 5 | overflow-x: hidden; 6 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 7 | text-rendering: optimizeLegibility; 8 | } 9 | 10 | body { 11 | font-size: map-deep-get($headings, body-1, size); 12 | font-weight: map-deep-get($headings, body-1, weight); 13 | } 14 | 15 | .application { 16 | font-family: $body-font-family; 17 | line-height: $line-height-root; 18 | } 19 | 20 | ::-ms-clear, 21 | ::-ms-reveal { 22 | display: none; 23 | } 24 | -------------------------------------------------------------------------------- /elements/_headings.scss: -------------------------------------------------------------------------------- 1 | @import '../theme'; 2 | 3 | @mixin heading($material) { 4 | color: map-deep-get($material, text, primary); 5 | } 6 | 7 | @include theme(light, 'heading') { 8 | @include heading($material-light); 9 | } 10 | 11 | @include theme(dark, 'heading') { 12 | @include heading($material-dark); 13 | } 14 | -------------------------------------------------------------------------------- /elements/_lists.scss: -------------------------------------------------------------------------------- 1 | ul, 2 | ol { 3 | padding-left: map-deep-get($spacers, four, x); 4 | } 5 | -------------------------------------------------------------------------------- /elements/_typography.scss: -------------------------------------------------------------------------------- 1 | @import '../tools/helpers/all'; 2 | 3 | $_heading-classes: ( 4 | h1: 'display-4', 5 | h2: 'display-3', 6 | h3: 'display-2', 7 | h4: 'display-1', 8 | h5: 'headline', 9 | h6: 'title', 10 | subheading: 'subheading', 11 | body-2: 'body-2', 12 | body-1: 'body-1', 13 | caption: 'caption', 14 | button: 'v-btn', 15 | ) !default; 16 | $_heading-classes-large: (h1, h2, h3, h4, h5, h6) !default; 17 | 18 | @each $heading, $props in $headings { 19 | $selector: if( 20 | map-has-key($_heading-classes, $heading), 21 | if( 22 | $heading-style-tags and index($_heading-classes-large, $heading), 23 | '#{$heading}, .#{map-get($_heading-classes, $heading)}', 24 | '.#{map-get($_heading-classes, $heading)}' 25 | ), 26 | #{$heading} 27 | ); 28 | 29 | #{$selector} { 30 | font-size: map-get($props, size) !important; 31 | font-weight: map-get($props, weight); 32 | @if index($_heading-classes-large, $heading) { 33 | letter-spacing: map-get($props, letter-spacing) !important; 34 | line-height: map-get($props, line-height) !important; 35 | } 36 | } 37 | } 38 | 39 | p { 40 | margin-bottom: map-deep-get($spacers, three, y); 41 | } 42 | -------------------------------------------------------------------------------- /generic/_all.scss: -------------------------------------------------------------------------------- 1 | @import 'animations'; 2 | @import 'colors'; 3 | @import 'elevations'; 4 | @import 'reset'; 5 | @import 'transitions'; 6 | -------------------------------------------------------------------------------- /generic/_animations.scss: -------------------------------------------------------------------------------- 1 | @keyframes shake { 2 | 59% { 3 | margin-left: 0; 4 | } 5 | 6 | 60%, 7 | 80% { 8 | margin-left: rem(2px); 9 | } 10 | 11 | 70%, 12 | 90% { 13 | margin-left: rem(-2px); 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /generic/_colors.scss: -------------------------------------------------------------------------------- 1 | @mixin global-color($color_name, $color_value) { 2 | .#{$color_name} { 3 | background-color: $color_value !important; 4 | border-color: $color_value !important; 5 | } 6 | 7 | .#{$color_name}--text { 8 | caret-color: $color_value !important; 9 | color: $color_value !important; 10 | } 11 | } 12 | 13 | @mixin global-color-accent($color_name, $color_value, $color_type) { 14 | .#{$color_name} { 15 | &.#{$color_type} { 16 | background-color: $color_value !important; 17 | border-color: $color_value !important; 18 | } 19 | } 20 | 21 | .#{$color_name}--text { 22 | &.text--#{$color_type} { 23 | caret-color: $color_value !important; 24 | color: $color_value !important; 25 | } 26 | } 27 | } 28 | 29 | // Put the loop in a function so it can't leak 30 | @mixin create-global-colors { 31 | @each $color_name, $color_value in $shades { 32 | @include global-color($color_name, $color_value); 33 | } 34 | 35 | @if $color-pack { 36 | @each $color_name, $color_color in $colors { 37 | @each $color_type, $color_value in $color_color { 38 | @if $color_type == 'base' { 39 | @include global-color($color_name, $color_value); 40 | } @else if $color_type != 'shades' { 41 | @include global-color-accent($color_name, $color_value, $color_type); 42 | } 43 | } 44 | } 45 | } 46 | } 47 | 48 | @include create-global-colors; 49 | -------------------------------------------------------------------------------- /generic/_elevations.scss: -------------------------------------------------------------------------------- 1 | @import '../settings/elevations'; 2 | 3 | // GENERATE HELPER CLASSES 4 | @for $z from 0 through 24 { 5 | .elevation-#{$z} { 6 | @include elevation($z, true); 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /generic/_transitions.scss: -------------------------------------------------------------------------------- 1 | @mixin transition-default() { 2 | &-enter-active, 3 | &-leave-active { 4 | transition: $primary-transition; 5 | 6 | &-move { 7 | transition: transform 0.6s; 8 | } 9 | } 10 | } 11 | 12 | // Component specific transitions 13 | .bottom-sheet-transition { 14 | &-enter { 15 | transform: translateY(100%); 16 | } 17 | 18 | &-leave-to { 19 | transform: translateY(100%); 20 | } 21 | } 22 | 23 | .carousel-transition { 24 | &-enter { 25 | transform: translate(100%, 0); 26 | } 27 | 28 | &-leave, 29 | &-leave-to { 30 | position: absolute; 31 | top: 0; 32 | transform: translate(-100%, 0); 33 | } 34 | } 35 | 36 | .carousel-reverse-transition { 37 | &-enter { 38 | transform: translate(-100%, 0); 39 | } 40 | 41 | &-leave, 42 | &-leave-to { 43 | position: absolute; 44 | top: 0; 45 | transform: translate(100%, 0); 46 | } 47 | } 48 | 49 | .dialog-transition { 50 | &-enter, 51 | &-leave-to { 52 | opacity: 0; 53 | transform: scale(0.5); 54 | } 55 | 56 | &-enter-to, 57 | &-leave { 58 | opacity: 1; 59 | } 60 | } 61 | 62 | .dialog-bottom-transition { 63 | &-enter, 64 | &-leave-to { 65 | transform: translateY(100%); 66 | } 67 | } 68 | 69 | .picker-transition, 70 | .picker-reverse-transition { 71 | &-enter-active, 72 | &-leave-active { 73 | transition: 0.3s map-get($transition, linear-out-slow-in); 74 | } 75 | 76 | &-enter, 77 | &-leave-to { 78 | opacity: 0; 79 | } 80 | 81 | &-leave, 82 | &-leave-active, 83 | &-leave-to { 84 | position: absolute !important; 85 | } 86 | } 87 | 88 | .picker-transition { 89 | &-enter { 90 | transform: translate(0, 100%); 91 | } 92 | 93 | &-leave-to { 94 | transform: translate(0, -100%); 95 | } 96 | } 97 | 98 | .picker-reverse-transition { 99 | &-enter { 100 | transform: translate(0, -100%); 101 | } 102 | 103 | &-leave-to { 104 | transform: translate(0, 100%); 105 | } 106 | } 107 | 108 | .picker-title-transition { 109 | &-enter-to, 110 | &-leave { 111 | transform: translate(0, 0); 112 | } 113 | 114 | &-enter { 115 | transform: translate(-100%, 0); 116 | } 117 | 118 | &-leave-to { 119 | opacity: 0; 120 | transform: translate(100%, 0); 121 | } 122 | 123 | &-leave, 124 | &-leave-to, 125 | &-leave-active { 126 | position: absolute !important; 127 | } 128 | } 129 | 130 | .tab-transition { 131 | &-enter { 132 | transform: translate(100%, 0); 133 | } 134 | 135 | &-leave, 136 | &-leave-active { 137 | position: absolute; 138 | top: 0; 139 | } 140 | 141 | &-leave-to { 142 | position: absolute; 143 | transform: translate(-100%, 0); 144 | } 145 | } 146 | 147 | .tab-reverse-transition { 148 | &-enter { 149 | transform: translate(-100%, 0); 150 | } 151 | 152 | &-leave, 153 | &-leave-to { 154 | position: absolute; 155 | top: 0; 156 | transform: translate(100%, 0); 157 | } 158 | } 159 | 160 | // Generic transitions 161 | .expand-transition { 162 | @include transition-default(); 163 | } 164 | 165 | .expand-x-transition { 166 | @include transition-default(); 167 | } 168 | 169 | .scale-transition { 170 | @include transition-default(); 171 | 172 | &-enter, 173 | &-leave, 174 | &-leave-to { 175 | opacity: 0; 176 | transform: scale(0); 177 | } 178 | } 179 | 180 | .message-transition { 181 | @include transition-default(); 182 | 183 | &-enter, 184 | &-leave-to { 185 | opacity: 0; 186 | transform: translateY(rem(-15px)); 187 | } 188 | 189 | &-leave, 190 | &-leave-active { 191 | position: absolute; 192 | } 193 | } 194 | 195 | .slide-y-transition { 196 | @include transition-default(); 197 | 198 | &-enter, 199 | &-leave-to { 200 | opacity: 0; 201 | transform: translateY(rem(-15px)); 202 | } 203 | } 204 | 205 | .slide-y-reverse-transition { 206 | @include transition-default(); 207 | 208 | &-enter, 209 | &-leave-to { 210 | opacity: 0; 211 | transform: translateY(rem(15px)); 212 | } 213 | } 214 | 215 | .scroll-y-transition { 216 | @include transition-default(); 217 | 218 | &-enter, 219 | &-leave-to { 220 | opacity: 0; 221 | } 222 | 223 | &-enter { 224 | transform: translateY(rem(-15px)); 225 | } 226 | 227 | &-leave-to { 228 | transform: translateY(rem(15px)); 229 | } 230 | } 231 | 232 | .scroll-y-reverse-transition { 233 | @include transition-default(); 234 | 235 | &-enter, 236 | &-leave-to { 237 | opacity: 0; 238 | } 239 | 240 | &-enter { 241 | transform: translateY(rem(15px)); 242 | } 243 | 244 | &-leave-to { 245 | transform: translateY(rem(-15px)); 246 | } 247 | } 248 | 249 | .scroll-x-transition { 250 | @include transition-default(); 251 | 252 | &-enter, 253 | &-leave-to { 254 | opacity: 0; 255 | } 256 | 257 | &-enter { 258 | transform: translateX(rem(-15px)); 259 | } 260 | 261 | &-leave-to { 262 | transform: translateX(rem(15px)); 263 | } 264 | } 265 | 266 | .scroll-x-reverse-transition { 267 | @include transition-default(); 268 | 269 | &-enter, 270 | &-leave-to { 271 | opacity: 0; 272 | } 273 | 274 | &-enter { 275 | transform: translateX(rem(15px)); 276 | } 277 | 278 | &-leave-to { 279 | transform: translateX(rem(-15px)); 280 | } 281 | } 282 | 283 | .slide-x-transition { 284 | @include transition-default(); 285 | 286 | &-enter, 287 | &-leave-to { 288 | opacity: 0; 289 | transform: translateX(rem(-15px)); 290 | } 291 | } 292 | 293 | .slide-x-reverse-transition { 294 | @include transition-default(); 295 | 296 | &-enter, 297 | &-leave-to { 298 | opacity: 0; 299 | transform: translateX(rem(15px)); 300 | } 301 | } 302 | 303 | .fade-transition { 304 | @include transition-default(); 305 | 306 | &-enter, 307 | &-leave-to { 308 | opacity: 0; 309 | } 310 | } 311 | 312 | .fab-transition { 313 | @include transition-default(); 314 | 315 | &-enter, 316 | &-leave-to { 317 | transform: scale(0) rotate(-45deg); 318 | } 319 | } 320 | -------------------------------------------------------------------------------- /main.scss: -------------------------------------------------------------------------------- 1 | @import './app'; 2 | @import './components/all'; 3 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vuetify-scss", 3 | "version": "1.4.0", 4 | "description": "All of the Vuetify styles converted into Sass. No more Stylus!", 5 | "main": "main.scss", 6 | "style": "main.scss", 7 | "sass": "main.scss", 8 | "scripts": { 9 | "lint": "stylelint '**/*.scss' --syntax=scss; exit 0", 10 | "lint:fix": "stylelint '**/*.scss' --syntax=scss --fix; exit 0", 11 | "prepublishOnly": "stylelint '**/*.scss' --syntax=scss", 12 | "test": "stylelint '**/*.scss' --syntax=scss", 13 | "release": "standard-version --message='build(release): %s'", 14 | "release-minor": "standard-version --release-as=minor --message='build(release): %s'", 15 | "release-major": "standard-version --release-as=major --message='build(release): %s'" 16 | }, 17 | "repository": { 18 | "type": "git", 19 | "url": "git+https://github.com/nmsmith22389/vuetify-scss.git" 20 | }, 21 | "keywords": [ 22 | "vuetify", 23 | "scss", 24 | "sass", 25 | "css", 26 | "vue" 27 | ], 28 | "author": { 29 | "name": "Neil Smith", 30 | "email": "nmsmith22389@gmail.com" 31 | }, 32 | "license": "MIT", 33 | "bugs": { 34 | "url": "https://github.com/nmsmith22389/vuetify-scss/issues" 35 | }, 36 | "homepage": "https://github.com/nmsmith22389/vuetify-scss#readme", 37 | "peerDependencies": { 38 | "vuetify": "~1.5.0" 39 | }, 40 | "devDependencies": { 41 | "stylelint": "^9.10.1", 42 | "stylelint-config-sass-guidelines": "^5.3.0" 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /settings/_all.scss: -------------------------------------------------------------------------------- 1 | @import 'variables'; 2 | @import 'colors'; 3 | @import 'elevations'; 4 | @import 'rtl'; 5 | @import 'theme'; 6 | -------------------------------------------------------------------------------- /settings/_colors.scss: -------------------------------------------------------------------------------- 1 | $red: ( 2 | base: #f44336, 3 | lighten-5: #ffebee, 4 | lighten-4: #ffcdd2, 5 | lighten-3: #ef9a9a, 6 | lighten-2: #e57373, 7 | lighten-1: #ef5350, 8 | darken-1: #e53935, 9 | darken-2: #d32f2f, 10 | darken-3: #c62828, 11 | darken-4: #b71c1c, 12 | accent-1: #ff8a80, 13 | accent-2: #ff5252, 14 | accent-3: #ff1744, 15 | accent-4: #d50000 16 | ); 17 | 18 | $pink: ( 19 | base: #e91e63, 20 | lighten-5: #fce4ec, 21 | lighten-4: #f8bbd0, 22 | lighten-3: #f48fb1, 23 | lighten-2: #f06292, 24 | lighten-1: #ec407a, 25 | darken-1: #d81b60, 26 | darken-2: #c2185b, 27 | darken-3: #ad1457, 28 | darken-4: #880e4f, 29 | accent-1: #ff80ab, 30 | accent-2: #ff4081, 31 | accent-3: #f50057, 32 | accent-4: #c51162 33 | ); 34 | 35 | $purple: ( 36 | base: #9c27b0, 37 | lighten-5: #f3e5f5, 38 | lighten-4: #e1bee7, 39 | lighten-3: #ce93d8, 40 | lighten-2: #ba68c8, 41 | lighten-1: #ab47bc, 42 | darken-1: #8e24aa, 43 | darken-2: #7b1fa2, 44 | darken-3: #6a1b9a, 45 | darken-4: #4a148c, 46 | accent-1: #ea80fc, 47 | accent-2: #e040fb, 48 | accent-3: #d500f9, 49 | accent-4: #aa00ff 50 | ); 51 | 52 | $deep-purple: ( 53 | base: #673ab7, 54 | lighten-5: #ede7f6, 55 | lighten-4: #d1c4e9, 56 | lighten-3: #b39ddb, 57 | lighten-2: #9575cd, 58 | lighten-1: #7e57c2, 59 | darken-1: #5e35b1, 60 | darken-2: #512da8, 61 | darken-3: #4527a0, 62 | darken-4: #311b92, 63 | accent-1: #b388ff, 64 | accent-2: #7c4dff, 65 | accent-3: #651fff, 66 | accent-4: #6200ea 67 | ); 68 | 69 | $indigo: ( 70 | base: #3f51b5, 71 | lighten-5: #e8eaf6, 72 | lighten-4: #c5cae9, 73 | lighten-3: #9fa8da, 74 | lighten-2: #7986cb, 75 | lighten-1: #5c6bc0, 76 | darken-1: #3949ab, 77 | darken-2: #303f9f, 78 | darken-3: #283593, 79 | darken-4: #1a237e, 80 | accent-1: #8c9eff, 81 | accent-2: #536dfe, 82 | accent-3: #3d5afe, 83 | accent-4: #304ffe 84 | ); 85 | 86 | $blue: ( 87 | base: #2196f3, 88 | lighten-5: #e3f2fd, 89 | lighten-4: #bbdefb, 90 | lighten-3: #90caf9, 91 | lighten-2: #64b5f6, 92 | lighten-1: #42a5f5, 93 | darken-1: #1e88e5, 94 | darken-2: #1976d2, 95 | darken-3: #1565c0, 96 | darken-4: #0d47a1, 97 | accent-1: #82b1ff, 98 | accent-2: #448aff, 99 | accent-3: #2979ff, 100 | accent-4: #2962ff 101 | ); 102 | 103 | $light-blue: ( 104 | base: #03a9f4, 105 | lighten-5: #e1f5fe, 106 | lighten-4: #b3e5fc, 107 | lighten-3: #81d4fa, 108 | lighten-2: #4fc3f7, 109 | lighten-1: #29b6f6, 110 | darken-1: #039be5, 111 | darken-2: #0288d1, 112 | darken-3: #0277bd, 113 | darken-4: #01579b, 114 | accent-1: #80d8ff, 115 | accent-2: #40c4ff, 116 | accent-3: #00b0ff, 117 | accent-4: #0091ea 118 | ); 119 | 120 | $cyan: ( 121 | base: #00bcd4, 122 | lighten-5: #e0f7fa, 123 | lighten-4: #b2ebf2, 124 | lighten-3: #80deea, 125 | lighten-2: #4dd0e1, 126 | lighten-1: #26c6da, 127 | darken-1: #00acc1, 128 | darken-2: #0097a7, 129 | darken-3: #00838f, 130 | darken-4: #006064, 131 | accent-1: #84ffff, 132 | accent-2: #18ffff, 133 | accent-3: #00e5ff, 134 | accent-4: #00b8d4 135 | ); 136 | 137 | $teal: ( 138 | base: #009688, 139 | lighten-5: #e0f2f1, 140 | lighten-4: #b2dfdb, 141 | lighten-3: #80cbc4, 142 | lighten-2: #4db6ac, 143 | lighten-1: #26a69a, 144 | darken-1: #00897b, 145 | darken-2: #00796b, 146 | darken-3: #00695c, 147 | darken-4: #004d40, 148 | accent-1: #a7ffeb, 149 | accent-2: #64ffda, 150 | accent-3: #1de9b6, 151 | accent-4: #00bfa5 152 | ); 153 | 154 | $green: ( 155 | base: #4caf50, 156 | lighten-5: #e8f5e9, 157 | lighten-4: #c8e6c9, 158 | lighten-3: #a5d6a7, 159 | lighten-2: #81c784, 160 | lighten-1: #66bb6a, 161 | darken-1: #43a047, 162 | darken-2: #388e3c, 163 | darken-3: #2e7d32, 164 | darken-4: #1b5e20, 165 | accent-1: #b9f6ca, 166 | accent-2: #69f0ae, 167 | accent-3: #00e676, 168 | accent-4: #00c853 169 | ); 170 | 171 | $light-green: ( 172 | base: #8bc34a, 173 | lighten-5: #f1f8e9, 174 | lighten-4: #dcedc8, 175 | lighten-3: #c5e1a5, 176 | lighten-2: #aed581, 177 | lighten-1: #9ccc65, 178 | darken-1: #7cb342, 179 | darken-2: #689f38, 180 | darken-3: #558b2f, 181 | darken-4: #33691e, 182 | accent-1: #ccff90, 183 | accent-2: #b2ff59, 184 | accent-3: #76ff03, 185 | accent-4: #64dd17 186 | ); 187 | 188 | $lime: ( 189 | base: #cddc39, 190 | lighten-5: #f9fbe7, 191 | lighten-4: #f0f4c3, 192 | lighten-3: #e6ee9c, 193 | lighten-2: #dce775, 194 | lighten-1: #d4e157, 195 | darken-1: #c0ca33, 196 | darken-2: #afb42b, 197 | darken-3: #9e9d24, 198 | darken-4: #827717, 199 | accent-1: #f4ff81, 200 | accent-2: #eeff41, 201 | accent-3: #c6ff00, 202 | accent-4: #aeea00 203 | ); 204 | 205 | $yellow: ( 206 | base: #ffeb3b, 207 | lighten-5: #fffde7, 208 | lighten-4: #fff9c4, 209 | lighten-3: #fff59d, 210 | lighten-2: #fff176, 211 | lighten-1: #ffee58, 212 | darken-1: #fdd835, 213 | darken-2: #fbc02d, 214 | darken-3: #f9a825, 215 | darken-4: #f57f17, 216 | accent-1: #ffff8d, 217 | accent-2: #ffff00, 218 | accent-3: #ffea00, 219 | accent-4: #ffd600 220 | ); 221 | 222 | $amber: ( 223 | base: #ffc107, 224 | lighten-5: #fff8e1, 225 | lighten-4: #ffecb3, 226 | lighten-3: #ffe082, 227 | lighten-2: #ffd54f, 228 | lighten-1: #ffca28, 229 | darken-1: #ffb300, 230 | darken-2: #ffa000, 231 | darken-3: #ff8f00, 232 | darken-4: #ff6f00, 233 | accent-1: #ffe57f, 234 | accent-2: #ffd740, 235 | accent-3: #ffc400, 236 | accent-4: #ffab00 237 | ); 238 | 239 | $orange: ( 240 | base: #ff9800, 241 | lighten-5: #fff3e0, 242 | lighten-4: #ffe0b2, 243 | lighten-3: #ffcc80, 244 | lighten-2: #ffb74d, 245 | lighten-1: #ffa726, 246 | darken-1: #fb8c00, 247 | darken-2: #f57c00, 248 | darken-3: #ef6c00, 249 | darken-4: #e65100, 250 | accent-1: #ffd180, 251 | accent-2: #ffab40, 252 | accent-3: #ff9100, 253 | accent-4: #ff6d00 254 | ); 255 | 256 | $deep-orange: ( 257 | base: #ff5722, 258 | lighten-5: #fbe9e7, 259 | lighten-4: #ffccbc, 260 | lighten-3: #ffab91, 261 | lighten-2: #ff8a65, 262 | lighten-1: #ff7043, 263 | darken-1: #f4511e, 264 | darken-2: #e64a19, 265 | darken-3: #d84315, 266 | darken-4: #bf360c, 267 | accent-1: #ff9e80, 268 | accent-2: #ff6e40, 269 | accent-3: #ff3d00, 270 | accent-4: #dd2c00 271 | ); 272 | 273 | $brown: ( 274 | base: #795548, 275 | lighten-5: #efebe9, 276 | lighten-4: #d7ccc8, 277 | lighten-3: #bcaaa4, 278 | lighten-2: #a1887f, 279 | lighten-1: #8d6e63, 280 | darken-1: #6d4c41, 281 | darken-2: #5d4037, 282 | darken-3: #4e342e, 283 | darken-4: #3e2723 284 | ); 285 | 286 | $blue-grey: ( 287 | base: #607d8b, 288 | lighten-5: #eceff1, 289 | lighten-4: #cfd8dc, 290 | lighten-3: #b0bec5, 291 | lighten-2: #90a4ae, 292 | lighten-1: #78909c, 293 | darken-1: #546e7a, 294 | darken-2: #455a64, 295 | darken-3: #37474f, 296 | darken-4: #263238 297 | ); 298 | 299 | $grey: ( 300 | base: #9e9e9e, 301 | lighten-5: #fafafa, 302 | lighten-4: #f5f5f5, 303 | lighten-3: #eeeeee, 304 | lighten-2: #e0e0e0, 305 | lighten-1: #bdbdbd, 306 | darken-1: #757575, 307 | darken-2: #616161, 308 | darken-3: #424242, 309 | darken-4: #212121 310 | ); 311 | 312 | $shades: ( 313 | 'black': #000000, 314 | 'white': #ffffff, 315 | 'transparent': transparent 316 | ); 317 | 318 | $colors: ( 319 | 'red': $red, 320 | 'pink': $pink, 321 | 'purple': $purple, 322 | 'deep-purple': $deep-purple, 323 | 'indigo': $indigo, 324 | 'blue': $blue, 325 | 'light-blue': $light-blue, 326 | 'cyan': $cyan, 327 | 'teal': $teal, 328 | 'green': $green, 329 | 'light-green': $light-green, 330 | 'lime': $lime, 331 | 'yellow': $yellow, 332 | 'amber': $amber, 333 | 'orange': $orange, 334 | 'deep-orange': $deep-orange, 335 | 'brown': $brown, 336 | 'blue-grey': $blue-grey, 337 | 'grey': $grey, 338 | 'shades': $shades 339 | ) !default; 340 | -------------------------------------------------------------------------------- /settings/_elevations.scss: -------------------------------------------------------------------------------- 1 | $shadow-key-umbra-opacity: rgba(0, 0, 0, 0.2) !default; 2 | $shadow-key-penumbra-opacity: rgba(0, 0, 0, 0.14) !default; 3 | $shadow-key-ambient-opacity: rgba(0, 0, 0, 0.12) !default; 4 | 5 | $shadow-key-umbra: ( 6 | 0 0 0 0 $shadow-key-umbra-opacity, 7 | 0 2px 1px -1px $shadow-key-umbra-opacity, 8 | 0 3px 1px -2px $shadow-key-umbra-opacity, 9 | 0 3px 3px -2px $shadow-key-umbra-opacity, 10 | 0 2px 4px -1px $shadow-key-umbra-opacity, 11 | 0 3px 5px -1px $shadow-key-umbra-opacity, 12 | 0 3px 5px -1px $shadow-key-umbra-opacity, 13 | 0 4px 5px -2px $shadow-key-umbra-opacity, 14 | 0 5px 5px -3px $shadow-key-umbra-opacity, 15 | 0 5px 6px -3px $shadow-key-umbra-opacity, 16 | 0 6px 6px -3px $shadow-key-umbra-opacity, 17 | 0 6px 7px -4px $shadow-key-umbra-opacity, 18 | 0 7px 8px -4px $shadow-key-umbra-opacity, 19 | 0 7px 8px -4px $shadow-key-umbra-opacity, 20 | 0 7px 9px -4px $shadow-key-umbra-opacity, 21 | 0 8px 9px -5px $shadow-key-umbra-opacity, 22 | 0 8px 10px -5px $shadow-key-umbra-opacity, 23 | 0 8px 11px -5px $shadow-key-umbra-opacity, 24 | 0 9px 11px -5px $shadow-key-umbra-opacity, 25 | 0 9px 12px -6px $shadow-key-umbra-opacity, 26 | 0 10px 13px -6px $shadow-key-umbra-opacity, 27 | 0 10px 13px -6px $shadow-key-umbra-opacity, 28 | 0 10px 14px -6px $shadow-key-umbra-opacity, 29 | 0 11px 14px -7px $shadow-key-umbra-opacity, 30 | 0 11px 15px -7px $shadow-key-umbra-opacity 31 | ) !default; 32 | 33 | $shadow-key-penumbra: ( 34 | 0 0 0 0 $shadow-key-penumbra-opacity, 35 | 0 1px 1px 0 $shadow-key-penumbra-opacity, 36 | 0 2px 2px 0 $shadow-key-penumbra-opacity, 37 | 0 3px 4px 0 $shadow-key-penumbra-opacity, 38 | 0 4px 5px 0 $shadow-key-penumbra-opacity, 39 | 0 5px 8px 0 $shadow-key-penumbra-opacity, 40 | 0 6px 10px 0 $shadow-key-penumbra-opacity, 41 | 0 7px 10px 1px $shadow-key-penumbra-opacity, 42 | 0 8px 10px 1px $shadow-key-penumbra-opacity, 43 | 0 9px 12px 1px $shadow-key-penumbra-opacity, 44 | 0 10px 14px 1px $shadow-key-penumbra-opacity, 45 | 0 11px 15px 1px $shadow-key-penumbra-opacity, 46 | 0 12px 17px 2px $shadow-key-penumbra-opacity, 47 | 0 13px 19px 2px $shadow-key-penumbra-opacity, 48 | 0 14px 21px 2px $shadow-key-penumbra-opacity, 49 | 0 15px 22px 2px $shadow-key-penumbra-opacity, 50 | 0 16px 24px 2px $shadow-key-penumbra-opacity, 51 | 0 17px 26px 2px $shadow-key-penumbra-opacity, 52 | 0 18px 28px 2px $shadow-key-penumbra-opacity, 53 | 0 19px 29px 2px $shadow-key-penumbra-opacity, 54 | 0 20px 31px 3px $shadow-key-penumbra-opacity, 55 | 0 21px 33px 3px $shadow-key-penumbra-opacity, 56 | 0 22px 35px 3px $shadow-key-penumbra-opacity, 57 | 0 23px 36px 3px $shadow-key-penumbra-opacity, 58 | 0 24px 38px 3px $shadow-key-penumbra-opacity 59 | ) !default; 60 | 61 | $shadow-key-ambient: ( 62 | 0 0 0 0 $shadow-key-ambient-opacity, 63 | 0 1px 3px 0 $shadow-key-ambient-opacity, 64 | 0 1px 5px 0 $shadow-key-ambient-opacity, 65 | 0 1px 8px 0 $shadow-key-ambient-opacity, 66 | 0 1px 10px 0 $shadow-key-ambient-opacity, 67 | 0 1px 14px 0 $shadow-key-ambient-opacity, 68 | 0 1px 18px 0 $shadow-key-ambient-opacity, 69 | 0 2px 16px 1px $shadow-key-ambient-opacity, 70 | 0 3px 14px 2px $shadow-key-ambient-opacity, 71 | 0 3px 16px 2px $shadow-key-ambient-opacity, 72 | 0 4px 18px 3px $shadow-key-ambient-opacity, 73 | 0 4px 20px 3px $shadow-key-ambient-opacity, 74 | 0 5px 22px 4px $shadow-key-ambient-opacity, 75 | 0 5px 24px 4px $shadow-key-ambient-opacity, 76 | 0 5px 26px 4px $shadow-key-ambient-opacity, 77 | 0 6px 28px 5px $shadow-key-ambient-opacity, 78 | 0 6px 30px 5px $shadow-key-ambient-opacity, 79 | 0 6px 32px 5px $shadow-key-ambient-opacity, 80 | 0 7px 34px 6px $shadow-key-ambient-opacity, 81 | 0 7px 36px 6px $shadow-key-ambient-opacity, 82 | 0 8px 38px 7px $shadow-key-ambient-opacity, 83 | 0 8px 40px 7px $shadow-key-ambient-opacity, 84 | 0 8px 42px 7px $shadow-key-ambient-opacity, 85 | 0 9px 44px 8px $shadow-key-ambient-opacity, 86 | 0 9px 46px 8px $shadow-key-ambient-opacity 87 | ) !default; 88 | 89 | // MIXINS 90 | @mixin elevation($z, $important: false) { 91 | box-shadow: nth($shadow-key-umbra, $z + 1), nth($shadow-key-penumbra, $z + 1), 92 | nth($shadow-key-ambient, $z + 1) if($important, !important, null); 93 | } 94 | 95 | @mixin elevationTransition($duration: 280ms, $easing: cubic-bezier(0.4, 0, 0.2, 1)) { 96 | transition: box-shadow $duration $easing; 97 | will-change: box-shadow; 98 | } 99 | -------------------------------------------------------------------------------- /settings/_rtl.scss: -------------------------------------------------------------------------------- 1 | @mixin rtl($name) { 2 | .application { 3 | &--is-rtl { 4 | .#{$name} { 5 | @content; 6 | } 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /theme.scss: -------------------------------------------------------------------------------- 1 | @import 'settings/theme'; 2 | 3 | @mixin theme-light($name) { 4 | .theme--light.#{$name} { 5 | @content; 6 | } 7 | } 8 | 9 | @mixin theme-dark($name) { 10 | .theme--dark.#{$name} { 11 | @content; 12 | } 13 | } 14 | 15 | @mixin theme($theme: light, $name: null) { 16 | @if (not $name) or ($name == '') or ($name == 0) or ($name == ()) or (length($name) == 0) { 17 | @error ('Name parameter expected for mixin: theme().'); 18 | } 19 | 20 | @if ($theme == light) { 21 | @include theme-light($name) { 22 | @content; 23 | } 24 | } @else { 25 | @include theme-dark($name) { 26 | @content; 27 | } 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /tools/_all.scss: -------------------------------------------------------------------------------- 1 | @import 'bootable'; 2 | @import 'helpers/all'; 3 | -------------------------------------------------------------------------------- /tools/_bootable.scss: -------------------------------------------------------------------------------- 1 | @mixin bootable { 2 | transition: none; 3 | 4 | &[data-booted='true'] { 5 | transition: 0.2s map-get($transition, fast-out-slow-in); 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /tools/helpers/_all.scss: -------------------------------------------------------------------------------- 1 | @import 'breakpoint'; 2 | @import 'colors'; 3 | @import 'typography'; 4 | @import 'unit'; 5 | @import 'value'; 6 | -------------------------------------------------------------------------------- /tools/helpers/_breakpoint.scss: -------------------------------------------------------------------------------- 1 | // @import '../../settings/variables'; 2 | 3 | @function breakpoint($value) { 4 | $str: ''; 5 | 6 | @if map-has-key($display-breakpoints, $value) { 7 | $str: map-get($display-breakpoints, $value); 8 | } @else { 9 | $str: map-get($display-breakpoints, small-and-up); 10 | @warn 'breakpoint(): "#{$value}" is not defined in your $display-breakpoints setting.'; 11 | } 12 | 13 | @return $str; 14 | } 15 | 16 | @mixin breakpoint($value) { 17 | $str: if(map-has-key($display-breakpoints, $value), breakpoint($value), ''); 18 | 19 | @if not $str or $str == '' { 20 | @content; 21 | } @else { 22 | @media #{$str} { 23 | @content; 24 | } 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /tools/helpers/_colors.scss: -------------------------------------------------------------------------------- 1 | @function get-color($palette-key, $shade-key: base) { 2 | //@ Cast everything into strings. 3 | $palette-key: if(type-of($palette-key) != string, #{$palette-key}, $palette-key); 4 | $shade-key: if(type-of($shade-key) != string, #{$shade-key}, $shade-key); 5 | 6 | //@ Error if palette doesn't exist. 7 | @if (not map-has-key($colors, $palette-key)) { 8 | @error 'The color \"#{$palette-key}\" was not found in the $colors variable.'; 9 | } 10 | 11 | //@ Material Design shade number to shade name table. 12 | $int-to-shade: ( 13 | '50': 'lighten-5', 14 | '100': 'lighten-4', 15 | '200': 'lighten-3', 16 | '300': 'lighten-2', 17 | '400': 'lighten-1', 18 | '500': 'base', 19 | '600': 'darken-1', 20 | '700': 'darken-2', 21 | '800': 'darken-3', 22 | '900': 'darken-4', 23 | A100: 'accent-1', 24 | A200: 'accent-2', 25 | A400: 'accent-3', 26 | A700: 'accent-4', 27 | ); 28 | 29 | //@ Fetch palette from maps. 30 | $palette: map-get($colors, $palette-key); 31 | 32 | //@ Fetch color from maps. 33 | $shade: if( 34 | map-has-key($palette, $shade-key), 35 | $shade-key, 36 | if( 37 | map-has-key($int-to-shade, to-upper-case($shade-key)), 38 | map-get($int-to-shade, to-upper-case($shade-key)), 39 | null 40 | ) 41 | ); 42 | 43 | //@ Error if shade doesn't exist. 44 | @if not map-has-key($palette, $shade) { 45 | @error 'The shade \"#{$shade-key}\" was not found in the \"#{$palette-key}\" palette.'; 46 | } 47 | 48 | //@ Return color. 49 | $color: map-get($palette, $shade); 50 | 51 | @return $color; 52 | } 53 | -------------------------------------------------------------------------------- /tools/helpers/_typography.scss: -------------------------------------------------------------------------------- 1 | // @import '../../settings/variables'; 2 | 3 | @function font-weight($weight: regular) { 4 | @return if( 5 | map-has-key($font-weights, $weight), 6 | map-get($font-weights, $weight), 7 | map-get($font-weights, regular) 8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /tools/helpers/_unit.scss: -------------------------------------------------------------------------------- 1 | // @import '../../settings/variables'; 2 | // @import '../../settings/theme'; 3 | 4 | // If true, use rem in styles instead of px. 5 | // NOTE: Has to be here because its used in the variables and theme files. 6 | $values-use-rem: true !default; 7 | 8 | @function _rem-separator($list, $separator: false) { 9 | @if $separator == 'comma' or $separator == 'space' { 10 | @return append($list, null, $separator); 11 | } 12 | 13 | @if function-exists('list-separator') == true { 14 | @return list-separator($list); 15 | } 16 | } 17 | 18 | @function _rem-convert($to, $values...) { 19 | $result: (); 20 | $rem-baseline: variable-exists('font-size-root') and $font-size-root or 100%; 21 | $separator: _rem-separator($values); 22 | 23 | @if unit($rem-baseline) == '%' { 24 | $rem-baseline: ($rem-baseline / 100%) * 16px; 25 | } 26 | 27 | @each $value in $values { 28 | @if type-of($value) == 'number' and unit($value) == 'rem' and $to == 'px' { 29 | $result: append($result, $value / 1rem * $rem-baseline, $separator); 30 | } @else if type-of($value) == 'number' and unit($value) == 'px' and $to == 'rem' { 31 | $result: append($result, $value / $rem-baseline * 1rem, $separator); 32 | } @else if type-of($value) == 'list' { 33 | $value-separator: _rem-separator($value); 34 | $value: _rem-convert($to, $value...); 35 | $value: _rem-separator($value, $value-separator); 36 | $result: append($result, $value, $separator); 37 | } @else { 38 | $result: append($result, $value, $separator); 39 | } 40 | } 41 | 42 | @return if(length($result) == 1, nth($result, 1), $result); 43 | } 44 | 45 | @function rem($values...) { 46 | @if not $values-use-rem { 47 | @return _rem-convert(px, $values...); 48 | } @else { 49 | @return _rem-convert(rem, $values...); 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /tools/helpers/_value.scss: -------------------------------------------------------------------------------- 1 | // @import '../../settings/variables'; 2 | 3 | @function map-deep-get($map, $keys...) { 4 | @if type-of($map) != 'map' { 5 | // stylelint-disable-next-line max-line-length 6 | @error 'The argument $map: "#{$map}" is of the incorrect type: "#{type-of($map)}". Type of "map" is required!'; 7 | } 8 | @each $key in $keys { 9 | $map: map-get($map, $key); 10 | } 11 | @return $map; 12 | } 13 | -------------------------------------------------------------------------------- /trumps/_all.scss: -------------------------------------------------------------------------------- 1 | @import 'display'; 2 | @import 'helpers'; 3 | @import 'spacing'; 4 | @import 'text'; 5 | @import 'transition'; 6 | -------------------------------------------------------------------------------- /trumps/_display.scss: -------------------------------------------------------------------------------- 1 | @each $size, $media_query in $display-breakpoints { 2 | .hidden { 3 | &-#{$size} { 4 | @media #{$media_query} { 5 | display: none !important; 6 | } 7 | } 8 | } 9 | } 10 | 11 | .overflow-hidden { 12 | overflow: hidden; 13 | } 14 | 15 | .overflow-x-hidden { 16 | overflow-x: hidden; 17 | } 18 | 19 | .overflow-y-hidden { 20 | overflow-y: hidden; 21 | } 22 | -------------------------------------------------------------------------------- /trumps/_helpers.scss: -------------------------------------------------------------------------------- 1 | .right { 2 | float: right !important; 3 | } 4 | 5 | .left { 6 | float: left !important; 7 | } 8 | -------------------------------------------------------------------------------- /trumps/_spacing.scss: -------------------------------------------------------------------------------- 1 | .ma-auto { 2 | // NOTE: Switched to shorthand even though Vuetify does the longhand (is there a diff??) 3 | // margin-bottom: auto !important; 4 | // margin-left: auto !important; 5 | // margin-right: auto !important; 6 | // margin-top: auto !important; 7 | margin: auto !important; 8 | } 9 | 10 | .my-auto { 11 | margin-bottom: auto !important; 12 | margin-top: auto !important; 13 | } 14 | 15 | .mx-auto { 16 | margin-left: auto !important; 17 | margin-right: auto !important; 18 | } 19 | 20 | .mt-auto { 21 | margin-top: auto !important; 22 | } 23 | 24 | .mr-auto { 25 | margin-right: auto !important; 26 | } 27 | 28 | .mb-auto { 29 | margin-bottom: auto !important; 30 | } 31 | 32 | .ml-auto { 33 | margin-left: auto !important; 34 | } 35 | 36 | @each $level, $spacer in $spacers { 37 | $i: index($spacers, ($level $spacer)) - 1; 38 | 39 | .mt-#{$i} { 40 | margin-top: map-get($spacer, y) !important; 41 | } 42 | 43 | .mr-#{$i} { 44 | margin-right: map-get($spacer, x) !important; 45 | } 46 | 47 | .mb-#{$i} { 48 | margin-bottom: map-get($spacer, y) !important; 49 | } 50 | 51 | .ml-#{$i} { 52 | margin-left: map-get($spacer, x) !important; 53 | } 54 | 55 | .mx-#{$i} { 56 | margin-left: map-get($spacer, x) !important; 57 | margin-right: map-get($spacer, x) !important; 58 | } 59 | 60 | .my-#{$i} { 61 | margin-bottom: map-get($spacer, y) !important; 62 | margin-top: map-get($spacer, y) !important; 63 | } 64 | 65 | .ma-#{$i} { 66 | margin: map-get($spacer, y) map-get($spacer, x) !important; 67 | } 68 | 69 | .pt-#{$i} { 70 | padding-top: map-get($spacer, y) !important; 71 | } 72 | 73 | .pr-#{$i} { 74 | padding-right: map-get($spacer, x) !important; 75 | } 76 | 77 | .pb-#{$i} { 78 | padding-bottom: map-get($spacer, y) !important; 79 | } 80 | 81 | .pl-#{$i} { 82 | padding-left: map-get($spacer, x) !important; 83 | } 84 | 85 | .px-#{$i} { 86 | padding-left: map-get($spacer, x) !important; 87 | padding-right: map-get($spacer, x) !important; 88 | } 89 | 90 | .py-#{$i} { 91 | padding-bottom: map-get($spacer, y) !important; 92 | padding-top: map-get($spacer, y) !important; 93 | } 94 | 95 | .pa-#{$i} { 96 | padding: map-get($spacer, y) map-get($spacer, x) !important; 97 | } 98 | } 99 | -------------------------------------------------------------------------------- /trumps/_text.scss: -------------------------------------------------------------------------------- 1 | @each $size, $width in $grid-breakpoints { 2 | @media all and (min-width: $width) { 3 | .text-#{$size}-left { 4 | text-align: left !important; 5 | } 6 | 7 | .text-#{$size}-center { 8 | text-align: center !important; 9 | } 10 | 11 | .text-#{$size}-right { 12 | text-align: right !important; 13 | } 14 | 15 | .text-#{$size}-justify { 16 | text-align: justify !important; 17 | } 18 | } 19 | } 20 | 21 | @each $name, $weight in $font-weights { 22 | .font-weight { 23 | &-#{$name} { 24 | font-weight: $weight !important; 25 | } 26 | } 27 | } 28 | 29 | .font-italic { 30 | font-style: italic !important; 31 | } 32 | 33 | .text-capitalize { 34 | text-transform: capitalize !important; 35 | } 36 | 37 | .text-lowercase { 38 | text-transform: lowercase !important; 39 | } 40 | 41 | .text-none { 42 | text-transform: none !important; 43 | } 44 | 45 | .text-uppercase { 46 | text-transform: uppercase !important; 47 | } 48 | 49 | .text-no-wrap { 50 | white-space: nowrap !important; 51 | } 52 | 53 | .text-truncate { 54 | overflow: hidden !important; 55 | text-overflow: ellipsis !important; 56 | white-space: nowrap !important; 57 | } 58 | -------------------------------------------------------------------------------- /trumps/_transition.scss: -------------------------------------------------------------------------------- 1 | @each $name, $bezier in $transition { 2 | .transition-#{$name} { 3 | transition: 0.3s $bezier !important; 4 | } 5 | } 6 | --------------------------------------------------------------------------------