├── .editorconfig
├── .eslintrc.js
├── .gitattributes
├── .gitignore
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── package-lock.json
├── package.json
├── postcss.json
├── src
├── components
│ ├── alert.scss
│ ├── animation.scss
│ ├── badge.scss
│ ├── breadcrumb.scss
│ ├── button.scss
│ ├── card.scss
│ ├── checkbox.scss
│ ├── collapse.scss
│ ├── dropdown.scss
│ ├── form.scss
│ ├── index.scss
│ ├── input-number.scss
│ ├── input.scss
│ ├── loading-bar.scss
│ ├── menu.scss
│ ├── message.scss
│ ├── modal.scss
│ ├── notification.scss
│ ├── pagination.scss
│ ├── popover.scss
│ ├── progress.scss
│ ├── radio.scss
│ ├── rate.scss
│ ├── select.scss
│ ├── slider.scss
│ ├── steps.scss
│ ├── switch.scss
│ ├── table.scss
│ ├── tabs.scss
│ ├── tag.scss
│ ├── textarea.scss
│ ├── timeline.scss
│ └── tooltip.scss
├── core
│ ├── base.scss
│ ├── font.scss
│ ├── grid.scss
│ ├── index.scss
│ └── normalize.scss
├── fonts
│ ├── aticon.eot
│ ├── aticon.svg
│ ├── aticon.ttf
│ ├── aticon.woff
│ ├── feather.eot
│ ├── feather.svg
│ ├── feather.ttf
│ └── feather.woff
├── index.scss
├── mixins
│ ├── index.scss
│ └── lib
│ │ ├── bem.scss
│ │ ├── clearfix.scss
│ │ ├── ellipsis.scss
│ │ ├── hide-text.scss
│ │ ├── shade.scss
│ │ ├── size.scss
│ │ └── tint.scss
└── variables
│ ├── default.scss
│ ├── index.scss
│ └── timing-function.scss
└── yarn.lock
/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 |
3 | [*]
4 | charset = utf-8
5 | indent_style = space
6 | indent_size = 2
7 | end_of_line = lf
8 | insert_final_newline = true
9 | trim_trailing_whitespace = true
10 |
--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | extends: 'o2team',
4 | // add your custom rules here
5 | 'rules': {
6 | 'prefer-spread': 'off'
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Set the default behavior, in case people don't have core.autocrlf set.
2 | * text eol=lf
3 |
4 | # Denote all files that are truly binary and should not be modified.
5 | *.png binary
6 | *.jpg binary
7 | *.ttf binary
8 | *.woff binary
9 | *.eot binary
10 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | dist/
4 | npm-debug.log
5 | .vscode
6 | css/
7 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 |
2 | # Contributing to AT-UI-Style
3 |
4 | Thank you for choosing AT-UI. Please take a few moments to review the following guidelines to get you started.
5 |
6 | ## Team members
7 |
8 | AT-UI is developed as an open source project by [AOTU Labs](https://aotu.io/)
9 |
10 | ## Documentation
11 |
12 | The AT-UI documentation is maintained as a collection of Markdown files power by [vue-markdown-loader](https://www.npmjs.com/package/vue-markdown-loader). Any pull requests are highly appreciated. Especially for internationalization.
13 |
14 | ## Issue
15 |
16 | Issues are exclusively for bug reports, feature requests and design-related topics. A bug issue is a demonstrable problem that is caused by the code in the repository. Good bug reports are extremely helpful - thank you!
17 |
18 | Before submitting an issue, please check if similar questions have already been issued.
19 |
20 | ## Pull requests
21 |
22 | **Working on your first Pull Request?** You can learn how from this *free* series
23 | [How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github)
24 |
25 | All pull requests are welcome. Thanks for taking the time to contribute.
26 |
27 | - Create an issue about the features, such as new components.
28 | - Fork the repo to your own account.
29 | - Clone your fork.
30 | - Create a new branch base on `dev`, if you want to add new component, the branch name should be formatted as `component-[Component Name]`. (e.g. `component-steps`) And the commit info should be formatted as `[Component Name]: Info about commit`.
31 | - Make sure that running `npm run build` outputs the correct files.
32 | - Rebase before creating a PR to keep commit history clear. (Merge request to branch `dev`)
33 | - Provide some description about your PR.
34 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 | Copyright (c) 2017 O2Team
3 |
4 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
5 |
6 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
7 |
8 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
9 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | 
4 |
5 |
6 |
7 | # AT-UI Style
8 |
9 | [![NPM][npm-version-image]][npm-version-url]
10 |
11 | `AT-UI Style` is an ui component library based on `Flexbox`, be used for [AT-UI](https://at.aotu.io/)
12 |
13 | ## Install
14 |
15 | ```bash
16 | npm install at-ui-style
17 | ```
18 |
19 | ## Usage
20 |
21 | ```js
22 | import 'at-ui-style'
23 | ```
24 |
25 | ## Contribution
26 |
27 | Finding bugs, sending pull requests or improving our docs - any contribution is welcome and highly appreciated. To get started, head over to our [contribution guidelines](https://github.com/at-ui/at-ui-style/blob/master/CONTRIBUTING.md). Thanks!
28 |
29 | ## License
30 |
31 | MIT
32 |
33 |
34 | [npm-version-image]: https://img.shields.io/npm/v/at-ui-style.svg?style=flat-square
35 | [npm-version-url]: https://www.npmjs.com/package/at-ui-style
36 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "at-ui-style",
3 | "version": "1.5.1",
4 | "description": "The StyleSheet for AT-UI",
5 | "scss": "src/index.scss",
6 | "main": "css/at.css",
7 | "style": "css/at.css",
8 | "scripts": {
9 | "build": "npm run build-clean && npm run copy && npm run build-scss && npm run build-scss-minify && npm run build-autoprefix",
10 | "build-clean": "rimraf css",
11 | "build-scss": "node-sass --output-style expanded --source-map true src/index.scss css/at.css",
12 | "build-scss-minify": "node-sass --output-style compressed --source-map true src/index.scss css/at.min.css",
13 | "build-autoprefix": "postcss --use autoprefixer -c postcss.json css/*.css -d css/",
14 | "copy": "copyfiles -f src/fonts/*.* css/fonts/",
15 | "prepublish": "npm run build",
16 | "start": "npm run build-scss -- --watch"
17 | },
18 | "repository": {
19 | "type": "git",
20 | "url": "git@github.com:o2team/at-ui-style.git"
21 | },
22 | "keywords": [
23 | "at",
24 | "at-ui",
25 | "at-ui-style",
26 | "css",
27 | "scss",
28 | "framework"
29 | ],
30 | "author": "Koppt Ho ",
31 | "license": "MIT",
32 | "devDependencies": {
33 | "autoprefixer": "^7.1.1",
34 | "copyfiles": "^1.2.0",
35 | "eslint-config-o2team": "^0.1.6",
36 | "node-sass": "^4.5.3",
37 | "postcss-cli": "^4.1.0",
38 | "rimraf": "^2.6.1"
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/postcss.json:
--------------------------------------------------------------------------------
1 |
2 | {
3 | "autoprefixer": {
4 | "browsers": ["last 2 versions", "ie > 8"]
5 | }
6 | }
7 |
--------------------------------------------------------------------------------
/src/components/alert.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Alert Style
3 | */
4 | @import '../variables/index.scss';
5 |
6 | .at-alert {
7 | position: relative;
8 | display: flex;
9 | width: 100%;
10 | padding: $alert-padding;
11 | color: $alert-text-color-success;
12 | line-height: 1.5;
13 | border: 1px solid #ccc;
14 | border-radius: $alert-border-radius;
15 | transition: opacity .3s;
16 | overflow: hidden;
17 | opacity: 1;
18 |
19 | /* element */
20 | &__icon {
21 | margin-right: 8px;
22 | color: $alert-icon-color-success;
23 | font-size: $alert-icon-font-size;
24 | line-height: 20px;
25 | vertical-align: middle;
26 | }
27 | &__content {
28 | flex: 1;
29 | padding-right: 8px;
30 | }
31 | &__message {
32 | color: $alert-text-color-success;
33 | font-size: $alert-message-font-size;
34 | }
35 | &__description {
36 | margin-top: 4px;
37 | color: $alert-text-color-success;
38 | font-size: $alert-description-font-size;
39 | }
40 | &__close {
41 | color: $alert-icon-color-success;
42 | font-size: $alert-close-font-size;
43 | line-height: 20px;
44 | opacity: 1;
45 | cursor: pointer;
46 | }
47 |
48 | /* modifier */
49 | &--success {
50 | border-color: $alert-border-color-success;
51 | background-color: $alert-bg-color-success;
52 |
53 | .at-alert__message,
54 | .at-alert__description,
55 | .at-alert__icon {
56 | color: $alert-text-color-success;
57 | }
58 | .at-alert__close {
59 | color: $alert-icon-color-success;
60 | }
61 | }
62 | &--error {
63 | border-color: $alert-border-color-error;
64 | background-color: $alert-bg-color-error;
65 |
66 | .at-alert__message,
67 | .at-alert__description,
68 | .at-alert__icon {
69 | color: $alert-text-color-error;
70 | }
71 | .at-alert__close {
72 | color: $alert-icon-color-error;
73 | }
74 | }
75 | &--warning {
76 | border-color: $alert-border-color-warning;
77 | background-color: $alert-bg-color-warning;
78 |
79 | .at-alert__message,
80 | .at-alert__description,
81 | .at-alert__icon {
82 | color: $alert-text-color-warning;
83 | }
84 | .at-alert__close {
85 | color: $alert-icon-color-warning;
86 | }
87 | }
88 | &--info {
89 | border-color: $alert-border-color-info;
90 | background-color: $alert-bg-color-info;
91 |
92 | .at-alert__message,
93 | .at-alert__description,
94 | .at-alert__icon {
95 | color: $alert-text-color-info;
96 | }
97 | .at-alert__close {
98 | color: $alert-icon-color-info;
99 | }
100 | }
101 | &--with-description {
102 | padding: $alert-padding-lg;
103 |
104 | .at-alert__icon {
105 | font-size: 24px;
106 | }
107 | .at-alert__message {
108 | font-weight: bold;
109 | }
110 | }
111 | }
112 |
--------------------------------------------------------------------------------
/src/components/animation.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Animations
3 | */
4 |
5 | @mixin vue-anim($class-name, $keyframe-name) {
6 | .#{$class-name}-enter-active {
7 | animation: #{$keyframe-name}In .3s ease-in-out both;
8 | }
9 | .#{$class-name}-leave-active {
10 | animation: #{$keyframe-name}Out .3s ease-in-out both;
11 | }
12 | }
13 |
14 | @keyframes slideUpIn {
15 | 0% {
16 | opacity: 0;
17 | transform-origin: 0 0;
18 | transform: translateY(-6px);
19 | }
20 | 100% {
21 | opacity: 1;
22 | transform-origin: 0 0;
23 | transform: translateY(0);
24 | }
25 | }
26 |
27 | @keyframes slideUpOut {
28 | 0% {
29 | opacity: 1;
30 | transform-origin: 0% 0%;
31 | transform: translateY(0);
32 | }
33 | 100% {
34 | opacity: 0;
35 | transform-origin: 0% 0%;
36 | transform: translateY(-6px);
37 | }
38 | }
39 |
40 | @keyframes moveUpIn {
41 | 0% {
42 | opacity: 0;
43 | transform-origin: 0 0;
44 | transform: translateY(-100%);
45 | }
46 | 100% {
47 | opacity: 1;
48 | transform-origin: 0 0;
49 | transform: translateY(0);
50 | }
51 | }
52 |
53 | @keyframes moveUpOut {
54 | 0% {
55 | opacity: 1;
56 | transform-origin: 0 0;
57 | transform: translateY(0);
58 | }
59 | 100% {
60 | opacity: 0;
61 | transform-origin: 0 0;
62 | transform: translateY(-100%);
63 | }
64 | }
65 |
66 | @keyframes fadeIn {
67 | 0% {
68 | opacity: 0;
69 | }
70 | 100% {
71 | opacity: 1;
72 | }
73 | }
74 |
75 | @keyframes fadeOut {
76 | 0% {
77 | opacity: 1;
78 | }
79 | 100% {
80 | opacity: 0;
81 | }
82 | }
83 |
84 | @keyframes notificationFadeIn {
85 | 0% {
86 | transform: translateX(100%);
87 | }
88 | 100% {
89 | transform: translateX(0);
90 | }
91 | }
92 |
93 | @keyframes notificationFadeOut {
94 | 0% {
95 | opacity: 1;
96 | }
97 | 100% {
98 | opacity: 0;
99 | }
100 | }
101 |
102 | @include vue-anim(slide-up, slideUp);
103 | @include vue-anim(move-up, moveUp);
104 | @include vue-anim(fade, fade);
105 | @include vue-anim(notification-fade, notificationFade);
106 |
107 |
108 | /**
109 | * Element Animation
110 | */
111 |
112 | @keyframes icon-loading {
113 | 0% {
114 | transform: rotate(0);
115 | }
116 | 100% {
117 | transform: rotate(360deg);
118 | }
119 | }
120 |
121 | .collapse-transition {
122 | transition: height .3s linear;
123 | }
124 |
--------------------------------------------------------------------------------
/src/components/badge.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Badge Style
3 | */
4 | @import '../variables/index.scss';
5 |
6 | .at-badge {
7 | position: relative;
8 | display: inline-block;
9 | // vertical-align: middle;
10 |
11 | /* element */
12 | &__content {
13 | display: inline-block;
14 | height: $badge-height;
15 | padding: $badge-padding;
16 | color: $badge-font-color;
17 | font-size: $badge-font-size;
18 | text-align: center;
19 | line-height: $badge-height - 2;
20 | white-space: nowrap;
21 | border: 1px solid $color-white;
22 | border-radius: $badge-border-radius;
23 | background-color: $badge-bg-color;
24 | }
25 |
26 | /* modifier */
27 | &--alone {
28 | .at-badge__content {
29 | top: 0;
30 | }
31 | }
32 | &--corner {
33 | position: absolute;
34 | top: (-$badge-height / 2) + 1;
35 | right: 0;
36 | transform: translateX(50%);
37 | }
38 | &--dot {
39 | padding: 0;
40 | width: $badge-dot-size;
41 | height: $badge-dot-size;
42 | top: (-$badge-dot-size / 2) + 1;
43 | }
44 | &--success {
45 | .at-badge__content {
46 | background-color: $badge-bg-color-success;
47 | }
48 | }
49 | &--warning {
50 | .at-badge__content {
51 | background-color: $badge-bg-color-warning;
52 | }
53 | }
54 | &--info {
55 | .at-badge__content {
56 | background-color: $badge-bg-color-info;
57 | }
58 | }
59 | }
60 |
--------------------------------------------------------------------------------
/src/components/breadcrumb.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Breadcrumb Style
3 | */
4 | @import '../variables/index.scss';
5 | @import '../mixins/index.scss';
6 |
7 | .at-breadcrumb {
8 | @include clearfix();
9 | font-size: $breadcrumb-font-size;
10 | line-height: 1.5;
11 |
12 | /* element */
13 | &__separator {
14 | margin: 0 8px;
15 | color: $breadcrumb-separator-color;
16 | }
17 | &__item {
18 | &:last-child {
19 | color: $link-disabled-color;
20 | cursor: text;
21 |
22 | .at-breadcrumb__separator {
23 | display: none;
24 | }
25 | }
26 | }
27 | &__link {
28 | color: $link-color;
29 | transition: color .3s;
30 |
31 | &:hover {
32 | color: $link-hover-color;
33 | cursor: pointer;
34 | }
35 | &:active {
36 | color: $link-active-color;
37 | cursor: pointer;
38 | }
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/src/components/button.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Button Style
3 | */
4 | @import '../variables/index.scss';
5 |
6 | $btn-hover-tint-percent: 15%;
7 | $btn-active-shade-percent: 10%;
8 |
9 | @mixin button-status($border-color, $background-color) {
10 | border-color: $border-color;
11 | background-color: $background-color;
12 |
13 | &:hover {
14 | background-color: tint($background-color, $btn-hover-tint-percent);
15 | border-color: tint($background-color, $btn-hover-tint-percent);
16 | }
17 | &:active {
18 | background-color: shade($background-color, $btn-active-shade-percent);
19 | border-color: shade($background-color, $btn-active-shade-percent);
20 | }
21 | }
22 |
23 | @mixin button-hollow-status($text-color, $border-color) {
24 | background: none;
25 | color: $text-color;
26 |
27 | &:hover {
28 | background: none;
29 | color: tint($text-color, $btn-hover-tint-percent);
30 | border-color: tint($border-color, $btn-hover-tint-percent);
31 | }
32 | &:active {
33 | background: none;
34 | color: tint($text-color, $btn-active-shade-percent);
35 | border-color: tint($border-color, $btn-active-shade-percent);
36 | }
37 | }
38 |
39 | .at-btn {
40 | display: inline-block;
41 | padding: $btn-padding-base;
42 | font-size: 0;
43 | outline: 0;
44 | line-height: 1.5;
45 | text-align: center;
46 | white-space: nowrap;
47 | border: 1px solid $btn-default-border;
48 | border-radius: $border-radius-base;
49 | background-color: $btn-default-bg;
50 | transition: background 0.2s;
51 | user-select: none;
52 | cursor: pointer;
53 |
54 | &:hover {
55 | background-color: $btn-default-bg-hover;
56 | }
57 | &:active {
58 | background-color: $btn-default-bg-active;
59 | }
60 | &:disabled,
61 | &:disabled:hover,
62 | &:disabled:active, {
63 | cursor: not-allowed;
64 | color: $btn-disabled-color;
65 | border-color: $btn-disabled-border;
66 | background-color: $btn-disabled-bg;
67 | }
68 |
69 | /* modifier */
70 | &--primary,
71 | &--success,
72 | &--error,
73 | &--warning,
74 | &--info {
75 | color: $color-white;
76 | }
77 | &--default {
78 | &--hollow {
79 | @include button-hollow-status($text-color, $btn-default-border);
80 | }
81 | }
82 | &--primary {
83 | @include button-status($btn-primary-border, $btn-primary-bg);
84 |
85 | &--hollow {
86 | @include button-hollow-status($color-primary, $btn-primary-border);
87 | }
88 | }
89 | &--success {
90 | @include button-status($btn-success-border, $btn-success-bg);
91 |
92 | &--hollow {
93 | @include button-hollow-status($color-success, $btn-success-border);
94 | }
95 | }
96 | &--error {
97 | @include button-status($btn-error-border, $btn-error-bg);
98 |
99 | &--hollow {
100 | @include button-hollow-status($color-error, $btn-error-border);
101 | }
102 | }
103 | &--warning {
104 | @include button-status($btn-warning-border, $btn-warning-bg);
105 |
106 | &--hollow {
107 | @include button-hollow-status($color-warning, $btn-warning-border);
108 | }
109 | }
110 | &--info {
111 | @include button-status($btn-info-border, $btn-info-bg);
112 |
113 | &--hollow {
114 | @include button-hollow-status($color-info, $btn-info-border);
115 | }
116 | }
117 | &--text {
118 | @include button-hollow-status($btn-text-border, transparent);
119 | color: $text-color;
120 | border: none;
121 |
122 | &:disabled,
123 | &:disabled:hover,
124 | &:disabled:active, {
125 | background: none;
126 | }
127 | }
128 | &--default,
129 | &--primary,
130 | &--success,
131 | &--error,
132 | &--warning,
133 | &--info,
134 | &--text {
135 | &--hollow {
136 | &:disabled,
137 | &:disabled:hover,
138 | &:disabled:active, {
139 | background: none;
140 | }
141 | }
142 | }
143 | &--large {
144 | font-size: $btn-font-size-md;
145 | padding: $btn-padding-md;
146 |
147 | &.at-btn--circle {
148 | width: $btn-circle-size-lg;
149 | height: $btn-circle-size-lg;
150 |
151 | .at-btn__icon {
152 | font-size: $btn-font-size-lg;
153 | }
154 | }
155 | .at-btn__text {
156 | font-size: $btn-font-size-md;
157 | }
158 | }
159 | &--small {
160 | font-size: $btn-font-size-sm;
161 | padding: $btn-padding-sm;
162 |
163 | &.at-btn--circle {
164 | width: $btn-circle-size-sm;
165 | height: $btn-circle-size-sm;
166 |
167 | .at-btn__icon {
168 | font-size: $btn-font-size-sm;
169 | }
170 | }
171 | .at-btn__text {
172 | font-size: $btn-font-size-sm;
173 | }
174 | }
175 | &--smaller {
176 | font-size: $btn-font-size-smer;
177 | padding: $btn-padding-smer;
178 |
179 | &.at-btn--circle {
180 | width: $btn-circle-size-smer;
181 | height: $btn-circle-size-smer;
182 |
183 | .at-btn__icon {
184 | font-size: $btn-font-size-smer;
185 | }
186 | }
187 | .at-btn__text {
188 | font-size: $btn-font-size-smer;
189 | }
190 | }
191 | &--circle {
192 | width: $btn-circle-size;
193 | height: $btn-circle-size;
194 | padding: 0;
195 | border-radius: 50%;
196 |
197 | .at-btn__icon {
198 | font-size: 14px;
199 | }
200 | }
201 |
202 | /* element */
203 | &__icon,
204 | &__loading {
205 | font-size: $btn-font-size-base;
206 | line-height: 1.5;
207 |
208 | + span {
209 | margin-left: 4px;
210 | }
211 | }
212 | &__loading {
213 | display: inline-block;
214 | line-height: 1;
215 | animation: loadingCircle 1s linear infinite;
216 | }
217 | &__text {
218 | font-size: $btn-font-size-base;
219 | }
220 | }
221 |
222 | .at-btn-group {
223 | font-size: 0;
224 | display: inline-block;
225 |
226 | .at-btn {
227 | border-radius: 0;
228 |
229 | &:not(:last-child) {
230 | margin-right: -1px;
231 | }
232 | &:first-child {
233 | border-radius: $border-radius-base 0 0 $border-radius-base;
234 | }
235 | &:last-child {
236 | border-radius: 0 $border-radius-base $border-radius-base 0;
237 | }
238 | }
239 | }
240 |
241 | @keyframes loadingCircle {
242 | 0% {
243 | transform: rotate(0);
244 | }
245 | 100% {
246 | transform: rotate(1turn);
247 | }
248 | }
249 |
--------------------------------------------------------------------------------
/src/components/card.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Card Style
3 | */
4 | @import '../variables/index.scss';
5 |
6 | .at-card {
7 | position: relative;
8 | border-radius: $card-border-radius;
9 | background-color: $card-bg-color;
10 | transition: all .3s;
11 |
12 | &:not(.at-card--no-hover):hover {
13 | border-color: $card-border-color-hover;
14 | box-shadow: 1px 0 16px 0 $shadow-color;
15 | }
16 |
17 | /* element */
18 | &__head {
19 | padding: 0 24px;
20 | height: $card-head-height;
21 | line-height: $card-head-height;
22 | border-bottom: 1px solid $card-border-color;
23 | }
24 | &__title {
25 | display: inline-block;
26 | }
27 | &__extra {
28 | float: right;
29 | }
30 | &__body {
31 | padding: 24px;
32 |
33 | &--loading {
34 | span {
35 | display: inline-block;
36 | margin: 5px 1%;
37 | height: 14px;
38 | border-radius: 2px;
39 | background: linear-gradient(90deg,
40 | rgba(192, 198, 206, .12),
41 | rgba(192, 198, 206, .2),
42 | rgba(192, 198, 206, .12));
43 | background-size: 600% 600%;
44 | animation: card-loading 1.4s ease infinite;
45 | }
46 | }
47 | }
48 |
49 | /* modifier */
50 | &--bordered {
51 | border: 1px solid $card-border-color;
52 | }
53 | }
54 |
55 | @keyframes card-loading {
56 | 0%, to {
57 | background-position: 0 50%;
58 | }
59 | 50% {
60 | background-position: 100% 50%;
61 | }
62 | }
63 |
--------------------------------------------------------------------------------
/src/components/checkbox.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Checkbox Style
3 | */
4 | @import '../variables/index.scss';
5 |
6 | .at-checkbox {
7 | position: relative;
8 | display: inline-block;
9 | font-size: 0;
10 | line-height: 1.5;
11 | white-space: nowrap;
12 | user-select: none;
13 | cursor: pointer;
14 |
15 | & + .at-checkbox {
16 | margin-left: 16px;
17 | }
18 |
19 | /* modifier */
20 | &--checked {
21 | .at-checkbox__inner {
22 | border-color: $checkbox-border-c-checked;
23 | background-color: $checkbox-border-c-checked;
24 |
25 | &::after {
26 | transform: rotate(45deg) scale(1);
27 | }
28 | }
29 | }
30 | &--disabled {
31 | .at-checkbox__inner {
32 | border-color: $checkbox-border-c-disabled;
33 | background-color: $checkbox-bg-c-disabled;
34 | cursor: $cursor-disabled;
35 |
36 | &:hover {
37 | border-color: $checkbox-border-c-disabled;
38 | }
39 | &::after {
40 | border-color: $border-color-base;
41 | cursor: $cursor-disabled;
42 | }
43 | }
44 | .at-checkbox__label {
45 | color: $checkbox-label-c-disabled;
46 | cursor: $cursor-disabled;
47 | }
48 | }
49 | &--focus {
50 | border-color: $brand-color-light;
51 | }
52 |
53 | /* element */
54 | &__input {
55 | position: relative;
56 | display: inline-block;
57 | white-space: nowrap;
58 | vertical-align: middle;
59 | cursor: pointer;
60 | outline: none;
61 | }
62 | &__inner {
63 | position: relative;
64 | display: inline-flex;
65 | justify-content: center;
66 | align-items: center;
67 | width: $checkbox-size;
68 | height: $checkbox-size;
69 | border: 1px solid $checkbox-border-c;
70 | border-radius: $border-radius-base;
71 | background-color: $color-white;
72 | transition: all .2s;
73 | cursor: pointer;
74 | z-index: 1;
75 |
76 | &:hover {
77 | border-color: $checkbox-border-c-hover;
78 | }
79 | &::after {
80 | content: '';
81 | width: 4px;
82 | height: 8px;
83 | border: 2px solid $color-white;
84 | border-left: 0;
85 | border-top: 0;
86 | transform: rotate(45deg) scale(0);
87 | transition: transform .2s;
88 | }
89 | }
90 | &__original {
91 | position: absolute;
92 | top: 0;
93 | bottom: 0;
94 | left: 0;
95 | right: 0;
96 | opacity: 0;
97 | outline: none;
98 | z-index: -1;
99 | }
100 | &__label {
101 | font-size: $checkbox-font-size;
102 | padding-left: 8px;
103 | vertical-align: middle;
104 | }
105 | }
106 |
--------------------------------------------------------------------------------
/src/components/collapse.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Collapse Style
3 | */
4 | @import '../variables/index.scss';
5 |
6 | .at-collapse {
7 | border: 1px solid $collapse-border-color;
8 | border-radius: $collapse-border-radius;
9 | overflow: hidden;
10 |
11 | /* element */
12 | &__item {
13 | border-bottom: 1px solid $collapse-border-color;
14 |
15 | &:last-of-type {
16 | border-bottom: none;
17 | }
18 |
19 | &--active {
20 | > .at-collapse__header {
21 | .at-collapse__icon {
22 | transform: rotate(90deg)
23 | }
24 | }
25 | }
26 | &--disabled {
27 | .at-collapse__header {
28 | color: $collapse-header-text-color-disabled;
29 | cursor: not-allowed;
30 | }
31 | .at-collapse__icon {
32 | color: $collapse-header-text-color-disabled;
33 | }
34 | }
35 | }
36 | &__header {
37 | position: relative;
38 | padding: 8px 32px;
39 | color: $collapse-header-text-color;
40 | background-color: $collapse-header-bg-color;
41 | transition: all .3s;
42 | cursor: pointer;
43 | }
44 | &__icon {
45 | position: absolute;
46 | top: 14px;
47 | left: 16px;
48 | color: $collapse-icon-color;
49 | font-size: $collapse-icon-size;
50 | font-weight: bold;
51 | transition: all .3s;
52 | }
53 | &__body {
54 | will-change: height;
55 | }
56 | &__content {
57 | padding: 16px;
58 | color: $collapse-body-text-color;
59 | border-radius: 0 0 $collapse-border-radius $collapse-border-radius;
60 | background-color: $collapse-body-bg-color;
61 | overflow: hidden;
62 | }
63 |
64 | /* modifier */
65 | &--simple {
66 | border: none;
67 |
68 | .at-collapse__item {
69 | border-bottom: none;
70 | }
71 | .at-collapse__header {
72 | border-bottom: 1px solid $collapse-border-color;
73 | background-color: transparent;
74 | }
75 | }
76 | }
77 |
--------------------------------------------------------------------------------
/src/components/dropdown.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Dropdown Style
3 | */
4 | @import '../variables/index.scss';
5 | @import '../mixins/index.scss';
6 |
7 | .at-dropdown {
8 | display: inline-block;
9 |
10 | &__popover {
11 | position: absolute;
12 | overflow: visible;
13 | z-index: $zindex-dropdown;
14 | }
15 | }
16 |
17 | .at-dropdown-menu {
18 | position: relative;
19 | padding: 0;
20 | width: inherit;
21 | max-height: $dropdown-max-height;
22 | font-size: 0;
23 | border-radius: $border-radius-base;
24 | background-color: $dropdown-bg-color;
25 | box-shadow: $dropdown-box-shadow;
26 | list-style: none;
27 | // overflow-y: auto;
28 | z-index: $zindex-dropdown;
29 |
30 | &__item {
31 | @include ellipsis();
32 | display: block;
33 | padding: $dropdown-item-padding;
34 | min-width: $dropdown-item-min-width;
35 | font-size: $dropdown-font-size;
36 | line-height: 1.5;
37 | transition: all .3s;
38 | cursor: pointer;
39 |
40 | &:hover {
41 | background-color: $dropdown-item-bg-color-hover;
42 | }
43 | &--disabled {
44 | color: $dropdown-item-bg-color-disabled;
45 | cursor: $cursor-disabled;
46 |
47 | &:hover {
48 | background-color: $dropdown-bg-color;
49 | }
50 | }
51 | &--divided {
52 | position: relative;
53 | margin-top: 6px;
54 | border-top: 1px solid $dropdown-divided-color;
55 |
56 | &:before {
57 | content: '';
58 | display: block;
59 | height: 6px;
60 | }
61 | }
62 | }
63 | }
64 |
--------------------------------------------------------------------------------
/src/components/form.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Form Style
3 | */
4 | @import '../variables/index.scss';
5 | @import '../mixins/index.scss';
6 |
7 | .at-form {
8 | /* modifier */
9 | &--label-left {
10 | .at-form-item__label {
11 | text-align: left;
12 | }
13 | }
14 | &--label-right {
15 | .at-form-item__label {
16 | text-align: right;
17 | }
18 | }
19 | &--label-top {
20 | .at-form-item__label {
21 | display: inline-block;
22 | text-align: left;
23 | padding: 0 0 10px 0;
24 | }
25 | }
26 | &--inline {
27 | .at-form-item {
28 | display: inline-block;
29 | margin-right: 8px;
30 | vertical-align: top;
31 | }
32 | .at-form-item__label {
33 | display: inline-block;
34 | }
35 | .at-form-item__content {
36 | display: inline-block;
37 | vertical-align: top;
38 | }
39 | &.at-form--label-top .at-form-item__content {
40 | display: block;
41 | }
42 | }
43 | }
44 |
45 | .at-form-item {
46 | margin-bottom: 24px;
47 | @include clearfix;
48 |
49 | .at-form-item {
50 | margin-bottom: 0;
51 |
52 | .at-form-item__content {
53 | margin-left: 0;
54 | }
55 | }
56 | &__label {
57 | text-align: right;
58 | vertical-align: middle;
59 | float: left;
60 | font-size: $font-size-base;
61 | color: $color-normal;
62 | line-height: 1;
63 | padding: 10px 12px 10px 0;
64 | }
65 | &__content {
66 | position: relative;
67 | font-size: $font-size-base;
68 | line-height: 36px;
69 | @include clearfix;
70 | }
71 | &__error-tip {
72 | position: absolute;
73 | left: 0;
74 | top: 100%;
75 | padding-top: 4px;
76 | color: $color-error;
77 | font-size: $font-size-smer;
78 | line-height: 1;
79 | }
80 | }
81 |
--------------------------------------------------------------------------------
/src/components/index.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Components
3 | */
4 |
5 | @import './animation.scss';
6 | @import './button.scss';
7 | @import './tag.scss';
8 | @import './checkbox.scss';
9 | @import './input.scss';
10 | @import './input-number.scss';
11 | @import './radio.scss';
12 | @import './select.scss';
13 | @import './switch.scss';
14 | @import './slider.scss';
15 | @import './textarea.scss';
16 | @import './alert.scss';
17 | @import './badge.scss';
18 | @import './loading-bar.scss';
19 | @import './modal.scss';
20 | @import './message.scss';
21 | @import './notification.scss';
22 | @import './popover.scss';
23 | @import './progress.scss';
24 | @import './tooltip.scss';
25 | @import './breadcrumb.scss';
26 | @import './dropdown.scss';
27 | @import './pagination.scss';
28 | @import './menu.scss';
29 | @import './table.scss';
30 | @import './card.scss';
31 | @import './collapse.scss';
32 | @import './steps.scss';
33 | @import './rate.scss';
34 | @import './tabs.scss';
35 | @import './timeline.scss';
36 |
37 | // @import './form.scss';
38 |
--------------------------------------------------------------------------------
/src/components/input-number.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * InputNumber Style
3 | */
4 | @import '../variables/index.scss';
5 |
6 | .at-input-number {
7 | display: inline-block;
8 | position: relative;
9 | width: 100%;
10 | height: $inputnumber-height-base;
11 | min-width: $inputnumber-min-width;
12 | border: 1px solid $inputnumber-border-color;
13 | border-radius: $inputnumber-border-radius;
14 | background-color: $color-white;
15 | transition: border .2s;
16 | overflow: hidden;
17 |
18 | /* status */
19 | &:hover:not(&--disabled) {
20 | border-color: $inputnumber-border-color-hover;
21 |
22 | .at-input-number__handler {
23 | opacity: 1;
24 | }
25 | }
26 |
27 | /* element */
28 | &__input {
29 | width: 100%;
30 | height: 100%;
31 | }
32 | &__original {
33 | display: block;
34 | width: 100%;
35 | height: 100%;
36 | padding: $inputnumber-padding-base;
37 | color: $inputnumber-font-color;
38 | line-height: 1.5;
39 | border: none;
40 | border-radius: $inputnumber-border-radius;
41 | background-color: $inputnumber-bg-color;
42 | outline: none;
43 | }
44 | input[type=number] {
45 | -moz-appearance: textfield;
46 | background-color: transparent;
47 |
48 | &::-webkit-inner-spin-button,
49 | &::-webkit-outer-spin-button {
50 | margin: 0;
51 | -webkit-appearance: none;
52 | }
53 | }
54 | &__handler {
55 | position: absolute;
56 | top: 0;
57 | right: 0;
58 | width: $inputnumber-handler-width;
59 | height: 100%;
60 | border-left: 1px solid $inputnumber-handler-border-color;
61 | border-radius: 0 $inputnumber-border-radius $inputnumber-border-radius 0;
62 | transition: opacity .3s;;
63 | opacity: 0;
64 | }
65 | &__up,
66 | &__down {
67 | position: relative;
68 | display: flex;
69 | width: 100%;
70 | height: $inputnumber-handler-ele-height-base;
71 | align-items: center;
72 | justify-content: center;
73 | color: $inputnumber-handler-font-color;
74 | font-size: $inputnumber-handler-font-size-base;
75 | text-align: center;
76 | transition: all .3s;
77 | cursor: pointer;
78 |
79 | &:hover:not(.at-input-number__up--disabled):not(.at-input-number__down--disabled) {
80 | height: $inputnumber-handler-ele-height-base-hover;
81 | color: $inputnumber-handler-font-color-hover;
82 | }
83 | &:active:not(.at-input-number__up--disabled):not(.at-input-number__down--disabled) {
84 | background-color: $inputnumber-handler-bg-color-active;
85 | }
86 | &--disabled {
87 | color: $inputnumber-handler-ele-font-color-disabled;
88 | cursor: $cursor-disabled;
89 | }
90 | }
91 | &__down {
92 | border-top: 1px solid $inputnumber-handler-border-color;
93 |
94 | &:hover {
95 | margin-top: -2px;
96 | }
97 | }
98 |
99 | /* modifier */
100 | &--disabled {
101 | color: $input-font-color-disabled;
102 | border-color: $inputnumber-border-color-disabled;
103 | background-color: $inputnumber-bg-color-disabled;
104 | cursor: $cursor-disabled;
105 |
106 | .at-input-number__original {
107 | color: $input-font-color-disabled;
108 | cursor: $cursor-disabled;
109 | }
110 | .at-input-number__handler {
111 | display: none;
112 | }
113 | }
114 | &--small {
115 | height: $inputnumber-height-sm;
116 |
117 | .at-input-number__up,
118 | .at-input-number__down {
119 | height: $inputnumber-handler-ele-height-sm;
120 | font-size: $inputnumber-handler-font-size-sm;
121 |
122 | &:hover {
123 | height: $inputnumber-handler-ele-height-sm-hover !important;
124 | }
125 | }
126 | }
127 | &--large {
128 | height: $inputnumber-height-lg;
129 |
130 | .at-input-number__up,
131 | .at-input-number__down {
132 | height: $inputnumber-handler-ele-height-lg;
133 | font-size: $inputnumber-handler-font-size-lg;
134 |
135 | &:hover {
136 | height: $inputnumber-handler-ele-height-lg-hover !important;
137 | }
138 | }
139 | }
140 | }
141 |
--------------------------------------------------------------------------------
/src/components/input.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Input Style
3 | */
4 | @import '../variables/index.scss';
5 |
6 | /**
7 | * AtInput
8 | */
9 | .at-input {
10 | position: relative;
11 | font-size: 0;
12 | line-height: 1.5;
13 | outline: 0;
14 |
15 | /* element */
16 | &__original {
17 | display: block;
18 | width: 100%;
19 | padding: $input-padding-base;
20 | color: $input-font-color;
21 | font-size: $input-font-size-base;
22 | background-color: $input-bg-color;
23 | border: 1px solid $border-color-base;
24 | border-radius: $border-radius-base;
25 | transition: border .2s;
26 | outline: none;
27 |
28 | &::placeholder {
29 | color: $input-placeholder-color;
30 | }
31 | &:hover {
32 | border-color: $input-border-color-hover;
33 | }
34 | &:focus {
35 | border-color: $input-border-color-focus;
36 | }
37 | }
38 | &__icon {
39 | position: absolute;
40 | top: 0;
41 | right: 0;
42 | margin: 0 6px 0 0;
43 | width: 20px;
44 | height: 100%;
45 | color: $input-icon-color;
46 | font-size: $input-icon-font-size;
47 | text-align: center;
48 |
49 | &:after {
50 | content: '';
51 | display: inline-block;
52 | width: 0;
53 | height: 100%;
54 | vertical-align: middle;
55 | }
56 | }
57 |
58 | /* Modifier */
59 | &--disabled {
60 | .at-input__original {
61 | color: $input-font-color-disabled;
62 | background-color: $input-bg-color-disabled;
63 | border-color: $input-border-color-disabled;
64 | cursor: $cursor-disabled;
65 |
66 | &::placeholder {
67 | color: $input-placeholder-color-disabled;
68 | }
69 | }
70 | }
71 | &--large {
72 | font-size: $input-font-size-lg;
73 |
74 | .at-input__original {
75 | padding: $input-padding-lg;
76 |
77 | &::placeholder {
78 | font-size: $input-font-size-lg;
79 | }
80 | }
81 | }
82 | &--small {
83 | font-size: $input-font-size-sm;
84 |
85 | .at-input__original {
86 | padding: $input-padding-sm;
87 |
88 | &::placeholder {
89 | font-size: $input-font-size-sm;
90 | }
91 | }
92 | }
93 | &--success {
94 | .at-input__original {
95 | border-color: $input-border-color-success;
96 | }
97 | }
98 | &--error {
99 | .at-input__original {
100 | border-color: $input-border-color-error;
101 | }
102 | }
103 | &--warning {
104 | .at-input__original {
105 | border-color: $input-border-color-warning;
106 | }
107 | }
108 | &--info {
109 | .at-input__original {
110 | border-color: $input-border-color-info;
111 | }
112 | }
113 | &--prepend {
114 | .at-input__original {
115 | border-top-left-radius: 0;
116 | border-bottom-left-radius: 0;
117 | }
118 | }
119 | &--append {
120 | .at-input__original {
121 | border-top-right-radius: 0;
122 | border-bottom-right-radius: 0;
123 | }
124 | }
125 | &--icon {
126 | .at-input__original {
127 | padding-right: 32px;
128 | }
129 | }
130 | }
131 |
132 | /**
133 | * AtInputGroup
134 | */
135 | .at-input-group {
136 | display: flex;
137 | line-height: normal;
138 | border-collapse: separate;
139 |
140 | /* element */
141 | &__prepend,
142 | &__append {
143 | display: flex;
144 | flex: 1;
145 | padding: 0 10px;
146 | color: $input-group-font-color;
147 | font-size: $input-font-size-base;
148 | border: 1px solid $border-color-base;
149 | border-radius: $border-radius-base;
150 | background-color: $input-group-bg-color;
151 | align-items: center;
152 | white-space: nowrap;
153 | }
154 | &__prepend {
155 | border-right: 0;
156 | border-top-right-radius: 0;
157 | border-bottom-right-radius: 0;
158 | }
159 | &__append {
160 | border-left: 0;
161 | border-top-left-radius: 0;
162 | border-bottom-left-radius: 0;
163 | }
164 |
165 | /* modifier */
166 | &--button {
167 | display: flex;
168 | align-items: center;
169 | transition: backgroud .2s;
170 | user-select: none;
171 | cursor: pointer;
172 |
173 | &:hover {
174 | background-color: $input-group-bg-color-hover;
175 | }
176 | &:active {
177 | background-color: $input-group-bg-color-active;
178 | }
179 | }
180 | }
181 |
--------------------------------------------------------------------------------
/src/components/loading-bar.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * LoadingBar Style
3 | */
4 | @import '../variables/index.scss';
5 |
6 | .at-loading-bar {
7 | position: fixed;
8 | top: 0;
9 | left: 0;
10 | right: 0;
11 | width: 100%;
12 | z-index: $zindex-loading-bar;
13 |
14 | /* element */
15 | &__inner {
16 | height: 100%;
17 | transition: width .3s linear;
18 | }
19 |
20 | /* modifier */
21 | &--success {
22 | .at-loading-bar__inner {
23 | background-color: $loading-bar-bg-color-success;
24 | }
25 | }
26 | &--error {
27 | .at-loading-bar__inner {
28 | background-color: $loading-bar-bg-color-error;
29 | }
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/src/components/menu.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Menu Style
3 | */
4 | @import '../variables/index.scss';
5 |
6 | .at-menu {
7 | position: relative;
8 | display: block;
9 | margin: 0;
10 | padding: 0;
11 | color: $menu-text-color;
12 | font-size: $menu-font-size;
13 | list-style: none;
14 | background-color: $menu-bg-color-light;
15 |
16 | /* element */
17 | &__item {
18 | position: relative;
19 | display: block;
20 | list-style: none;
21 | transition: color .3s;
22 | cursor: pointer;
23 | z-index: 1;
24 |
25 | a {
26 | display: inline-block;
27 | width: 100%;
28 | height: 100%;
29 | color: $menu-text-color;
30 | }
31 | i {
32 | margin-right: 8px;
33 | }
34 | .at-menu__item-link {
35 | padding: $menu-item-padding;
36 | width: 100%;
37 | }
38 |
39 | &--disabled {
40 | cursor: not-allowed;
41 |
42 | .at-menu__item-link {
43 | color: $menu-text-color-disabled;
44 | cursor: not-allowed;
45 | pointer-events: none;
46 |
47 | &::after {
48 | display: none;
49 | }
50 | }
51 | }
52 | }
53 | &__item-group {
54 | padding: 0;
55 | line-height: 1;
56 |
57 | &-title {
58 | @include ellipsis();
59 | width: 100%;
60 | padding: $menu-group-title-padding;
61 | color: $menu-group-title-text-color;
62 | font-size: $menu-group-title-font-size;
63 | line-height: 1;
64 | white-space: nowrap;
65 | overflow: hidden;
66 | transition: all .3s;
67 | cursor: initial;
68 | }
69 | &-list {
70 | padding: 0;
71 | }
72 | }
73 | &__submenu {
74 | &--disabled {
75 | color: $menu-text-color-disabled;
76 | cursor: not-allowed;
77 | }
78 | }
79 | &__submenu-title {
80 | position: relative;
81 | cursor: pointer;
82 |
83 | i {
84 | margin-right: 8px;
85 | }
86 | }
87 | .at-dropdown__popover {
88 | width: 100%;
89 | }
90 | .at-dropdown-menu {
91 | max-height: none;
92 |
93 | .at-menu__item {
94 | @include ellipsis();
95 | display: block;
96 | font-size: $menu-dropdown-item-font-size;
97 | line-height: 1.5;
98 | white-space: nowrap;
99 | transition: all .3s;
100 | cursor: pointer;
101 |
102 | &--disabled {
103 | cursor: not-allowed;
104 | }
105 | }
106 | }
107 |
108 | /* modifier */
109 | &--horizontal,
110 | &--vertical,
111 | &--inline {
112 | z-index: auto;
113 | }
114 |
115 | &--horizontal,
116 | &--vertical {
117 | .at-menu__item-group-list .at-menu__item {
118 | float: none;
119 |
120 | &.at-menu__item--active .at-menu__item-link,
121 | .at-menu__item-link.router-link-active {
122 | color: $menu-item-text-color-active;
123 | font-weight: bold;
124 | // background-color: $menu-item-bg-color-active;
125 |
126 | &::after {
127 | display: none;
128 | }
129 | }
130 | }
131 | }
132 |
133 | /* Horizontal */
134 | &--horizontal {
135 | position: relative;
136 | height: $menu-height-horizontal;
137 | line-height: $menu-height-horizontal;
138 | border-bottom: 1px solid $menu-border-color;
139 |
140 | .at-menu__item,
141 | .at-menu__submenu {
142 | position: relative;
143 | float: left;
144 | }
145 | .at-menu__item {
146 | &.at-menu__item--active {
147 | .at-menu__item-link {
148 | color: $menu-item-text-color-active;
149 |
150 | a {
151 | color: $menu-item-text-color-active;
152 | }
153 | &::after {
154 | transform: scaleX(1);
155 | }
156 | }
157 | }
158 | &--disabled {
159 | .at-menu__item-link {
160 | color: $menu-text-color-disabled;
161 |
162 | &:hover {
163 | color: $menu-text-color-disabled;
164 | }
165 | }
166 | }
167 | }
168 | .at-menu__item-link {
169 | display: inline-block;
170 | padding: $menu-item-padding-base;
171 |
172 | &::after {
173 | content: '';
174 | position: absolute;
175 | display: inline-block;
176 | width: 100%;
177 | height: 2px;
178 | left: 0;
179 | bottom: 0;
180 | background-color: $menu-item-text-color-active;
181 | transform: scaleX(0);
182 | transition: all .15s;
183 | }
184 | &:hover,
185 | &.router-link-active {
186 | color: $menu-item-text-color-active;
187 |
188 | &::after {
189 | transform: scaleX(1);
190 | }
191 | }
192 | }
193 | > .at-menu__submenu {
194 | &:hover,
195 | &.at-menu__submenu--active {
196 | > .at-menu__submenu-title {
197 | color: $menu-item-text-color-active;
198 | }
199 | &::after {
200 | transform: scaleX(1);
201 | }
202 | }
203 | }
204 | .at-menu__submenu {
205 | &::after {
206 | content: '';
207 | position: absolute;
208 | display: inline-block;
209 | width: 100%;
210 | height: 2px;
211 | left: 0;
212 | bottom: 0;
213 | background-color: $menu-item-text-color-active;
214 | transform: scaleX(0);
215 | transition: all .15s;
216 | }
217 | .at-menu__submenu-title {
218 | padding: $menu-item-padding-base;
219 | }
220 | .at-menu__item {
221 | display: block;
222 | float: none;
223 |
224 | .at-menu__item-link {
225 | padding: $menu-submenu-padding;
226 | padding-left: 16px;
227 |
228 | &::after {
229 | display: none;
230 | }
231 | }
232 | }
233 | .at-menu__submenu {
234 | display: block;
235 | float: none;
236 | height: inherit;
237 | font-size: $menu-dropdown-item-font-size;
238 | line-height: 1.5;
239 |
240 | .at-menu__submenu-title {
241 | padding: $menu-submenu-padding;
242 | padding-right: 16px;
243 |
244 | i:last-child {
245 | position: absolute;
246 | right: 0;
247 | top: 50%;
248 | margin-top: -6px;
249 | transform: rotate(-90deg);
250 | }
251 | }
252 | &.at-menu__submenu--active {
253 | &::after {
254 | transform: scaleX(0);
255 | }
256 | }
257 | }
258 |
259 | &:hover,
260 | &.at-menu__submenu--active {
261 | > .at-menu__submenu-title {
262 | color: $menu-item-text-color-active;
263 | }
264 | }
265 | &--disabled {
266 | &:hover,
267 | &.at-menu__submenu--active {
268 | .at-menu__submenu-title {
269 | color: $menu-text-color-disabled;
270 | cursor: not-allowed;
271 | }
272 | &::after {
273 | transform: scaleX(0);
274 | }
275 | }
276 | }
277 | }
278 | }
279 |
280 | /* Vertical */
281 | &--vertical {
282 | position: relative;
283 | border-right: 1px solid $menu-border-color;
284 |
285 | .at-menu__item,
286 | .at-menu__submenu {
287 | position: relative;
288 | display: block;
289 | }
290 | > .at-menu__item.at-menu__item--active {
291 | > .at-menu__item-link {
292 | background-color: $menu-item-bg-color-active-inline;
293 |
294 | &::after {
295 | opacity: 1;
296 | }
297 | }
298 | }
299 | > .at-menu__submenu {
300 | &:hover {
301 | &::after {
302 | opacity: 1;
303 | }
304 | > .at-menu__submenu-title {
305 | color: $menu-item-text-color-active;
306 | }
307 | }
308 | &.at-menu__submenu--active {
309 | background-color: $menu-item-bg-color-active-inline;
310 |
311 | &::after {
312 | opacity: 1;
313 | }
314 | }
315 | }
316 | > .at-menu__item {
317 | > .at-menu__item-link {
318 | &:hover {
319 | color: $menu-item-text-color-active;
320 |
321 | &::after {
322 | opacity: 1;
323 | }
324 | }
325 | }
326 | }
327 | .at-menu__item {
328 | &.at-menu__item--active {
329 | .at-menu__item-link {
330 | color: $menu-item-text-color-active;
331 |
332 | a {
333 | color: $menu-item-text-color-active;
334 | }
335 | }
336 | }
337 | &--disabled {
338 | &:hover {
339 | color: $menu-text-color-disabled;
340 |
341 | a {
342 | color: $menu-text-color-disabled;
343 | }
344 | }
345 | .at-menu__item-link.router-link-active {
346 | color: $menu-item-text-color-active;
347 |
348 | &:hover {
349 | color: $menu-item-text-color-active;
350 | }
351 | }
352 | }
353 | }
354 | .at-menu__item-link {
355 | padding: $menu-submenu-padding;
356 | padding-left: 32px;
357 |
358 | &::after {
359 | content: '';
360 | display: inline-block;
361 | position: absolute;
362 | top: 0;
363 | left: 0;
364 | width: 6px;
365 | height: 100%;
366 | background-color: $menu-prefix-bg-color;
367 | border-top-right-radius: 4px;
368 | border-bottom-right-radius: 4px;
369 | box-shadow: 1px 0 12px 0 $menu-prefix-bg-color;
370 | transition: opacity .2s;
371 | opacity: 0;
372 | }
373 | &:hover {
374 | color: $menu-item-text-color-active;
375 | }
376 | &.router-link-active {
377 | color: $menu-item-text-color-active;
378 | background-color: $menu-item-bg-color-active-inline;
379 |
380 | &::after {
381 | opacity: 1;
382 | }
383 | }
384 | }
385 | .at-menu__submenu {
386 | font-size: $menu-font-size;
387 |
388 | &::after {
389 | content: '';
390 | display: inline-block;
391 | position: absolute;
392 | top: 0;
393 | left: 0;
394 | width: 6px;
395 | height: 100%;
396 | background-color: $menu-prefix-bg-color;
397 | border-top-right-radius: 4px;
398 | border-bottom-right-radius: 4px;
399 | box-shadow: 1px 0 12px 0 $menu-prefix-bg-color;
400 | transition: opacity .2s;
401 | opacity: 0;
402 | }
403 | .at-menu__submenu-title {
404 | padding: $menu-submenu-padding;
405 | padding-left: 32px;
406 |
407 | i:last-child {
408 | position: absolute;
409 | right: 0;
410 | top: 50%;
411 | margin-top: -$menu-icon-size / 2;
412 | transform: rotate(-90deg);
413 | }
414 | }
415 | .at-menu__submenu {
416 | font-size: $menu-dropdown-item-font-size;
417 |
418 | .at-menu__submenu-title {
419 | padding-left: 24px;
420 | }
421 | }
422 | .at-menu__item-link {
423 | padding-left: 24px;
424 | }
425 |
426 | &:hover,
427 | &.at-menu__submenu--active {
428 | > .at-menu__submenu-title {
429 | color: $menu-item-text-color-active;
430 | }
431 | }
432 | &.at-menu__submenu--disabled {
433 | &:hover,
434 | &.at-menu__submenu--active {
435 | > .at-menu__submenu-title {
436 | color: $menu-text-color-disabled;
437 | cursor: not-allowed;
438 | }
439 | }
440 | }
441 | }
442 | .at-menu__item-group-title {
443 | padding-left: 16px;
444 | font-weight: bold;
445 | }
446 | }
447 |
448 | /* Inline */
449 | &--inline {
450 | position: relative;
451 | border-right: 1px solid $menu-border-color;
452 |
453 | .at-menu__item,
454 | .at-menu__submenu {
455 | position: relative;
456 | display: block;
457 | padding-left: 0;
458 | transition: all .3s, color 0s;
459 | }
460 | .at-menu__item {
461 | &:hover {
462 | color: $menu-item-text-color-active;
463 |
464 | > .at-menu__item-link {
465 | color: $menu-item-text-color-active;
466 | }
467 | }
468 | &.at-menu__item--active {
469 | .at-menu__item-link {
470 | color: $menu-item-text-color-active;
471 | background-color: $menu-item-bg-color-active-inline;
472 |
473 | &::after {
474 | opacity: 1;
475 | }
476 | }
477 | }
478 | &--disabled {
479 | &.at-menu__item--active {
480 | .at-menu__item-link {
481 | color: $menu-text-color-disabled;
482 | background-color: transparent;
483 |
484 | &::after {
485 | opacity: 0;
486 | }
487 | }
488 | }
489 | }
490 | }
491 | .at-menu__submenu {
492 | font-size: $menu-font-size;
493 |
494 | &.at-menu__submenu--active {
495 | > .at-menu__submenu-title {
496 | color: $menu-item-text-color-active;
497 | }
498 | }
499 | &.at-menu__submenu--disabled {
500 | &:hover,
501 | &.at-menu__submenu--active {
502 | > .at-menu__submenu-title {
503 | color: $menu-text-color-disabled;
504 | cursor: not-allowed;
505 | }
506 | }
507 | }
508 | &.at-menu__submenu--opened {
509 | .at-menu__submenu-title {
510 | font-weight: bold;
511 |
512 | }
513 | .at-menu__submenu-icon {
514 | transform: rotate(-180deg);
515 | }
516 | }
517 |
518 | > .at-menu__submenu-title {
519 | &:hover {
520 | color: $menu-item-text-color-active;
521 | }
522 | }
523 | .at-menu__submenu-title {
524 | padding: $menu-item-padding-inline;
525 | padding-left: 32px;
526 |
527 | i:last-child {
528 | position: absolute;
529 | right: 0;
530 | top: 50%;
531 | margin-top: -$menu-icon-size / 2;
532 | }
533 | }
534 | .at-menu__submenu-icon {
535 | color: $menu-icon-color-inline;
536 | transition: transform .3s;
537 | }
538 | .at-menu__submenu {
539 | font-size: $menu-font-size;
540 | }
541 | .at-menu__item-link {
542 | padding-left: 48px;
543 | }
544 | }
545 | .at-menu__item-link {
546 | padding: $menu-item-padding-inline;
547 | padding-left: 32px;
548 | transition: all .3s;
549 |
550 | &::after {
551 | content: '';
552 | display: inline-block;
553 | position: absolute;
554 | top: 0;
555 | left: 0;
556 | width: 6px;
557 | height: 100%;
558 | background-color: $menu-prefix-bg-color;
559 | border-top-right-radius: 4px;
560 | border-bottom-right-radius: 4px;
561 | box-shadow: 1px 0 12px 0 $menu-prefix-bg-color;
562 | transition: opacity .2s;
563 | opacity: 0;
564 | }
565 | &.router-link-active {
566 | color: $menu-item-text-color-active;
567 | background-color: $menu-item-bg-color-active-inline;
568 |
569 | &::after {
570 | opacity: 1;
571 | }
572 | }
573 | }
574 | .at-menu {
575 | margin: 8px 0;
576 | }
577 | .at-menu__item-group-title {
578 | padding-left: 40px;
579 | font-weight: bold;
580 | }
581 | }
582 |
583 | /* theme */
584 | &--dark {
585 | color: $menu-text-color-dark;
586 | background-color: $menu-bg-color-dark;
587 |
588 | .at-menu {
589 | color: $menu-text-color-dark;
590 | background-color: $menu-bg-color-dark;
591 | }
592 | .at-menu__item {
593 | a {
594 | color: $menu-text-color-dark;
595 | }
596 | .at-menu__item-link {
597 | &::after {
598 | width: 4px;
599 | border-radius: 0;
600 | background-color: $menu-prefix-bg-color-dark;
601 | box-shadow: none;
602 | }
603 | }
604 |
605 | &:hover,
606 | &.at-menu__item--active {
607 | .at-menu__item-link {
608 | color: $menu-text-color-dark-hover;
609 | background-color: $menu-bg-color-dark-hover;
610 |
611 | a {
612 | color: $menu-text-color-dark-hover;
613 | }
614 | }
615 | }
616 | &--disabled {
617 | opacity: 0.5;
618 |
619 | &:hover,
620 | &.at-menu__item--active {
621 | .at-menu__item-link {
622 | color: $menu-text-color-disabled;
623 | background-color: transparent;
624 | }
625 | }
626 | }
627 | }
628 | .at-menu__submenu {
629 | &:hover,
630 | &.at-menu__submenu--active {
631 | .at-menu__submenu-title {
632 | color: $menu-text-color-dark-hover;
633 | font-weight: bold;
634 | }
635 | }
636 | &.at-menu__submenu--disabled {
637 | .at-menu__submenu-title {
638 | opacity: .5;
639 | font-weight: normal;
640 | cursor: not-allowed;
641 | }
642 | }
643 | }
644 |
645 | &.at-menu--horizontal {
646 | border: none;
647 |
648 | .at-menu__item,
649 | .at-menu__submenu {
650 | &:hover,
651 | &.at-menu__item--active,
652 | &.at-menu__submenu--active {
653 | &::after {
654 | width: 100%;
655 | height: 4px;
656 | }
657 | }
658 | }
659 | .at-menu__submenu {
660 | &.at-menu__submenu--disabled {
661 | &:hover,
662 | &.at-menu__item--active {
663 | .at-menu__submenu-title {
664 | color: $menu-text-color-disabled;
665 | }
666 | }
667 | }
668 | .at-menu__item {
669 | color: $menu-text-color;
670 |
671 | &:hover,
672 | &.at-menu__item--active {
673 | .at-menu__item-link {
674 | color: $menu-item-text-color-active;
675 | background-color: transparent;
676 |
677 | a {
678 | color: $menu-item-text-color-active;
679 | }
680 | }
681 | }
682 | a {
683 | color: $menu-text-color;
684 | }
685 | }
686 | }
687 | }
688 | &.at-menu--vertical {
689 | .at-menu__submenu {
690 | &.at-menu__submenu--active {
691 | background-color: transparent;
692 |
693 | &::after {
694 | content: '';
695 | width: 4px;
696 | border-radius: 0;
697 | background-color: $menu-prefix-bg-color-dark;
698 | box-shadow: none;
699 | opacity: 1;
700 | }
701 | }
702 | .at-menu__item {
703 | color: $menu-text-color;
704 |
705 | &:hover,
706 | &.at-menu__item--active {
707 | .at-menu__item-link {
708 | color: $menu-item-text-color-active;
709 | background-color: transparent;
710 |
711 | a {
712 | color: $menu-item-text-color-active;
713 | }
714 | }
715 | }
716 | &.at-menu__item--disabled {
717 | .at-menu__item-link {
718 | color: $menu-text-color-disabled;
719 | }
720 | }
721 | a {
722 | color: $menu-text-color;
723 | }
724 | }
725 | }
726 | }
727 | }
728 | }
729 |
--------------------------------------------------------------------------------
/src/components/message.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Message Style
3 | */
4 | @import '../variables/index.scss';
5 |
6 | .at-message {
7 | display: inline-block;
8 | padding: $message-padding;
9 | font-size: $message-font-size;
10 | line-height: 1.5;
11 | border-radius: $border-radius-base;
12 | background-color: $message-bg-color;
13 | box-shadow: $message-box-shadow;
14 | z-index: $zindex-message;
15 |
16 | /* element */
17 | &__wrapper {
18 | position: fixed;
19 | left: 0;
20 | top: 16px;
21 | width: 100%;
22 | text-align: center;
23 | transition: opacity .3s, transform .3s, top .4s;
24 | pointer-events: none;
25 | }
26 | &__icon {
27 | display: inline-block;
28 | margin-right: 4px;
29 | vertical-align: middle;
30 | }
31 |
32 | /* modifier */
33 | &--success .at-message__icon {
34 | color: $message-icon-color-success;
35 | }
36 | &--error .at-message__icon {
37 | color: $message-icon-color-error;
38 | }
39 | &--warning .at-message__icon {
40 | color: $message-icon-color-warning;
41 | }
42 | &--info .at-message__icon {
43 | color: $message-icon-color-info;
44 | }
45 | &--loading .at-message__icon {
46 | color: $message-icon-color-loading;
47 | animation: icon-loading 2s linear infinite both;
48 | }
49 | }
50 |
--------------------------------------------------------------------------------
/src/components/modal.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Modal Style
3 | */
4 | @import '../variables/index.scss';
5 |
6 | .at-modal {
7 | position: relative;
8 | top: $modal-initial-top;
9 | width: auto;
10 | margin: 0 auto;
11 | border: none;
12 | border-radius: $border-radius-base;
13 | background-color: $modal-bg-color;
14 | outline: none;
15 |
16 | /* elements */
17 | &__mask {
18 | position: fixed;
19 | left: 0;
20 | right: 0;
21 | top: 0;
22 | bottom: 0;
23 | height: 100%;
24 | background-color: $modal-mask-bg-color;
25 | z-index: $zindex-modal;
26 |
27 | &--hidden {
28 | display: none;
29 | }
30 | }
31 | &__wrapper {
32 | position: fixed;
33 | left: 0;
34 | right: 0;
35 | top: 0;
36 | bottom: 0;
37 | outline: 0;
38 | z-index: $zindex-modal;
39 | }
40 | &__header {
41 | padding: $modal-header-padding;
42 | color: $title-color;
43 | font-size: $modal-header-font-size;
44 | font-weight: bold;
45 | line-height: 1.5;
46 | border-bottom: 1px solid $modal-section-border-color;
47 |
48 | p, .at-modal__title {
49 | @include ellipsis();
50 | vertical-align: middle;
51 | }
52 | }
53 | &__close {
54 | position: absolute;
55 | top: 16px;
56 | right: 16px;
57 | font-size: $modal-close-font-size;
58 | line-height: 1;
59 | overflow: hidden;
60 | cursor: pointer;
61 | }
62 | &__body {
63 | padding: $modal-body-padding;
64 | font-size: $modal-body-font-size;
65 | line-height: 1.5;
66 |
67 | p {
68 | font-size: $modal-body-font-size;
69 | }
70 | }
71 | &__icon {
72 | position: absolute;
73 | top: 16px;
74 | left: 16px;
75 | font-size: $modal-icon-font-size;
76 | vertical-align: middle;
77 | }
78 | &__input {
79 | .at-input__original {
80 | margin-top: 8px;
81 | width: 100%;
82 | }
83 | }
84 | &__footer {
85 | padding: $modal-footer-padding;
86 | border-top: 1px solid $modal-section-border-color;
87 | text-align: right;
88 |
89 | .at-btn + .at-btn {
90 | margin-left: 8px;
91 | }
92 | }
93 |
94 | /* modifiers */
95 | &--hidden {
96 | display: none !important;
97 | }
98 | &--confirm {
99 | .at-modal__header {
100 | padding: 16px 16px 4px 56px;
101 | border: none;
102 | }
103 | .at-modal__body {
104 | padding: 8px 16px 8px 56px;
105 | }
106 | .at-modal__footer {
107 | padding: 16px;
108 | border: none;
109 | }
110 |
111 | &-success {
112 | .at-modal__icon {
113 | color: $modal-icon-color-success;
114 | }
115 | }
116 | &-error {
117 | .at-modal__icon {
118 | color: $modal-icon-color-error;
119 | }
120 | }
121 | &-warning {
122 | .at-modal__icon {
123 | color: $modal-icon-color-warning;
124 | }
125 | }
126 | &-info {
127 | .at-modal__icon {
128 | color: $modal-icon-color-info;
129 | }
130 | }
131 | }
132 | }
133 |
--------------------------------------------------------------------------------
/src/components/notification.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Notification Style
3 | */
4 | @import '../variables/index.scss';
5 |
6 | .at-notification {
7 | position: fixed;
8 | display: flex;
9 | right: 16px;
10 | width: $notification-width;
11 | padding: $notification-padding;
12 | color: $notification-text-color;
13 | background-color: $notification-bg-color;
14 | line-height: 1.5;
15 | border-radius: $border-radius-base;
16 | box-shadow: $notification-shadow;
17 | transition: opacity .3s, transform .3s, top .4s;
18 | z-index: $zindex-notification;
19 |
20 | /* element */
21 | &__icon {
22 | color: $notification-icon-color;
23 | font-size: $notification-icon-font-size;
24 | line-height: 1.5;
25 | vertical-align: middle;
26 | margin-right: 8px;
27 | }
28 | &__content {
29 | flex: 1;
30 | padding-right: 8px;
31 | }
32 | &__title {
33 | color: $notification-text-color;
34 | font-size: $notification-title-font-size;
35 | }
36 | &__message {
37 | color: $notification-text-color;
38 | font-size: $notification-message-font-size;
39 | margin-top: 4px;
40 | }
41 | &__close {
42 | color: $notification-close-color;
43 | font-size: $notification-close-font-size;
44 | cursor: pointer;
45 |
46 | &:hover {
47 | color: $notification-close-color-focus;
48 | }
49 | }
50 |
51 | /* modifier */
52 | &--success {
53 | .at-notification__icon {
54 | color: $notification-icon-color-success;
55 | }
56 | }
57 | &--error {
58 | .at-notification__icon {
59 | color: $notification-icon-color-error;
60 | }
61 | }
62 | &--warning {
63 | .at-notification__icon {
64 | color: $notification-icon-color-warning;
65 | }
66 | }
67 | &--info {
68 | .at-notification__icon {
69 | color: $notification-icon-color-info;
70 | }
71 | }
72 | &--with-message {
73 | padding: $notification-padding-lg;
74 |
75 | .at-notification__icon {
76 | font-size: 24px;
77 | line-height: 1.2;
78 | }
79 | .at-notification__title {
80 | font-weight: bold;
81 | }
82 | .at-notification__close {
83 | font-size: $notification-close-font-size-lg;
84 | }
85 | }
86 | &--hover {
87 | cursor: pointer;
88 |
89 | &:hover {
90 | opacity: 1;
91 | }
92 | }
93 | }
94 |
--------------------------------------------------------------------------------
/src/components/pagination.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Pagination Style
3 | */
4 | @import '../variables/index.scss';
5 | @import '../mixins/index.scss';
6 |
7 | .at-pagination {
8 | @include clearfix();
9 | list-style: none;
10 | font-size: 0;
11 |
12 | /* elements */
13 | &__item,
14 | &__prev,
15 | &__next,
16 | &__item--jump-prev,
17 | &__item--jump-next {
18 | float: left;
19 | min-width: $pagination-item-size;
20 | height: $pagination-item-size;
21 | color: $pagination-item-text-color;
22 | font-size: $pagination-item-font-size;
23 | line-height: $pagination-item-size;
24 | text-align: center;
25 | border: 1px solid $pagination-item-border-color;
26 | border-radius: $border-radius-base;
27 | background-color: $color-white;
28 | transition: all .3s;
29 | cursor: pointer;
30 |
31 | &:hover {
32 | color: $pagination-item-text-color-hover;
33 | border-color: $pagination-item-border-color-hover;
34 | }
35 | }
36 | &__item {
37 | + .at-pagination__item {
38 | margin-left: 4px;
39 | }
40 | &--active {
41 | color: $pagination-item-text-color-active;
42 | border-color: $pagination-item-border-color-active;
43 | background-color: $pagination-item-bg-color-active;
44 |
45 | &:hover {
46 | color: $pagination-item-text-color-active;
47 | }
48 | }
49 | }
50 | &__prev {
51 | margin-right: 8px;
52 | }
53 | &__next {
54 | margin-left: 8px;
55 | }
56 | &__item--jump-prev,
57 | &__item--jump-next {
58 | &:after {
59 | content: '•••';
60 | display: inline-block;
61 | color: $pagination-btn-jump-text-color;
62 | font-size: $pagination-item-font-size - 4;
63 | text-align: center;
64 | line-height: $pagination-item-size;
65 | letter-spacing: 1px;
66 | }
67 | i {
68 | display: none;
69 | }
70 | &:hover {
71 | &:after {
72 | display: none;
73 | }
74 | i {
75 | display: inline-block;
76 | }
77 | }
78 | }
79 | &__total {
80 | float: left;
81 | height: $pagination-item-size;
82 | font-size: $pagination-item-font-size;
83 | line-height: $pagination-item-size;
84 | margin-right: 12px;
85 | }
86 | &__quickjump {
87 | float: left;
88 | margin-left: 12px;
89 | font-size: $pagination-item-font-size;
90 | line-height: $pagination-item-size;
91 |
92 | input {
93 | display: inline-block;
94 | margin: 0 8px;
95 | width: $pagination-input-width;
96 | height: $pagination-item-size;
97 | text-align: center;
98 | line-height: $pagination-item-size;
99 | }
100 | }
101 | &__sizer {
102 | float: left;
103 | margin-left: 12px;
104 | text-align: center;
105 | }
106 | &__simple-paging {
107 | float: left;
108 | font-size: $pagination-item-font-size;
109 |
110 | input {
111 | display: inline-block;
112 | padding: 2px 4px;
113 | width: $pagination-item-size;
114 | height: $pagination-item-size;
115 | text-align: center;
116 | line-height: $pagination-item-size;
117 | }
118 | span {
119 | padding: 0 4px;
120 | }
121 | }
122 |
123 | /* modifiers */
124 | &--disabled {
125 | color: $btn-disabled-border;
126 | border-color: $btn-disabled-border;
127 | cursor: $cursor-disabled;
128 |
129 | &:hover {
130 | color: $btn-disabled-border;
131 | border-color: $btn-disabled-border;
132 | }
133 | }
134 | &--small {
135 | .at-pagination__total,
136 | .at-pagination__quickjump,
137 | .at-pagination__item,
138 | .at-pagination__prev,
139 | .at-pagination__next {
140 | height: $pagination-item-size-sm;
141 | font-size: $pagination-item-font-size-sm;
142 | line-height: $pagination-item-size-sm;
143 | }
144 | .at-pagination__item,
145 | .at-pagination__prev,
146 | .at-pagination__next {
147 | border: none;
148 | width: $pagination-item-size-sm;
149 | min-width: $pagination-item-size-sm;
150 | }
151 | .at-pagination__item--jump-prev,
152 | .at-pagination__item--jump-next {
153 | &:after {
154 | font-size: $pagination-item-font-size-sm - 4;
155 | line-height: $pagination-item-size-sm;
156 | }
157 | }
158 | .at-pagination__total {
159 | margin-right: 8px;
160 | }
161 | .at-pagination__sizer {
162 | margin-left: 8px;
163 |
164 | .at-select .at-select__selection {
165 | height: $pagination-item-size-sm;
166 | line-height: $pagination-item-size-sm - 2;
167 | }
168 | }
169 | .at-pagination__quickjump {
170 | margin-left: 8px;
171 |
172 | .at-input__original {
173 | margin: 0 6px;
174 | height: $pagination-item-size-sm;
175 | font-size: $pagination-item-font-size-sm;
176 | }
177 | }
178 | }
179 | &--simple {
180 | font-size: $pagination-item-font-size;
181 |
182 | .at-input__original {
183 | margin: 0 4px;
184 | width: $pagination-item-size + 4;
185 | height: $pagination-item-size;
186 | }
187 | .at-pagination__prev,
188 | .at-pagination__next {
189 | margin: 0;
190 | border: none;
191 | width: $pagination-item-size;
192 | min-width: $pagination-item-size;
193 | height: $pagination-item-size;
194 | line-height: $pagination-item-size;
195 | }
196 | &.at-pagination--small {
197 | font-size: $pagination-item-font-size-sm;
198 |
199 | .at-input__original {
200 | width: $pagination-item-size-sm + 6;
201 | height: $pagination-item-size-sm;
202 |
203 | input {
204 | font-size: $pagination-item-font-size-sm;
205 | }
206 | }
207 | .at-pagination__prev,
208 | .at-pagination__next {
209 | width: $pagination-item-size-sm;
210 | min-width: $pagination-item-size-sm;
211 | height: $pagination-item-size-sm;
212 | line-height: $pagination-item-size-sm;
213 | }
214 | .at-pagination__simple-paging {
215 | font-size: $pagination-item-font-size-sm;
216 |
217 | span {
218 | padding: 0 4px;
219 | }
220 | }
221 | }
222 | }
223 | }
224 |
--------------------------------------------------------------------------------
/src/components/popover.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Popover
3 | */
4 | @import '../variables/index.scss';
5 |
6 | .at-popover {
7 | display: inline-block;
8 |
9 | /* element */
10 | &__trigger {
11 | display: inline-block;
12 | position: relative;
13 | }
14 | &__popper {
15 | position: absolute;
16 | max-width: $popover-popper-max-width;
17 | border: 1px solid $popover-border-color;
18 | box-shadow: 0 1px 6px $popover-border-color;
19 | background-color: $color-white;
20 | z-index: $zindex-popover;
21 | }
22 | &__title {
23 | margin: 0;
24 | padding: $popover-title-padding;
25 | font-size: $popover-title-font-size;
26 | word-wrap: break-word;
27 | border-bottom: 1px solid $popover-title-border-color;
28 | border-radius: $border-radius-base $border-radius-base 0 0;
29 | background-color: $popover-title-bg-color;
30 | }
31 | &__content {
32 | padding: $popover-content-padding;
33 | font-size: $popover-content-font-size;
34 | line-height: 1.5;
35 | word-wrap: break-word;
36 | border-radius: $border-radius-base;
37 | }
38 | &__arrow,
39 | &__arrow::after {
40 | content: '';
41 | position: absolute;
42 | display: block;
43 | width: 0;
44 | height: 0;
45 | border: $popover-arrow-size solid transparent;
46 | }
47 |
48 | /* modifier */
49 | /**
50 | * Top
51 | */
52 | &--top,
53 | &--top-left,
54 | &--top-right {
55 | margin-top: -12px;
56 |
57 | .at-popover__arrow {
58 | bottom: 0;
59 | left: 50%;
60 | margin-left: -$popover-arrow-size;
61 | margin-bottom: -$popover-arrow-size;
62 | border-bottom-width: 0;
63 | border-top-color: $popover-border-color;
64 |
65 | &::after {
66 | bottom: 1px;
67 | margin-left: -$popover-arrow-size;
68 | border-bottom-width: 0;
69 | border-top-color: $popover-arrow-bg-color;
70 | }
71 | }
72 | }
73 | &--top-left {
74 | .at-popover__arrow {
75 | left: $popover-arrow-size * 2;
76 | }
77 | }
78 | &--top-right {
79 | .at-popover__arrow {
80 | left: initial;
81 | right: $popover-arrow-size * 2;
82 | }
83 | }
84 |
85 | /**
86 | * Bottom
87 | */
88 | &--bottom,
89 | &--bottom-left,
90 | &--bottom-right {
91 | margin-top: 12px;
92 |
93 | .at-popover__arrow {
94 | top: 0;
95 | left: 50%;
96 | margin-left: -$popover-arrow-size;
97 | margin-top: -$popover-arrow-size;
98 | border-top-width: 0;
99 | border-bottom-color: $popover-border-color;
100 |
101 | &::after {
102 | top: 1px;
103 | margin-left: -$popover-arrow-size;
104 | border-top-width: 0;
105 | border-bottom-color: $popover-arrow-bg-color;
106 | }
107 | }
108 | }
109 | &--bottom-left {
110 | .at-popover__arrow {
111 | left: $popover-arrow-size * 2;
112 | }
113 | }
114 | &--bottom-right {
115 | .at-popover__arrow {
116 | left: initial;
117 | right: $popover-arrow-size * 2;
118 | }
119 | }
120 |
121 | /**
122 | * Left
123 | */
124 | &--left,
125 | &--left-top,
126 | &--left-bottom {
127 | margin-left: -12px;
128 |
129 | .at-popover__arrow {
130 | top: 50%;
131 | right: 0;
132 | margin-top: -$popover-arrow-size;
133 | margin-right: -$popover-arrow-size;
134 | border-right-width: 0;
135 | border-left-color: $popover-border-color;
136 |
137 | &::after {
138 | right: 1px;
139 | margin-top: -$popover-arrow-size;
140 | border-right-width: 0;
141 | border-left-color: $popover-arrow-bg-color;
142 | }
143 | }
144 | }
145 | &--left-top {
146 | .at-popover__arrow {
147 | top: $popover-arrow-size * 2;
148 | }
149 | }
150 | &--left-bottom {
151 | .at-popover__arrow {
152 | top: initial;
153 | bottom: $popover-arrow-size * 2;
154 | }
155 | }
156 |
157 | /**
158 | * Right
159 | */
160 | &--right,
161 | &--right-top,
162 | &--right-bottom {
163 | margin-left: 12px;
164 |
165 | .at-popover__arrow {
166 | top: 50%;
167 | left: 0;
168 | margin-top: -$popover-arrow-size;
169 | margin-left: -$popover-arrow-size;
170 | border-left-width: 0;
171 | border-right-color: $popover-border-color;
172 |
173 | &::after {
174 | left: 1px;
175 | margin-top: -$popover-arrow-size;
176 | border-left-width: 0;
177 | border-right-color: $popover-arrow-bg-color;
178 | }
179 | }
180 | }
181 | &--right-top {
182 | .at-popover__arrow {
183 | top: $popover-arrow-size * 2;
184 | }
185 | }
186 | &--right-bottom {
187 | .at-popover__arrow {
188 | top: initial;
189 | bottom: $popover-arrow-size * 2;
190 | }
191 | }
192 | }
193 |
--------------------------------------------------------------------------------
/src/components/progress.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Progress Style
3 | */
4 | @import '../variables/index.scss';
5 |
6 | .at-progress {
7 | position: relative;
8 | line-height: 1;
9 |
10 | /* element */
11 | &-bar {
12 | display: inline-block;
13 | width: 100%;
14 | vertical-align: middle;
15 | margin-right: -55px;
16 | padding-right: 50px;
17 |
18 | &__wraper {
19 | position: relative;
20 | height: $progress-height;
21 | background-color: $progress-track-bg-color;
22 | overflow: hidden;
23 | vertical-align: middle;
24 | border-radius: $progress-border-radius;
25 | }
26 | &__inner {
27 | position: absolute;
28 | left: 0;
29 | top: 0;
30 | width: 0;
31 | height: 100%;
32 | border-radius: $progress-border-radius;
33 | background-color: $progress-bar-bg-color;
34 | line-height: 1;
35 | text-align: right;
36 | transition: width .3s;
37 | }
38 | }
39 | &__text {
40 | display: inline-block;
41 | margin-left: 10px;
42 | color: $progress-font-color;
43 | font-size: $progress-font-size;
44 | line-height: 1;
45 | vertical-align: middle;
46 |
47 | i {
48 | display: inline-block;
49 | vertical-align: middle;
50 | line-height: 1;
51 | }
52 | }
53 |
54 | /* modifier */
55 | &--success {
56 | .at-progress-bar__inner {
57 | background-color: $progress-bar-bg-color-success;
58 | }
59 | .at-progress__text {
60 | color: $progress-bar-bg-color-success;
61 | }
62 | }
63 | &--error {
64 | .at-progress-bar__inner {
65 | background-color: $progress-bar-bg-color-error;
66 | }
67 | .at-progress__text {
68 | color: $progress-bar-bg-color-error;
69 | }
70 | }
71 | }
72 |
--------------------------------------------------------------------------------
/src/components/radio.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Radio Style
3 | */
4 | @import '../variables/index.scss';
5 |
6 | @mixin button-size($padding, $font-size) {
7 | padding: $padding;
8 | font-size: $font-size;
9 | }
10 |
11 | /**
12 | * AtRadio
13 | */
14 | .at-radio {
15 | position: relative;
16 | display: inline-block;
17 | color: $text-color;
18 | font-size: 0;
19 | white-space: nowrap;
20 | user-select: none;
21 | cursor: pointer;
22 |
23 | + .at-radio {
24 | margin-left: 16px;
25 | }
26 |
27 | /* modifier */
28 | &--checked {
29 | .at-radio-button__inner {
30 | color: $color-white;
31 | border-color: $color-primary;
32 | background-color: $color-primary;
33 | }
34 | }
35 |
36 | /* element */
37 | &__input {
38 | position: relative;
39 | display: inline-block;
40 | vertical-align: middle;
41 | cursor: pointer;
42 | }
43 | &__inner {
44 | position: relative;
45 | display: inline-block;
46 | width: $radio-size;
47 | height: $radio-size;
48 | border: 1px solid $border-color-base;
49 | border-radius: 50%;
50 | background-color: $color-white;
51 | transition: border .2s;
52 | cursor: pointer;
53 |
54 | &:not(.at-radio--disabled):hover {
55 | border-color: $radio-border-c-hover;
56 | }
57 | &::after {
58 | content: '';
59 | position: absolute;
60 | left: 50%;
61 | top: 50%;
62 | width: $radio-dot-size;
63 | height: $radio-dot-size;
64 | border-radius: 50%;
65 | background-color: $radio-border-c-hover;
66 | transform: translate(-50%, -50%) scale(0);
67 | transition: transform .2s;
68 | }
69 | &.at-radio--checked {
70 | border-color: $radio-border-c-checked;
71 |
72 | &::after {
73 | transform: translate(-50%, -50%) scale(1);
74 | }
75 | }
76 | &.at-radio--disabled {
77 | border-color: $radio-border-c-disabled;
78 | background-color: $radio-bg-c-disabled;
79 | cursor: $cursor-disabled;
80 |
81 | &.at-radio--checked::after {
82 | background-color: $radio-dot-c-disabled;
83 | }
84 | }
85 | }
86 | &__original {
87 | position: absolute;
88 | top: 0;
89 | right: 0;
90 | bottom: 0;
91 | left: 0;
92 | margin: 0;
93 | opacity: 0;
94 | outline: none;
95 | z-index: -1;
96 | }
97 | &__label {
98 | font-size: $radio-font-size;
99 | padding-left: 8px;
100 | vertical-align: middle;
101 | }
102 | }
103 |
104 | /**
105 | * AtRadioButton
106 | */
107 | .at-radio-button {
108 | position: relative;
109 | display: inline-block;
110 | overflow: hidden;
111 |
112 | &:not(:last-child) {
113 | margin-right: -1px;
114 | border-collapse: separate;
115 | }
116 | &:first-child {
117 | .at-radio-button__inner {
118 | border-radius: $border-radius-base 0 0 $border-radius-base;
119 | }
120 | }
121 | &:last-child {
122 | .at-radio-button__inner {
123 | border-radius: 0 $border-radius-base $border-radius-base 0;
124 | }
125 | }
126 |
127 | /* modifier */
128 | &--small {
129 | .at-radio-button__inner {
130 | @include button-size($btn-padding-sm, $btn-font-size-sm);
131 | }
132 | }
133 | &--normal {
134 | .at-radio-button__inner {
135 | @include button-size($btn-padding-base, $btn-font-size-base);
136 | }
137 | }
138 | &--large {
139 | .at-radio-button__inner {
140 | @include button-size($btn-padding-md, $btn-font-size-md);
141 | }
142 | }
143 |
144 | /* element */
145 | &__inner {
146 | position: relative;
147 | display: inline-block;
148 | margin: 0;
149 | color: $text-color;
150 | white-space: nowrap;
151 | text-align: center;
152 | vertical-align: middle;
153 | line-height: 1.5;
154 | border: 1px solid $btn-default-border;
155 | background: $btn-default-bg;
156 | transition: all .2s;
157 | outline: none;
158 | user-select: none;
159 | cursor: pointer;
160 | @include button-size($btn-padding-base, $btn-font-size-base);
161 | }
162 | &__original {
163 | position: absolute;
164 | top: 0;
165 | bottom: 0;
166 | left: 0;
167 | right: 0;
168 | opacity: 0;
169 | outline: none;
170 | z-index: -1;
171 |
172 | &:disabled {
173 | & + .at-radio-button__inner {
174 | color: $btn-disabled-color;
175 | background-color: $btn-disabled-bg;
176 | border-color: $btn-default-border;
177 | cursor: $cursor-disabled;
178 | }
179 | }
180 | }
181 | }
182 |
183 | .at-radio-group {
184 | display: inline-block;
185 | font-size: 0;
186 | line-height: 1;
187 | border-collapse: separate;
188 | }
189 |
--------------------------------------------------------------------------------
/src/components/rate.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Rate Style
3 | */
4 | @import '../variables/index.scss';
5 |
6 | .at-rate {
7 | font-size: 0;
8 |
9 | /* element */
10 | &__list {
11 | display: inline-block;
12 | vertical-align: middle;
13 | cursor: pointer;
14 | }
15 | &__item {
16 | display: inline-block;
17 | margin-right: 8px;
18 | font-size: 0;
19 | vertical-align: top;
20 | transition: all .3s;
21 | cursor: pointer;
22 |
23 | &:last-of-type {
24 | margin-right: 0;
25 | }
26 | &:hover {
27 | transform: scale(1.1);
28 | }
29 |
30 | &--on {
31 | .at-rate__icon {
32 | color: $rate-icon-color-on;
33 | }
34 | }
35 | &--half {
36 | .at-rate__left {
37 | color: $rate-icon-color-on;
38 | }
39 | }
40 | }
41 | &__icon {
42 | position: relative;
43 | display: inline-block;
44 | color: $rate-icon-color;
45 | font-size: $rate-icon-font-size;
46 | vertical-align: top;
47 | transition: color .3s;
48 | }
49 | &__left {
50 | position: absolute;
51 | left: 0;
52 | top: 0;
53 | width: 50%;
54 | height: 100%;
55 | color: transparent;
56 | overflow: hidden;
57 | }
58 | &__text {
59 | display: inline-block;
60 | margin-left: 8px;
61 | font-size: $rate-text-font-size;
62 | vertical-align: middle;
63 | }
64 |
65 | /* modifier */
66 | &--disabled {
67 | &.at-rate__list {
68 | cursor: initial;
69 | }
70 | .at-rate__item {
71 | cursor: initial;
72 |
73 | &:hover {
74 | transform: none;
75 | }
76 | }
77 | }
78 | }
79 |
--------------------------------------------------------------------------------
/src/components/select.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Select Style
3 | */
4 | @import '../variables/index.scss';
5 | @import '../mixins/index.scss';
6 |
7 | /**
8 | * AtSelect
9 | */
10 | .at-select {
11 | position: relative;
12 | display: inline-block;
13 | width: 100%;
14 | min-width: 80px;
15 | color: $select-font-color;
16 | font-size: $select-font-size-base;
17 | line-height: 1.5;
18 | vertical-align: middle;
19 |
20 | .at-select__input {
21 | width: 100%;
22 | border: none;
23 | outline: none;
24 | position: absolute;
25 | left: 0;
26 | top: 0;
27 | margin: 0 24px 0 8px;
28 | background-color: transparent;
29 |
30 | &::placeholder {
31 | color: $input-placeholder-color;
32 | }
33 | &:disabled {
34 | cursor: $cursor-disabled;
35 | }
36 | }
37 |
38 | /* element */
39 | &__selection {
40 | position: relative;
41 | display: block;
42 | padding: $select-padding-base;
43 | outline: none;
44 | min-height: $select-selection-height-base;
45 | line-height: $select-selection-height-base;
46 | border: 1px solid $border-color-base;
47 | border-radius: $border-radius-base;
48 | background-color: $color-white;
49 | transition: all .3s;
50 | cursor: pointer;
51 | overflow: hidden;
52 |
53 | &:hover {
54 | border-color: $select-border-c-hover;
55 |
56 | .at-select__arrow {
57 | display: inline-block;
58 | }
59 | .at-select__clear {
60 | display: inline-block;
61 | }
62 | }
63 | }
64 | &__selected {
65 | @include ellipsis();
66 | display: block;
67 | }
68 | &__arrow {
69 | display: inline-block;
70 | position: absolute;
71 | top: 50%;
72 | right: 8px;
73 | margin-top: -5px;
74 | font-size: 10px;
75 | cursor: pointer;
76 | transition: transform .3s;
77 | }
78 | &__clear {
79 | display: none;
80 | position: absolute;
81 | top: 50%;
82 | right: 8px;
83 | margin-top: -5px;
84 | font-size: 10px;
85 | cursor: pointer;
86 | }
87 | &__placeholder {
88 | color: $input-placeholder-color;
89 | }
90 | &__dropdown {
91 | position: absolute;
92 | width: 100%;
93 | max-height: $select-dropdown-height;
94 | font-size: $select-dropdown-font-size-base;
95 | border-radius: $border-radius-base;
96 | background-color: $select-dropdown-bg-color;
97 | box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
98 | overflow-y: auto;
99 | z-index: $zindex-dropdown;
100 |
101 | .at-select__list {
102 | list-style: none;
103 | padding: 0;
104 | font-size: 0;
105 | }
106 | .at-select__not-found {
107 | padding: $dropdown-option-padding-base;
108 | }
109 | .at-select__option {
110 | @include ellipsis();
111 | width: 100%;
112 | padding: $dropdown-option-padding-base;
113 | font-size: $select-dropdown-font-size-base;
114 | line-height: 1.5;
115 | text-align: left;
116 | white-space: nowrap;
117 | transition: all .3s;
118 | overflow: hidden;
119 | cursor: pointer;
120 |
121 | &--selected {
122 | font-weight: bold;
123 | background-color: $dropdown-option-bg-c-selected;
124 | }
125 | &:hover,
126 | &--focus {
127 | background-color: $dropdown-option-bg-c-hover;
128 | }
129 | &--disabled {
130 | color: $input-placeholder-color-disabled;
131 | }
132 | }
133 | &--bottom {
134 | margin-top: 2px;
135 | }
136 | &--top {
137 | margin-bottom: 2px;
138 | }
139 | &--left {
140 | margin-right: 2px;
141 | }
142 | &--right {
143 | margin-left: 2px;
144 | }
145 | }
146 |
147 | /* modifier */
148 | &--visible {
149 | .at-select__arrow {
150 | transform: rotate(180deg);
151 | }
152 | }
153 | &--show-clear {
154 | .at-select__selection:hover {
155 | .at-select__arrow {
156 | opacity: 0;
157 | }
158 | }
159 | }
160 | &--disabled {
161 | .at-select__selection {
162 | cursor: $cursor-disabled;
163 | border-color: $select-border-c-disabled;
164 | background-color: $select-selection-bg-color-disabled;
165 |
166 | &:hover {
167 | border-color: $select-border-c-disabled;
168 | }
169 | }
170 | .at-select__placeholder,
171 | .at-select__selected {
172 | color: $input-placeholder-color-disabled;
173 | }
174 | }
175 | &--multiple {
176 | .at-tag {
177 | margin: 4px 4px 0 0;
178 | }
179 | .at-tag__text {
180 | font-size: 10px;
181 | }
182 | }
183 | &--small {
184 | font-size: $select-font-size-sm;
185 |
186 | .at-select__selection {
187 | height: $select-selection-height-sm;
188 | line-height: $select-selection-height-sm;
189 | }
190 | .at-select__dropdown .at-select__option {
191 | font-size: $select-dropdown-font-size-sm;
192 | }
193 | }
194 | &--large {
195 | font-size: $select-font-size-lg;
196 |
197 | .at-select__selection {
198 | height: $select-selection-height-lg;
199 | line-height: $select-selection-height-lg - 2;
200 | }
201 | .at-select__dropdown .at-select__option {
202 | font-size: $select-dropdown-font-size-lg;
203 | }
204 | }
205 | }
206 |
207 | /**
208 | * AtOptionGroup
209 | */
210 | .at-option-group {
211 | padding: 0;
212 |
213 | &__label {
214 | @include ellipsis();
215 | width: 100%;
216 | padding: 8px;
217 | color: $option-group-font-c;
218 | font-size: $select-dropdown-font-size-base;
219 | line-height: 1;
220 | white-space: nowrap;
221 | overflow: hidden;
222 | transition: all .3s;
223 | cursor: initial;
224 | }
225 | &__list {
226 | padding: 0;
227 | }
228 | }
229 |
--------------------------------------------------------------------------------
/src/components/slider.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Slider Style
3 | */
4 | @import '../variables/index.scss';
5 |
6 | .at-slider {
7 | position: relative;
8 |
9 | /* element */
10 | &__input {
11 | float: right;
12 | margin-top: 3px;
13 | }
14 | &__track {
15 | position: relative;
16 | margin: $slider-margin;
17 | width: 100%;
18 | height: $slider-bar-height;
19 | vertical-align: middle;
20 | border-radius: $slider-bar-border-radius;
21 | background-color: $slider-track-bg-color;
22 | user-select: none;
23 | cursor: pointer;
24 | }
25 | &__bar {
26 | position: absolute;
27 | top: 0;
28 | left: 0;
29 | height: $slider-bar-height;
30 | background-color: $slider-bar-bg-color;
31 | border-radius: $slider-bar-border-radius;
32 | }
33 | &__dot-wrapper {
34 | position: absolute;
35 | top: $slider-dot-wrapper-offset;
36 | width: $slider-dot-wrapper-size;
37 | height: $slider-dot-wrapper-size;
38 | text-align: center;
39 | background-color: transparent;
40 | transform: translateX(-50%);
41 | user-select: none;
42 |
43 | &:hover,
44 | &.at-slider__dot-wrapper--hover {
45 | cursor: grab;
46 | }
47 | &.at-slider__dot-wrapper--drag {
48 | cursor: grabbing;
49 | }
50 | /* tooltip */
51 | .at-tooltip {
52 | display: block;
53 | height: 100%;
54 | line-height: 1;
55 |
56 | &::after {
57 | content: '';
58 | display: inline-block;
59 | width: 0;
60 | height: 100%;
61 | vertical-align: middle;
62 | }
63 | }
64 | .at-tooltip__trigger {
65 | vertical-align: middle;
66 | }
67 | }
68 | &__dot {
69 | width: $slider-dot-size;
70 | height: $slider-dot-size;
71 | border-radius: 50%;
72 | background-color: $slider-dot-color;
73 | transition: all .3s;
74 |
75 | &:hover,
76 | &--hover,
77 | &--drag {
78 | background-color: $slider-dot-color-hover;
79 | transform: scale(1.3);
80 | }
81 |
82 | &:hover,
83 | &--hover {
84 | cursor: grab;
85 | }
86 |
87 | &--drag {
88 | cursor: grabbing;
89 | }
90 | }
91 |
92 | /* modifier */
93 | &--disabled {
94 | .at-slider__bar {
95 | background-color: $slider-bar-bg-color-disabled;
96 | }
97 | .at-slider__dot {
98 | background-color: $slider-dot-color-disabled;
99 | }
100 | }
101 | }
102 |
--------------------------------------------------------------------------------
/src/components/steps.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Steps Style
3 | */
4 | @import '../variables/index.scss';
5 |
6 | .at-steps {
7 | font-size: 0;
8 |
9 | /* modifier */
10 | &--small {
11 | .at-step__label {
12 | width: $step-label-size-sm;
13 | height: $step-label-size-sm;
14 | font-size: $step-font-size-sm;
15 | line-height: $step-label-size-sm - 2;
16 | }
17 | .at-step__title {
18 | font-size: $step-font-size-sm;
19 | line-height: $step-label-size-sm;
20 | }
21 | .at-step__line {
22 | top: ($step-label-size-sm - 2) / 2;
23 | }
24 |
25 | &.at-steps--vertical {
26 | .at-step__main {
27 | min-height: $step-main-height-vertical-sm;
28 | }
29 | }
30 | }
31 | &--vertical {
32 | .at-step {
33 | display: block;
34 |
35 | /* element */
36 | &__line {
37 | margin: 0;
38 | left: ($step-label-size - 2) / 2;
39 | top: 0;
40 | bottom: 2px;
41 | width: 1px;
42 | height: auto;
43 |
44 | &::before, &::after {
45 | position: absolute;
46 | top: 0px;
47 | width: 100%;
48 | }
49 | &::after {
50 | height: 0;
51 | }
52 | }
53 | &__head {
54 | padding-bottom: 2px;
55 | }
56 | &__main {
57 | min-height: $step-main-height-vertical;
58 | }
59 |
60 | /* modifier */
61 | &.at-step--finish {
62 | .at-step__line::after {
63 | height: 100%;
64 | }
65 | }
66 | }
67 |
68 | &.at-steps--small {
69 | .at-step__line {
70 | left: 8px;
71 | }
72 | }
73 | }
74 | }
75 |
76 | .at-step {
77 | position: relative;
78 | display: inline-block;
79 | vertical-align: top;
80 | white-space: nowrap;
81 |
82 | /* element */
83 | &__head, &__main {
84 | position: relative;
85 | font-size: $step-font-size;
86 | }
87 | &__head {
88 | position: relative;
89 | display: inline-block;
90 | vertical-align: top;
91 | background-color: $step-bg-color;
92 | }
93 | &__label {
94 | margin-right: 8px;
95 | width: $step-label-size;
96 | height: $step-label-size;
97 | color: $step-color;
98 | line-height: $step-label-size - 2;
99 | text-align: center;
100 | border: 1px solid $step-border-color;
101 | border-radius: 50%;
102 | transition: all .3s ease-in-out;
103 |
104 | @at-root.at-step--process &:not(.at-step__icon) {
105 | color: $step-color-active;
106 | border-color: $step-border-color-active;
107 | background-color: $step-bg-color-active;
108 | }
109 |
110 | @at-root.at-step--process &.at-step__icon {
111 | color: $step-icon-color-active;
112 | }
113 |
114 | @at-root.at-step--finish & {
115 | color: $step-icon-color-active;
116 | border-color: $step-border-color-active;
117 |
118 | &.at-step__icon {
119 | border-color: transparent;
120 | }
121 | }
122 |
123 | @at-root.at-step--error & {
124 | color: $step-icon-color-error;
125 | border-color: $step-border-color-error;
126 | }
127 | }
128 | &__line {
129 | position: absolute;
130 | left: 0;
131 | right: 0;
132 | top: ($step-label-size - 2) / 2;
133 | margin: 0 10px;
134 | height: 1px;
135 |
136 | @at-root.at-step--finish &::after {
137 | width: 100%;
138 | }
139 |
140 | @at-root.at-step--next-error &::after {
141 | width: 100%;
142 | background-color: $step-bg-color-error;
143 | }
144 |
145 | &::before, &::after {
146 | content: '';
147 | position: absolute;
148 | left: 0;
149 | right: 0;
150 | top: 0;
151 | height: 100%;
152 | }
153 | &::before {
154 | background-color: $step-line-color;
155 | }
156 | &::after {
157 | width: 0;
158 | background-color: $step-line-color-active;
159 | transition: all .3s;
160 | }
161 | }
162 | &__main {
163 | display: inline-block;
164 | width: calc(100% - 40px);
165 | vertical-align: top;
166 | white-space: normal;
167 | overflow: hidden;
168 | }
169 | &__title {
170 | display: inline-block;
171 | padding-right: 8px;
172 | max-width: 80%;
173 | color: $step-text-color;
174 | font-weight: bold;
175 | line-height: $step-label-size;
176 | vertical-align: top;
177 | white-space: nowrap;
178 | text-overflow: ellipsis;
179 | background-color: $step-bg-color;
180 | overflow: hidden;
181 |
182 | @at-root.at-step--process & {
183 | color: $step-color-process;
184 | }
185 |
186 | @at-root.at-step--error & {
187 | color: $step-color-error;
188 | }
189 | }
190 | &__description {
191 | color: $step-text-color;
192 | font-size: $step-description-font-size;
193 | word-wrap: break-word;
194 |
195 | @at-root.at-step--process & {
196 | color: $step-color-process;
197 | }
198 |
199 | @at-root.at-step--error & {
200 | color: $step-color-error;
201 | }
202 | }
203 | &__icon {
204 | font-size: $step-label-size - 2;
205 | border-color: transparent;
206 | background-color: $color-white;
207 | }
208 | &__title, &__description, &__icon {
209 | transition: all .3s ease-in-out;
210 | }
211 | }
212 |
--------------------------------------------------------------------------------
/src/components/switch.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Switch Style
3 | */
4 | @import '../variables/index.scss';
5 |
6 | .at-switch {
7 | position: relative;
8 | display: inline-block;
9 | min-width: $switch-min-width-base;
10 | height: $switch-height-base;
11 | border: 1px solid $switch-border-color;
12 | border-radius: $switch-border-radius-base;
13 | background-color: $switch-bg-color;
14 | vertical-align: middle;
15 | transition: all .3s;
16 | user-select: none;
17 | cursor: pointer;
18 |
19 | &::after {
20 | content: '';
21 | display: block;
22 | position: absolute;
23 | left: 1px;
24 | top: 1px;
25 | width: $switch-circle-size-base;
26 | height: $switch-circle-size-base;
27 | border-radius: 50%;
28 | background-color: $switch-circle-bg-color;
29 | transition: all .3s;
30 | cursor: pointer;
31 | }
32 |
33 | /* element */
34 | &__text {
35 | display: block;
36 | padding-left: $switch-circle-size-base + 6;
37 | padding-right: 6px;
38 | color: $switch-font-color;
39 | font-size: $switch-font-size-base;
40 | line-height: $switch-height-base - 2;
41 | }
42 |
43 | /* modifier */
44 | &--checked {
45 | border-color: $switch-border-color-checked;
46 | background-color: $switch-bg-color-checked;
47 |
48 | &::after {
49 | left: 100%;
50 | margin-left: -$switch-circle-size-base - 1;
51 | }
52 | .at-switch__text {
53 | padding-left: 6px;
54 | padding-right: $switch-circle-size-base + 6;
55 | }
56 | }
57 | &--disabled {
58 | border-color: $switch-border-color-disabled;
59 | background-color: $switch-bg-color-disabled;
60 | cursor: $cursor-disabled;
61 |
62 | &::after {
63 | background-color: $switch-circle-bg-color-disabled;
64 | cursor: $cursor-disabled;
65 | }
66 | .at-switch__text {
67 | color: $switch-font-color-disabled;
68 | }
69 | }
70 | &--small {
71 | min-width: $switch-min-width-sm;
72 | height: $switch-height-sm;
73 |
74 | &::after {
75 | width: $switch-circle-size-sm;
76 | height: $switch-circle-size-sm;
77 | }
78 | .at-switch__text {
79 | font-size: $switch-font-size-sm;
80 | padding-left: $switch-circle-size-sm + 4;
81 | padding-right: 4px;
82 | line-height: $switch-height-sm - 2;
83 | }
84 | &.at-switch--checked {
85 | &::after {
86 | left: 100%;
87 | margin-left: -$switch-circle-size-sm - 1;
88 | }
89 | .at-switch__text {
90 | padding-left: 4px;
91 | padding-right: $switch-circle-size-sm + 4;
92 | }
93 | }
94 | }
95 | &--large {
96 | min-width: $switch-min-width-lg;
97 | height: $switch-height-lg;
98 |
99 | &::after {
100 | width: $switch-circle-size-lg;
101 | height: $switch-circle-size-lg;
102 | }
103 | .at-switch__text {
104 | font-size: $switch-font-size-lg;
105 | padding-left: $switch-circle-size-lg + 6;
106 | padding-right: 6px;
107 | line-height: $switch-height-lg - 2;
108 | }
109 | &.at-switch--checked {
110 | &::after {
111 | left: 100%;
112 | margin-left: -$switch-circle-size-lg - 1;
113 | }
114 | .at-switch__text {
115 | padding-left: 6px;
116 | padding-right: $switch-circle-size-lg + 6;
117 | }
118 | }
119 | }
120 | }
121 |
--------------------------------------------------------------------------------
/src/components/table.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Table Style
3 | */
4 | @import '../variables/index.scss';
5 |
6 | .at-table {
7 | position: relative;
8 | color: $table-text-color;
9 | font-size: $table-font-size;
10 |
11 | table {
12 | width: 100%;
13 | border-collapse: separate;
14 | border-spacing: 0;
15 | text-align: left;
16 | overflow: hidden;
17 |
18 | th, td {
19 | height: $table-cell-height;
20 | text-align: left;
21 | text-overflow: ellipsis;
22 | vertical-align: middle;
23 | border-bottom: 1px solid $table-border-color;
24 |
25 | &.at-table__cell--nodata {
26 | text-align: center;
27 | }
28 | }
29 | }
30 |
31 | &__cell {
32 | padding: $table-cell-padding;
33 | border-bottom: 1px solid $table-border-color;
34 | }
35 | &__content {
36 | border: 1px solid $table-border-color;
37 | border-bottom-width: 0;
38 | }
39 | &__thead {
40 | & > tr > th {
41 | font-weight: bold;
42 | text-align: left;
43 | background-color: $table-thead-bg-color;
44 | white-space: nowrap;
45 | }
46 |
47 | .at-table__column-sorter {
48 | display: inline-block;
49 | vertical-align: middle;
50 | height: $table-sorter-height;
51 | width: $table-sorter-width;
52 |
53 | &-up,
54 | &-down {
55 | display: block;
56 | color: $grey-400;
57 | font-size: $table-sorter-icon-size;
58 | line-height: 1;
59 | transition: color .3s;
60 |
61 | &:hover {
62 | color: $table-text-color;
63 | }
64 | }
65 | &.sort-desc {
66 | .at-table__column-sorter-down {
67 | color: $table-text-color;
68 | }
69 | }
70 | &.sort-asc {
71 | .at-table__column-sorter-up {
72 | color: $table-text-color;
73 | }
74 | }
75 | }
76 | }
77 | &__tbody {
78 | & > tr {
79 | transition: all .3s;
80 |
81 | &:hover {
82 | background-color: $table-tr-bg-color-hover;
83 | }
84 | }
85 | }
86 | &__footer {
87 | position: relative;
88 | margin: 16px 0;
89 | height: $table-footer-height;
90 |
91 | .at-pagination {
92 | float: right;
93 |
94 | &__total {
95 | position: absolute;
96 | left: 0;
97 | top: 0;
98 | margin-left: 16px;
99 | }
100 | }
101 | }
102 |
103 | /* modifier */
104 | &--fixHeight {
105 | .at-table__content {
106 | border-bottom-width: 1px;
107 | }
108 | .at-table__header {
109 | position: absolute;
110 | top: 0;
111 | left: 0;
112 | width: 100%;
113 |
114 | table {
115 | border: 1px solid $table-border-color;
116 | border-bottom: none;
117 | }
118 | }
119 | .at-table__body {
120 | overflow: scroll;
121 | }
122 | .at-table__tbody {
123 | > tr:last-child td {
124 | border-bottom: none;
125 | }
126 | }
127 | }
128 | &--stripe {
129 | .at-table__tbody {
130 | & > tr {
131 | &:nth-child(2n) {
132 | background-color: $table-tr-bg-color-stripe;
133 | }
134 | &:hover {
135 | background-color: $table-tr-bg-color-hover;
136 | }
137 | }
138 | }
139 | }
140 | &--border {
141 | .at-table__content {
142 | border-right: none;
143 | }
144 | .at-table__thead,
145 | .at-table__tbody {
146 | th, td {
147 | border-right: 1px solid $table-border-color;
148 | }
149 | }
150 | }
151 | &--large {
152 | font-size: $table-font-size-large;
153 |
154 | table {
155 | th, td {
156 | height: $table-cell-height-large;
157 | }
158 | }
159 | }
160 | &--small {
161 | font-size: $table-font-size-small;
162 |
163 | table {
164 | th, td {
165 | height: $table-cell-height-small;
166 | }
167 | }
168 | .at-table__thead {
169 | .at-table__column-sorter {
170 | width: $table-sorter-width-small;
171 | height: $table-sorter-height-small;
172 |
173 | &-up,
174 | &-down {
175 | font-size: $table-sorter-icon-size-small;
176 | }
177 | }
178 | }
179 | }
180 | }
181 |
--------------------------------------------------------------------------------
/src/components/tabs.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Tabs Style
3 | */
4 | @import '../variables/index.scss';
5 |
6 | .at-tabs {
7 | overflow: hidden;
8 |
9 | /* element */
10 | &__header {
11 | margin-bottom: 16px;
12 | font-size: 0;
13 | border-bottom: 1px solid $tabs-border-color;
14 | }
15 | &__nav {
16 | position: relative;
17 | margin-bottom: -1px;
18 | height: $tabs-nav-height;
19 | color: $tabs-navigation-color;
20 | font-size: $tabs-nav-font-size;
21 | overflow: hidden;
22 | }
23 | &__nav-wrap {
24 | overflow: hidden;
25 | }
26 | &__prev, &__next {
27 | position: absolute;
28 | top: 0;
29 | width: $tabs-navigation-btn-width;
30 | height: 100%;
31 | transition: color .3s;
32 | cursor: pointer;
33 |
34 | &:hover {
35 | color: $tabs-navigation-color-hover;;
36 | }
37 |
38 | &--disabled {
39 | color: $tabs-navigation-color-disabled;
40 | cursor: default;
41 |
42 | &:hover {
43 | color: $tabs-navigation-color-disabled;
44 | }
45 | }
46 |
47 | .icon {
48 | position: absolute;
49 | left: 50%;
50 | top: 50%;
51 | transform: translate(-50%, -50%)
52 | }
53 | }
54 | &__prev {
55 | left: 0;
56 | }
57 | &__next {
58 | right: 0;
59 | }
60 | &__body {
61 | font-size: 0;
62 | white-space: nowrap;
63 | transition: all .3s;
64 | }
65 | &__extra {
66 | float: right;
67 | margin-top: 6px;
68 | }
69 | &__pane {
70 | display: inline-block;
71 | width: 100%;
72 | white-space: initial;
73 | vertical-align: top;
74 | }
75 |
76 | /* modifier */
77 | &--small {
78 | .at-tabs__header {
79 | margin-bottom: 12px;
80 | }
81 | .at-tabs__nav {
82 | height: $tabs-nav-height-sm;
83 | }
84 | .at-tabs-nav__item {
85 | margin-right: 16px;
86 | padding: $tabs-nav-item-padding-sm;
87 | line-height: $tabs-nav-height-sm;
88 | font-size: $tabs-nav-font-size-sm;
89 | }
90 | .at-tabs__extra {
91 | margin-top: 3px;
92 | }
93 | }
94 | &--card {
95 | &.at-tabs--small {
96 | .at-tabs-nav__item {
97 | line-height: $tabs-nav-height-sm - 2;
98 | }
99 | }
100 |
101 | .at-tabs-nav__item {
102 | margin: 0 2px 0 0;
103 | line-height: $tabs-nav-height - 2;
104 | border: 1px solid $tabs-border-color;
105 | border-radius: 4px 4px 0 0;
106 | background-color: $tabs-nav-item-bg-color-card;
107 | transition: background-color .3s;
108 |
109 | &::after {
110 | content: normal
111 | }
112 |
113 | &--active {
114 | border-bottom-color: transparent;
115 | background-color: $tabs-nav-item-bg-color;
116 | }
117 | }
118 | }
119 | &--scroll {
120 | .at-tabs__nav {
121 | padding: 0 $tabs-navigation-btn-width;
122 | }
123 | }
124 | }
125 |
126 | .at-tabs-nav {
127 | display: inline-block;
128 | white-space: nowrap;
129 | transition: transform .3s;
130 |
131 | /* element */
132 | &__icon {
133 | margin-right: 8px;
134 | }
135 | &__close {
136 | position: absolute;
137 | margin-left: 2px;
138 | color: $tabs-nav-item-icon-color;
139 | opacity: 0;
140 | transition: all .3s;
141 |
142 | &:hover {
143 | color: $tabs-nav-item-icon-color-hover;
144 | }
145 | }
146 | &__item {
147 | position: relative;
148 | display: inline-block;
149 | margin-right: 24px;
150 | padding: $tabs-nav-item-padding;
151 | line-height: $tabs-nav-height;
152 | transition: color .3s;
153 | cursor: pointer;
154 |
155 | &:last-of-type {
156 | margin-right: 0;
157 | }
158 | &::after {
159 | content: '';
160 | position: absolute;
161 | left: 0;
162 | width: 100%;
163 | height: 2px;
164 | bottom: 0;
165 | background-color: $menu-item-text-color-active;
166 | transform: scaleX(0);
167 | transition: all .15s;
168 | }
169 | &:not(&--disabled):hover {
170 | color: $menu-item-text-color-active;
171 | }
172 |
173 | &--active {
174 | color: $menu-item-text-color-active;
175 |
176 | &::after {
177 | transform: scaleX(1)
178 | }
179 | }
180 | &--disabled {
181 | color: $tabs-navigation-color-disabled;
182 | cursor: default;
183 | }
184 | &--closable {
185 | &:hover {
186 | .at-tabs-nav__close {
187 | opacity: 1;
188 | }
189 | }
190 | }
191 | }
192 | }
193 |
--------------------------------------------------------------------------------
/src/components/tag.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Tag
3 | */
4 | @import '../variables/index.scss';
5 |
6 | @mixin tag-style($text-color, $border-color, $background-color) {
7 | color: $text-color;
8 | border-color: $border-color;
9 | background-color: $background-color;
10 | }
11 |
12 | .at-tag {
13 | display: inline-block;
14 | padding: 1px 8px;
15 | color: $color-white;
16 | font-size: 0;
17 | line-height: 1.5;
18 | text-align: center;
19 | white-space: nowrap;
20 | border: 1px solid $tag-border-color;
21 | border-radius: $border-radius-base;
22 | background-color: $tag-bg-color;
23 | outline: 0;
24 | @include tag-style($text-color, $tag-border-color, $tag-bg-color);
25 |
26 | &__text {
27 | font-size: $font-size-smer;
28 | }
29 | &__close {
30 | font-size: 10px;
31 | padding-left: 4px;
32 | margin: 0;
33 | cursor: pointer;
34 |
35 | &:hover {
36 | color: tint($text-color, 30%);
37 | }
38 | }
39 | &--default {
40 | @include tag-style($text-color, $tag-border-color, $tag-bg-color);
41 | }
42 | &--primary {
43 | @include tag-style($color-white, $btn-primary-bg, $btn-primary-bg);
44 | }
45 | &--success {
46 | @include tag-style($color-white, $btn-success-bg, $btn-success-bg);
47 | }
48 | &--error {
49 | @include tag-style($color-white, $btn-error-bg, $btn-error-bg);
50 | }
51 | &--warning {
52 | @include tag-style($color-white, $btn-warning-bg, $btn-warning-bg);
53 | }
54 | &--info {
55 | @include tag-style($color-white, $btn-info-bg, $btn-info-bg);
56 | }
57 | }
58 |
--------------------------------------------------------------------------------
/src/components/textarea.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Textarea Style
3 | */
4 | @import '../variables/index.scss';
5 |
6 | .at-textarea {
7 |
8 | /* element */
9 | &__original {
10 | display: block;
11 | width: 100%;
12 | padding: $textarea-padding;
13 | color: $input-font-color;
14 | font-size: $input-font-size-base;
15 | line-height: 1.5;
16 | border: 1px solid $input-border-color;
17 | border-radius: $border-radius-base;
18 | background-color: $input-bg-color;
19 | transition: border .3s;
20 | outline: 0;
21 | resize: vertical;
22 |
23 | &::placeholder {
24 | color: $input-placeholder-color;
25 | }
26 | &:hover {
27 | border-color: $input-border-color-hover;
28 | }
29 | &:focus {
30 | border-color: $input-border-color-focus;
31 | }
32 | }
33 |
34 | /* modifier */
35 | &--disabled {
36 | .at-textarea__original {
37 | color: $input-font-color-disabled;
38 | border-color: $input-border-color-disabled;
39 | background-color: $input-bg-color-disabled;
40 | cursor: $cursor-disabled;
41 |
42 | &::placeholder {
43 | color: $input-placeholder-color-disabled;
44 | }
45 | }
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/src/components/timeline.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Timeline
3 | */
4 |
5 | .at-timeline {
6 | /* element */
7 | &__item {
8 | position: relative;
9 | padding: 0 0 12px;
10 |
11 | &--default {
12 | .at-timeline__dot {
13 | color: $timeline-dot-color;
14 | border-color: $timeline-dot-color;
15 | }
16 | }
17 | &--success {
18 | .at-timeline__dot {
19 | color: $timeline-dot-color-success;
20 | border-color: $timeline-dot-color-success;
21 | }
22 | }
23 | &--error {
24 | .at-timeline__dot {
25 | color: $timeline-dot-color-error;
26 | border-color: $timeline-dot-color-error;
27 | }
28 | }
29 | &--warning {
30 | .at-timeline__dot {
31 | color: $timeline-dot-color-warning;
32 | border-color: $timeline-dot-color-warning;
33 | }
34 | }
35 | &--custom {
36 | .at-timeline__dot {
37 | top: -2px;
38 | left: -4px;
39 | width: $timeline-custom-dot-size;
40 | height: $timeline-custom-dot-size;
41 | font-size: $timeline-custom-dot-font-size;
42 | text-align: center;
43 | border: 0;
44 |
45 | .icon {
46 | display: block;
47 | margin-top: 2px;
48 | }
49 | }
50 | }
51 | &--last {
52 | .at-timeline__tail {
53 | display: none
54 | }
55 | .at-timeline__content {
56 | min-height: $timeline-item-last-min-height;
57 | }
58 | }
59 | }
60 | &__tail {
61 | position: absolute;
62 | top: 0;
63 | bottom: 0;
64 | left: ($timeline-dot-size - 2) / 2;
65 | border-left: 2px solid $timeline-line-color;
66 | }
67 | &__dot {
68 | position: absolute;
69 | left: 0;
70 | top: 0;
71 | width: $timeline-dot-size;
72 | height: $timeline-dot-size;
73 | border: 2px solid transparent;
74 | border-radius: 50%;
75 | background-color: $timeline-dot-bg-color;
76 | }
77 | &__content {
78 | position: relative;
79 | top: -($timeline-text-font-size - 2) / 2;
80 | padding: 0 0 8px 24px;
81 | font-size: $timeline-text-font-size;
82 | }
83 |
84 | /* modifier */
85 | &--pending {
86 | .at-timeline__item--pending {
87 | .at-timeline__tail {
88 | display: none
89 | }
90 | }
91 | .at-timeline__item--last {
92 | .at-timeline__tail {
93 | display: inline-block;
94 | border-left-style: dotted;
95 | }
96 | }
97 | }
98 | }
99 |
--------------------------------------------------------------------------------
/src/components/tooltip.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Tooltip
3 | */
4 | @import '../variables/index.scss';
5 |
6 | .at-tooltip {
7 | display: inline-block;
8 |
9 | /* element */
10 | &__trigger {
11 | display: inline-block;
12 | position: relative;
13 | }
14 | &__popper {
15 | position: absolute;
16 | z-index: $zindex-popover;
17 | }
18 | &__content {
19 | padding: $tooltip-padding;
20 | max-width: $tooltip-max-width;
21 | color: $tooltip-font-color;
22 | font-size: $tooltip-font-size;
23 | line-height: 1.5;
24 | border-radius: $border-radius-base;
25 | background-color: $tooltip-bg-color;
26 | word-wrap: break-word;
27 | }
28 | &__arrow {
29 | position: absolute;
30 | display: block;
31 | width: 0;
32 | height: 0;
33 | border: $tooltip-arrow-size solid transparent;
34 | }
35 |
36 | /* modifier */
37 | /**
38 | * Top
39 | */
40 | &--top,
41 | &--top-left,
42 | &--top-right {
43 | padding: $tooltip-arrow-size 0;
44 | margin-top: -2px;
45 |
46 | .at-tooltip__arrow {
47 | bottom: 0;
48 | left: 50%;
49 | margin-left: -$tooltip-arrow-size;
50 | border-bottom-width: 0;
51 | border-top-color: $tooltip-border-color;
52 | }
53 | }
54 | &--top-left {
55 | .at-tooltip__arrow {
56 | left: $tooltip-arrow-size * 3;
57 | right: initial;
58 | }
59 | }
60 | &--top-right {
61 | .at-tooltip__arrow {
62 | left: initial;
63 | right: $tooltip-arrow-size * 2;
64 | }
65 | }
66 |
67 | /**
68 | * Bottom
69 | */
70 | &--bottom,
71 | &--bottom-left,
72 | &--bottom-right {
73 | padding: $tooltip-arrow-size 0;
74 | margin-top: 2px;
75 |
76 | .at-tooltip__arrow {
77 | top: 0;
78 | left: 50%;
79 | margin-left: -$tooltip-arrow-size;
80 | border-top-width: 0;
81 | border-bottom-color: $tooltip-border-color;
82 | }
83 | }
84 | &--bottom-left {
85 | .at-tooltip__arrow {
86 | left: $tooltip-arrow-size * 3;
87 | right: initial;
88 | }
89 | }
90 | &--bottom-right {
91 | .at-tooltip__arrow {
92 | left: initial;
93 | right: $tooltip-arrow-size * 2;
94 | }
95 | }
96 |
97 | /**
98 | * Left
99 | */
100 | &--left,
101 | &--left-top,
102 | &--left-bottom {
103 | padding: 0 $tooltip-arrow-size;
104 | margin-left: -2px;
105 |
106 | .at-tooltip__arrow {
107 | top: 50%;
108 | right: 0;
109 | margin-top: -$tooltip-arrow-size;
110 | border-right-width: 0;
111 | border-left-color: $tooltip-border-color;
112 | }
113 | }
114 | &--left-top {
115 | .at-tooltip__arrow {
116 | top: $tooltip-arrow-size * 3;
117 | bottom: initial;
118 | }
119 | }
120 | &--left-bottom {
121 | .at-tooltip__arrow {
122 | top: initial;
123 | bottom: $tooltip-arrow-size * 2;
124 | }
125 | }
126 |
127 | /**
128 | * Right
129 | */
130 | &--right,
131 | &--right-top,
132 | &--right-bottom {
133 | padding: 0 $tooltip-arrow-size;
134 | margin-left: 2px;
135 |
136 | .at-tooltip__arrow {
137 | top: 50%;
138 | left: 0;
139 | margin-top: -$tooltip-arrow-size;
140 | border-left-width: 0;
141 | border-right-color: $tooltip-border-color;
142 | }
143 | }
144 | &--right-top {
145 | .at-tooltip__arrow {
146 | top: $tooltip-arrow-size * 3;
147 | bottom: initial;
148 | }
149 | }
150 | &--right-bottom {
151 | .at-tooltip__arrow {
152 | top: initial;
153 | bottom: $tooltip-arrow-size * 2;
154 | }
155 | }
156 | }
157 |
--------------------------------------------------------------------------------
/src/core/base.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * AT-Desktop UI Base Stylesheet
3 | */
4 | @import '../variables/index.scss';
5 | @import '../mixins/index.scss';
6 |
7 | * {
8 | box-sizing: border-box;
9 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
10 |
11 | &:before, &:after {
12 | box-sizing: border-box;
13 | }
14 | }
15 |
16 | /* HTML & Body reset */
17 | html, body {
18 | @include size(100%);
19 | }
20 |
21 | body {
22 | background-color: $bg-color;
23 | color: $text-color;
24 | line-height: $line-height-base;
25 | font-family: $font-family;
26 | font-size: $font-size-base;
27 | -webkit-font-smoothing: antialiased;
28 | }
29 |
30 | /* Unify the margin and padding */
31 | body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
32 | margin: 0;
33 | padding: 0;
34 | }
35 |
36 | /* Reset fonts for relevant elements */
37 | button, input, select, textarea {
38 | font-family: inherit;
39 | font-size: inherit;
40 | line-height: inherit;
41 | color: inherit;
42 | }
43 |
44 | ul, ol {
45 | list-style: none;
46 | }
47 |
48 | /* Remove the clear button of a text input control in IE10+ */
49 | input::-ms-clear, input::-ms-reveal {
50 | display: none;
51 | }
52 |
53 | ::selection {
54 | background: $color-primary;
55 | color: #fff;
56 | }
57 |
58 | /* Link */
59 | a {
60 | color: $link-color;
61 | background: transparent;
62 | text-decoration: none;
63 | outline: none;
64 | cursor: pointer;
65 | transition: color .3s ease;
66 |
67 | &:hover {
68 | color: $link-hover-color;
69 | }
70 | &:active {
71 | color: $link-active-color;
72 | }
73 | &:hover, &:active {
74 | outline: 0;
75 | text-decoration: none;
76 | }
77 | &[disabled] {
78 | color: $link-disabled-color;
79 | cursor: not-allowed;
80 | pointer-events: none;
81 | }
82 | }
83 |
84 | /* Code Block */
85 | code, kbd, pre, samp {
86 | font-family: $code-family;
87 | }
88 |
89 | /* Utility classes */
90 | .clearfix {
91 | @include clearfix;
92 | }
93 |
94 | .show {
95 | display: block !important;
96 | }
97 |
98 | .hide {
99 | display: none !important;
100 | }
101 |
102 | .invisible {
103 | visibility: hidden !important;
104 | }
105 |
106 | .pull-left {
107 | float: left !important;
108 | }
109 |
110 | .pull-right {
111 | float: right !important;
112 | }
113 |
114 | /* Title */
115 | h1, h2, h3, h4, h5, h6 {
116 | color: $title-color;
117 | }
118 | h1 {
119 | font-size: $font-size-lger;
120 | }
121 | h2 {
122 | font-size: $font-size-lg;
123 | }
124 | h3 {
125 | font-size: $font-size-normal;
126 | }
127 | h4, h5, h6 {
128 | font-size: $font-size-base;
129 | }
130 | hr {
131 | margin: 1.2em 0 1.5em;
132 | }
133 |
134 | /* Text */
135 | p {
136 | color: $text-color;
137 | font-size: $font-size-base;
138 | }
139 | .text-smallest {
140 | font-size: $font-size-smest;
141 | }
142 | .text-smaller {
143 | font-size: $font-size-smer;
144 | }
145 | .text-small {
146 | font-size: $font-size-sm;
147 | }
148 | .text-base {
149 | font-size: $font-size-base;
150 | }
151 | .text-normal {
152 | font-size: $font-size-normal;
153 | }
154 | .text-large {
155 | font-size: $font-size-lg;
156 | }
157 | .text-larger {
158 | font-size: $font-size-lger;
159 | }
160 |
161 | /*// Color
162 | $normal-color : #6190E8;
163 | $primary-color : #6190E8;
164 | $success-color : #13CE66;
165 | $error-color : #FF4949;
166 | $warning-color : #FFC82C;
167 | $info-color : #78A4FA;
168 | .normal-color {
169 | color:
170 | }*/
171 |
172 | /* Font */
173 | .typo-pingfang {
174 | font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', Arial, sans-serif;
175 | }
176 | .typo-dongqing {
177 | font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;
178 | }
179 | .typo-yahei {
180 | font-family: 'Helvetica Neue', Helvetica, 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
181 | }
182 | .typo-helvetica-neue {
183 | font-family: 'Helvetica Neue', "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif;
184 | }
185 | .typo-helvetica {
186 | font-family: Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif;
187 | }
188 | .typo-arial {
189 | font-family: Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif;
190 | }
191 |
--------------------------------------------------------------------------------
/src/core/font.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * IconFont
3 | */
4 | @font-face {
5 | font-family: 'feather';
6 | src: url('./fonts/feather.eot?t=1501829003743');
7 | src: url('./fonts/feather.eot?t=1501829003743#iefix') format('embedded-opentype'),
8 | url('./fonts/feather.ttf?t=1501829003743') format('truetype'),
9 | url('./fonts/feather.woff?t=1501829003743') format('woff'),
10 | url('./fonts/feather.svg?t=1501829003743#feather') format('svg');
11 | font-weight: normal;
12 | font-size: normal;
13 | }
14 |
15 | .icon {
16 | /* use !important to prevent issues with browser extensions that change fonts */
17 | font-family: 'feather' !important;
18 | speak: none;
19 | font-style: normal;
20 | font-weight: normal;
21 | font-variant: normal;
22 | text-transform: none;
23 | line-height: 1;
24 |
25 | /* Better Font Rendering =========== */
26 | -webkit-font-smoothing: antialiased;
27 | -moz-osx-font-smoothing: grayscale;
28 | }
29 |
30 | .icon-alert-octagon:before { content: "\e81b"; }
31 |
32 | .icon-alert-circle:before { content: "\e81c"; }
33 |
34 | .icon-activity:before { content: "\e81d"; }
35 |
36 | .icon-alert-triangle:before { content: "\e81e"; }
37 |
38 | .icon-align-center:before { content: "\e81f"; }
39 |
40 | .icon-airplay:before { content: "\e820"; }
41 |
42 | .icon-align-justify:before { content: "\e821"; }
43 |
44 | .icon-align-left:before { content: "\e822"; }
45 |
46 | .icon-align-right:before { content: "\e823"; }
47 |
48 | .icon-arrow-down-left:before { content: "\e824"; }
49 |
50 | .icon-arrow-down-right:before { content: "\e825"; }
51 |
52 | .icon-anchor:before { content: "\e826"; }
53 |
54 | .icon-aperture:before { content: "\e827"; }
55 |
56 | .icon-arrow-left:before { content: "\e828"; }
57 |
58 | .icon-arrow-right:before { content: "\e829"; }
59 |
60 | .icon-arrow-down:before { content: "\e82a"; }
61 |
62 | .icon-arrow-up-left:before { content: "\e82b"; }
63 |
64 | .icon-arrow-up-right:before { content: "\e82c"; }
65 |
66 | .icon-arrow-up:before { content: "\e82d"; }
67 |
68 | .icon-award:before { content: "\e82e"; }
69 |
70 | .icon-bar-chart:before { content: "\e82f"; }
71 |
72 | .icon-at-sign:before { content: "\e830"; }
73 |
74 | .icon-bar-chart-2:before { content: "\e831"; }
75 |
76 | .icon-battery-charging:before { content: "\e832"; }
77 |
78 | .icon-bell-off:before { content: "\e833"; }
79 |
80 | .icon-battery:before { content: "\e834"; }
81 |
82 | .icon-bluetooth:before { content: "\e835"; }
83 |
84 | .icon-bell:before { content: "\e836"; }
85 |
86 | .icon-book:before { content: "\e837"; }
87 |
88 | .icon-briefcase:before { content: "\e838"; }
89 |
90 | .icon-camera-off:before { content: "\e839"; }
91 |
92 | .icon-calendar:before { content: "\e83a"; }
93 |
94 | .icon-bookmark:before { content: "\e83b"; }
95 |
96 | .icon-box:before { content: "\e83c"; }
97 |
98 | .icon-camera:before { content: "\e83d"; }
99 |
100 | .icon-check-circle:before { content: "\e83e"; }
101 |
102 | .icon-check:before { content: "\e83f"; }
103 |
104 | .icon-check-square:before { content: "\e840"; }
105 |
106 | .icon-cast:before { content: "\e841"; }
107 |
108 | .icon-chevron-down:before { content: "\e842"; }
109 |
110 | .icon-chevron-left:before { content: "\e843"; }
111 |
112 | .icon-chevron-right:before { content: "\e844"; }
113 |
114 | .icon-chevron-up:before { content: "\e845"; }
115 |
116 | .icon-chevrons-down:before { content: "\e846"; }
117 |
118 | .icon-chevrons-right:before { content: "\e847"; }
119 |
120 | .icon-chevrons-up:before { content: "\e848"; }
121 |
122 | .icon-chevrons-left:before { content: "\e849"; }
123 |
124 | .icon-circle:before { content: "\e84a"; }
125 |
126 | .icon-clipboard:before { content: "\e84b"; }
127 |
128 | .icon-chrome:before { content: "\e84c"; }
129 |
130 | .icon-clock:before { content: "\e84d"; }
131 |
132 | .icon-cloud-lightning:before { content: "\e84e"; }
133 |
134 | .icon-cloud-drizzle:before { content: "\e84f"; }
135 |
136 | .icon-cloud-rain:before { content: "\e850"; }
137 |
138 | .icon-cloud-off:before { content: "\e851"; }
139 |
140 | .icon-codepen:before { content: "\e852"; }
141 |
142 | .icon-cloud-snow:before { content: "\e853"; }
143 |
144 | .icon-compass:before { content: "\e854"; }
145 |
146 | .icon-copy:before { content: "\e855"; }
147 |
148 | .icon-corner-down-right:before { content: "\e856"; }
149 |
150 | .icon-corner-down-left:before { content: "\e857"; }
151 |
152 | .icon-corner-left-down:before { content: "\e858"; }
153 |
154 | .icon-corner-left-up:before { content: "\e859"; }
155 |
156 | .icon-corner-up-left:before { content: "\e85a"; }
157 |
158 | .icon-corner-up-right:before { content: "\e85b"; }
159 |
160 | .icon-corner-right-down:before { content: "\e85c"; }
161 |
162 | .icon-corner-right-up:before { content: "\e85d"; }
163 |
164 | .icon-cpu:before { content: "\e85e"; }
165 |
166 | .icon-credit-card:before { content: "\e85f"; }
167 |
168 | .icon-crosshair:before { content: "\e860"; }
169 |
170 | .icon-disc:before { content: "\e861"; }
171 |
172 | .icon-delete:before { content: "\e862"; }
173 |
174 | .icon-download-cloud:before { content: "\e863"; }
175 |
176 | .icon-download:before { content: "\e864"; }
177 |
178 | .icon-droplet:before { content: "\e865"; }
179 |
180 | .icon-edit-2:before { content: "\e866"; }
181 |
182 | .icon-edit:before { content: "\e867"; }
183 |
184 | .icon-edit-1:before { content: "\e868"; }
185 |
186 | .icon-external-link:before { content: "\e869"; }
187 |
188 | .icon-eye:before { content: "\e86a"; }
189 |
190 | .icon-feather:before { content: "\e86b"; }
191 |
192 | .icon-facebook:before { content: "\e86c"; }
193 |
194 | .icon-file-minus:before { content: "\e86d"; }
195 |
196 | .icon-eye-off:before { content: "\e86e"; }
197 |
198 | .icon-fast-forward:before { content: "\e86f"; }
199 |
200 | .icon-file-text:before { content: "\e870"; }
201 |
202 | .icon-film:before { content: "\e871"; }
203 |
204 | .icon-file:before { content: "\e872"; }
205 |
206 | .icon-file-plus:before { content: "\e873"; }
207 |
208 | .icon-folder:before { content: "\e874"; }
209 |
210 | .icon-filter:before { content: "\e875"; }
211 |
212 | .icon-flag:before { content: "\e876"; }
213 |
214 | .icon-globe:before { content: "\e877"; }
215 |
216 | .icon-grid:before { content: "\e878"; }
217 |
218 | .icon-heart:before { content: "\e879"; }
219 |
220 | .icon-home:before { content: "\e87a"; }
221 |
222 | .icon-github:before { content: "\e87b"; }
223 |
224 | .icon-image:before { content: "\e87c"; }
225 |
226 | .icon-inbox:before { content: "\e87d"; }
227 |
228 | .icon-layers:before { content: "\e87e"; }
229 |
230 | .icon-info:before { content: "\e87f"; }
231 |
232 | .icon-instagram:before { content: "\e880"; }
233 |
234 | .icon-layout:before { content: "\e881"; }
235 |
236 | .icon-link-2:before { content: "\e882"; }
237 |
238 | .icon-life-buoy:before { content: "\e883"; }
239 |
240 | .icon-link:before { content: "\e884"; }
241 |
242 | .icon-log-in:before { content: "\e885"; }
243 |
244 | .icon-list:before { content: "\e886"; }
245 |
246 | .icon-lock:before { content: "\e887"; }
247 |
248 | .icon-log-out:before { content: "\e888"; }
249 |
250 | .icon-loader:before { content: "\e889"; }
251 |
252 | .icon-mail:before { content: "\e88a"; }
253 |
254 | .icon-maximize-2:before { content: "\e88b"; }
255 |
256 | .icon-map:before { content: "\e88c"; }
257 |
258 | .icon-map-pin:before { content: "\e88e"; }
259 |
260 | .icon-menu:before { content: "\e88f"; }
261 |
262 | .icon-message-circle:before { content: "\e890"; }
263 |
264 | .icon-message-square:before { content: "\e891"; }
265 |
266 | .icon-minimize-2:before { content: "\e892"; }
267 |
268 | .icon-mic-off:before { content: "\e893"; }
269 |
270 | .icon-minus-circle:before { content: "\e894"; }
271 |
272 | .icon-mic:before { content: "\e895"; }
273 |
274 | .icon-minus-square:before { content: "\e896"; }
275 |
276 | .icon-minus:before { content: "\e897"; }
277 |
278 | .icon-moon:before { content: "\e898"; }
279 |
280 | .icon-monitor:before { content: "\e899"; }
281 |
282 | .icon-more-vertical:before { content: "\e89a"; }
283 |
284 | .icon-more-horizontal:before { content: "\e89b"; }
285 |
286 | .icon-move:before { content: "\e89c"; }
287 |
288 | .icon-music:before { content: "\e89d"; }
289 |
290 | .icon-navigation-2:before { content: "\e89e"; }
291 |
292 | .icon-navigation:before { content: "\e89f"; }
293 |
294 | .icon-octagon:before { content: "\e8a0"; }
295 |
296 | .icon-package:before { content: "\e8a1"; }
297 |
298 | .icon-pause-circle:before { content: "\e8a2"; }
299 |
300 | .icon-pause:before { content: "\e8a3"; }
301 |
302 | .icon-percent:before { content: "\e8a4"; }
303 |
304 | .icon-phone-call:before { content: "\e8a5"; }
305 |
306 | .icon-phone-forwarded:before { content: "\e8a6"; }
307 |
308 | .icon-phone-missed:before { content: "\e8a7"; }
309 |
310 | .icon-phone-off:before { content: "\e8a8"; }
311 |
312 | .icon-phone-incoming:before { content: "\e8a9"; }
313 |
314 | .icon-phone:before { content: "\e8aa"; }
315 |
316 | .icon-phone-outgoing:before { content: "\e8ab"; }
317 |
318 | .icon-pie-chart:before { content: "\e8ac"; }
319 |
320 | .icon-play-circle:before { content: "\e8ad"; }
321 |
322 | .icon-play:before { content: "\e8ae"; }
323 |
324 | .icon-plus-square:before { content: "\e8af"; }
325 |
326 | .icon-plus-circle:before { content: "\e8b0"; }
327 |
328 | .icon-plus:before { content: "\e8b1"; }
329 |
330 | .icon-pocket:before { content: "\e8b2"; }
331 |
332 | .icon-printer:before { content: "\e8b3"; }
333 |
334 | .icon-power:before { content: "\e8b4"; }
335 |
336 | .icon-radio:before { content: "\e8b5"; }
337 |
338 | .icon-repeat:before { content: "\e8b6"; }
339 |
340 | .icon-refresh-ccw:before { content: "\e8b7"; }
341 |
342 | .icon-rewind:before { content: "\e8b8"; }
343 |
344 | .icon-rotate-ccw:before { content: "\e8b9"; }
345 |
346 | .icon-refresh-cw:before { content: "\e8ba"; }
347 |
348 | .icon-rotate-cw:before { content: "\e8bb"; }
349 |
350 | .icon-save:before { content: "\e8bc"; }
351 |
352 | .icon-search:before { content: "\e8bd"; }
353 |
354 | .icon-server:before { content: "\e8be"; }
355 |
356 | .icon-scissors:before { content: "\e8bf"; }
357 |
358 | .icon-share-2:before { content: "\e8c0"; }
359 |
360 | .icon-share:before { content: "\e8c1"; }
361 |
362 | .icon-shield:before { content: "\e8c2"; }
363 |
364 | .icon-settings:before { content: "\e8c3"; }
365 |
366 | .icon-skip-back:before { content: "\e8c4"; }
367 |
368 | .icon-shuffle:before { content: "\e8c5"; }
369 |
370 | .icon-sidebar:before { content: "\e8c6"; }
371 |
372 | .icon-skip-forward:before { content: "\e8c7"; }
373 |
374 | .icon-slack:before { content: "\e8c8"; }
375 |
376 | .icon-slash:before { content: "\e8c9"; }
377 |
378 | .icon-smartphone:before { content: "\e8ca"; }
379 |
380 | .icon-square:before { content: "\e8cb"; }
381 |
382 | .icon-speaker:before { content: "\e8cc"; }
383 |
384 | .icon-star:before { content: "\e8cd"; }
385 |
386 | .icon-stop-circle:before { content: "\e8ce"; }
387 |
388 | .icon-sun:before { content: "\e8cf"; }
389 |
390 | .icon-sunrise:before { content: "\e8d0"; }
391 |
392 | .icon-tablet:before { content: "\e8d1"; }
393 |
394 | .icon-tag:before { content: "\e8d2"; }
395 |
396 | .icon-sunset:before { content: "\e8d3"; }
397 |
398 | .icon-target:before { content: "\e8d4"; }
399 |
400 | .icon-thermometer:before { content: "\e8d5"; }
401 |
402 | .icon-thumbs-up:before { content: "\e8d6"; }
403 |
404 | .icon-thumbs-down:before { content: "\e8d7"; }
405 |
406 | .icon-toggle-left:before { content: "\e8d8"; }
407 |
408 | .icon-toggle-right:before { content: "\e8d9"; }
409 |
410 | .icon-trash-2:before { content: "\e8da"; }
411 |
412 | .icon-trash:before { content: "\e8db"; }
413 |
414 | .icon-trending-up:before { content: "\e8dc"; }
415 |
416 | .icon-trending-down:before { content: "\e8dd"; }
417 |
418 | .icon-triangle:before { content: "\e8de"; }
419 |
420 | .icon-type:before { content: "\e8df"; }
421 |
422 | .icon-twitter:before { content: "\e8e0"; }
423 |
424 | .icon-upload:before { content: "\e8e1"; }
425 |
426 | .icon-umbrella:before { content: "\e8e2"; }
427 |
428 | .icon-upload-cloud:before { content: "\e8e3"; }
429 |
430 | .icon-unlock:before { content: "\e8e4"; }
431 |
432 | .icon-user-check:before { content: "\e8e5"; }
433 |
434 | .icon-user-minus:before { content: "\e8e6"; }
435 |
436 | .icon-user-plus:before { content: "\e8e7"; }
437 |
438 | .icon-user-x:before { content: "\e8e8"; }
439 |
440 | .icon-user:before { content: "\e8e9"; }
441 |
442 | .icon-users:before { content: "\e8ea"; }
443 |
444 | .icon-video-off:before { content: "\e8eb"; }
445 |
446 | .icon-video:before { content: "\e8ec"; }
447 |
448 | .icon-voicemail:before { content: "\e8ed"; }
449 |
450 | .icon-volume-x:before { content: "\e8ee"; }
451 |
452 | .icon-volume-2:before { content: "\e8ef"; }
453 |
454 | .icon-volume-1:before { content: "\e8f0"; }
455 |
456 | .icon-volume:before { content: "\e8f1"; }
457 |
458 | .icon-watch:before { content: "\e8f2"; }
459 |
460 | .icon-wifi:before { content: "\e8f3"; }
461 |
462 | .icon-x-square:before { content: "\e8f4"; }
463 |
464 | .icon-wind:before { content: "\e8f5"; }
465 |
466 | .icon-x:before { content: "\e8f6"; }
467 |
468 | .icon-x-circle:before { content: "\e8f7"; }
469 |
470 | .icon-zap:before { content: "\e8f8"; }
471 |
472 | .icon-zoom-in:before { content: "\e8f9"; }
473 |
474 | .icon-zoom-out:before { content: "\e8fa"; }
475 |
476 | .icon-command:before { content: "\e8fb"; }
477 |
478 | .icon-cloud:before { content: "\e8fc"; }
479 |
480 | .icon-hash:before { content: "\e8fd"; }
481 |
482 | .icon-headphones:before { content: "\e8fe"; }
483 |
484 | .icon-underline:before { content: "\e8ff"; }
485 |
486 | .icon-italic:before { content: "\e900"; }
487 |
488 | .icon-bold:before { content: "\e901"; }
489 |
490 | .icon-crop:before { content: "\e902"; }
491 |
492 | .icon-help-circle:before { content: "\e903"; }
493 |
494 | .icon-paperclip:before { content: "\e904"; }
495 |
496 | .icon-shopping-cart:before { content: "\e905"; }
497 |
498 | .icon-tv:before { content: "\e906"; }
499 |
500 | .icon-wifi-off:before { content: "\e907"; }
501 |
502 | .icon-minimize:before { content: "\e88d"; }
503 |
504 | .icon-maximize:before { content: "\e908"; }
505 |
506 | .icon-gitlab:before { content: "\e909"; }
507 |
508 | .icon-sliders:before { content: "\e90a"; }
509 |
510 | .icon-star-on:before { content: "\e90b"; }
511 |
512 | .icon-heart-on:before { content: "\e90c"; }
513 |
--------------------------------------------------------------------------------
/src/core/grid.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Grid System
3 | */
4 | @import '../variables/default';
5 |
6 | /* variables */
7 | $gutter-width: 8px;
8 | $outer-margin: 24px;
9 | $half-gutter-width: $gutter-width * .5;
10 |
11 | /* Extra small screen / Mobile */
12 | $screen-xs : 480px;
13 | $screen-xs-min : $screen-xs;
14 | $screen-xs-max : $screen-xs-min - 1;
15 |
16 | /* Small screen / Tablet */
17 | $screen-sm : 768px;
18 | $screen-sm-min : $screen-sm;
19 | $screen-sm-max : $screen-md - 1;
20 |
21 | /* Medium screen / Desktop */
22 | $screen-md : 992px;
23 | $screen-md-min : $screen-md;
24 | $screen-md-max : $screen-lg - 1;
25 |
26 | /* Large screen / Wide Desktop */
27 | $screen-lg : 1200px;
28 | $screen-lg-min : $screen-lg;
29 | // $screen-lg-max : $screen-lg-min - 1;
30 |
31 | $container-sm: 720px + $gutter-width;
32 | $container-md: 940px + $gutter-width;
33 | $container-lg: 1140px + $gutter-width;
34 |
35 | /**
36 | * Make Grid
37 | * Use for column 24
38 | * $baseWidth: 4.166667%;
39 | */
40 | // $baseWidth: 8.33333333%;
41 | $baseWidth: 4.166667%;
42 |
43 | .container-fluid, .container {
44 | margin-left: auto;
45 | margin-right: auto;
46 | }
47 |
48 | .container-fluid {
49 | padding-left: $outer-margin;
50 | padding-right: $outer-margin;
51 | }
52 |
53 | .no-gutter {
54 | padding-left: 0;
55 | padding-right: 0;
56 | }
57 |
58 | .row {
59 | display: flex;
60 | flex-direction: row;
61 | flex-wrap: wrap;
62 | margin-left: $half-gutter-width * -1;
63 | margin-right: $half-gutter-width * -1;
64 |
65 | &.reverse {
66 | flex-direction: row-reverse;
67 | }
68 | }
69 |
70 | .col.reverse {
71 | flex-direction: column-reverse;
72 | }
73 |
74 | /* Flex justify content */
75 | .flex {
76 | display: flex;
77 | }
78 |
79 | .flex-start {
80 | justify-content: flex-start;
81 | text-align: start;
82 | }
83 |
84 | .flex-center {
85 | justify-content: center;
86 | text-align: center;
87 | }
88 |
89 | .flex-end {
90 | justify-content: flex-end;
91 | text-align: end;
92 | }
93 |
94 | .flex-around {
95 | justify-content: space-around;
96 | }
97 |
98 | .flex-between {
99 | justify-content: space-between;
100 | }
101 |
102 | .flex-top {
103 | align-items: flex-start;
104 | }
105 |
106 | .flex-middle {
107 | align-items: center;
108 | }
109 |
110 | .flex-bottom {
111 | align-items: flex-end;
112 | }
113 |
114 | .flex-first {
115 | order: -1;
116 | }
117 |
118 | .flex-last {
119 | order: 1;
120 | }
121 |
122 | /* normal */
123 | .container {
124 | width: 100%;
125 | }
126 |
127 | .col, .col-offset-0 {
128 | flex: 0 0 auto;
129 | padding-left: $half-gutter-width;
130 | padding-right: $half-gutter-width;
131 | }
132 |
133 | @for $i from 1 through 24 {
134 | .col-#{$i}, .col-offset-#{$i} {
135 | flex: 0 0 auto;
136 | padding-left: $half-gutter-width;
137 | padding-right: $half-gutter-width;
138 |
139 | .no-gutter & {
140 | padding-left: 0;
141 | padding-right: 0;
142 | }
143 | }
144 | }
145 |
146 | .col {
147 | flex-grow: 1;
148 | flex-basis: 0;
149 | max-width: 100%;
150 | }
151 |
152 | .col-offset-0 {
153 | margin-left: 0;
154 | }
155 |
156 | @for $i from 1 through 24 {
157 | .col-#{$i} {
158 | flex-basis: $baseWidth * $i;
159 | max-width: $baseWidth * $i;
160 | }
161 | .col-offset-#{$i} {
162 | margin-left: $baseWidth * $i;
163 | }
164 | }
165 |
166 | /* screen xs */
167 | @media screen and (max-width: $screen-sm-max) {
168 | .col-xs, .col-xs-offset-0 {
169 | flex: 0 0 auto;
170 | padding-left: $half-gutter-width;
171 | padding-right: $half-gutter-width;
172 | }
173 |
174 | @for $i from 1 through 24 {
175 | .col-xs-#{$i}, .col-xs-offset-#{$i} {
176 | flex: 0 0 auto;
177 | padding-left: $half-gutter-width;
178 | padding-right: $half-gutter-width;
179 |
180 | .no-gutter & {
181 | padding-left: 0;
182 | padding-right: 0;
183 | }
184 | }
185 | }
186 |
187 | .col-xs {
188 | flex-grow: 1;
189 | flex-basis: 0;
190 | max-width: 100%;
191 | }
192 |
193 | .col-xs-offset-0 {
194 | margin-left: 0;
195 | }
196 |
197 | @for $i from 1 through 24 {
198 | .col-xs-#{$i} {
199 | flex-basis: $baseWidth * $i;
200 | max-width: $baseWidth * $i;
201 | }
202 | .col-xs-offset-#{$i} {
203 | margin-left: $baseWidth * $i;
204 | }
205 | }
206 | }
207 |
208 | /* screen sm */
209 | @media screen and (min-width: $screen-sm-min) {
210 | .container {
211 | width: $container-sm;
212 | }
213 |
214 | .col-sm, .col-sm-offset-0 {
215 | flex: 0 0 auto;
216 | padding-left: $half-gutter-width;
217 | padding-right: $half-gutter-width;
218 | }
219 |
220 | @for $i from 1 through 24 {
221 | .col-sm-#{$i}, .col-sm-offset-#{$i} {
222 | flex: 0 0 auto;
223 | padding-left: $half-gutter-width;
224 | padding-right: $half-gutter-width;
225 |
226 | .no-gutter & {
227 | padding-left: 0;
228 | padding-right: 0;
229 | }
230 | }
231 | }
232 |
233 | .col-sm {
234 | flex-grow: 1;
235 | flex-basis: 0;
236 | max-width: 100%;
237 | }
238 | .col-sm-offset-0 {
239 | margin-left: 0;
240 | }
241 |
242 | @for $i from 1 through 24 {
243 | .col-sm-#{$i} {
244 | flex-basis: $baseWidth * $i;
245 | max-width: $baseWidth * $i;
246 | }
247 | .col-sm-offset-#{$i} {
248 | margin-left: $baseWidth * $i;
249 | }
250 | }
251 | }
252 |
253 | /* screen md */
254 | @media screen and (min-width: $screen-md-min) {
255 | .container {
256 | width: $container-md;
257 | }
258 |
259 | .col-md, .col-md-offset-0 {
260 | flex: 0 0 auto;
261 | padding-left: $half-gutter-width;
262 | padding-right: $half-gutter-width;
263 | }
264 |
265 | @for $i from 1 through 24 {
266 | .col-md-#{$i}, .col-md-offset-#{$i} {
267 | flex: 0 0 auto;
268 | padding-left: $half-gutter-width;
269 | padding-right: $half-gutter-width;
270 |
271 | .no-gutter & {
272 | padding-left: 0;
273 | padding-right: 0;
274 | }
275 | }
276 | }
277 |
278 | .col-md {
279 | flex-grow: 1;
280 | flex-basis: 0;
281 | max-width: 100%;
282 | }
283 |
284 | .col-md-offset-0 {
285 | margin-left: 0;
286 | }
287 |
288 | @for $i from 1 through 24 {
289 | .col-md-#{$i} {
290 | flex-basis: $baseWidth * $i;
291 | max-width: $baseWidth * $i;
292 | }
293 | .col-md-offset-#{$i} {
294 | margin-left: $baseWidth * $i;
295 | }
296 | }
297 | }
298 |
299 | /* Screen lg */
300 | @media screen and (min-width: $screen-lg-min) {
301 | .container {
302 | width: $container-lg;
303 | }
304 |
305 | .col-lg, .col-lg-offset-0 {
306 | flex: 0 0 auto;
307 | padding-left: $half-gutter-width;
308 | padding-right: $half-gutter-width;
309 | }
310 |
311 | @for $i from 1 through 24 {
312 | .col-lg-#{$i}, .col-lg-offset-#{$i} {
313 | flex: 0 0 auto;
314 | padding-left: $half-gutter-width;
315 | padding-right: $half-gutter-width;
316 |
317 | .no-gutter & {
318 | padding-left: 0;
319 | padding-right: 0;
320 | }
321 | }
322 | }
323 |
324 | .col-lg {
325 | flex-grow: 1;
326 | flex-basis: 0;
327 | max-width: 100%;
328 | }
329 |
330 | @for $i from 1 through 24 {
331 | .col-lg-#{$i} {
332 | flex-basis: $baseWidth * $i;
333 | max-width: $baseWidth * $i;
334 | }
335 | .col-lg-offset-#{$i} {
336 | margin-left: $baseWidth * $i;
337 | }
338 | }
339 | }
340 |
--------------------------------------------------------------------------------
/src/core/index.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Core
3 | */
4 |
5 | @import './normalize';
6 | @import './base';
7 | @import './grid';
8 | @import './font';
9 |
--------------------------------------------------------------------------------
/src/core/normalize.scss:
--------------------------------------------------------------------------------
1 | /*! normalize.css v4.2.0 | MIT License | github.com/necolas/normalize.css */
2 |
3 | /**
4 | * 1. Change the default font family in all browsers (opinionated).
5 | * 2. Correct the line height in all browsers.
6 | * 3. Prevent adjustments of font size after orientation changes in IE and iOS.
7 | */
8 |
9 | /* Document
10 | ========================================================================== */
11 |
12 | html {
13 | font-family: sans-serif; /* 1 */
14 | line-height: 1.15; /* 2 */
15 | -ms-text-size-adjust: 100%; /* 3 */
16 | -webkit-text-size-adjust: 100%; /* 3 */
17 | }
18 |
19 | /* Sections
20 | ========================================================================== */
21 |
22 | /**
23 | * Remove the margin in all browsers (opinionated).
24 | */
25 |
26 | body {
27 | margin: 0;
28 | }
29 |
30 | /**
31 | * Add the correct display in IE 9-.
32 | */
33 |
34 | article,
35 | aside,
36 | footer,
37 | header,
38 | nav,
39 | section {
40 | display: block;
41 | }
42 |
43 | /**
44 | * Correct the font size and margin on `h1` elements within `section` and
45 | * `article` contexts in Chrome, Firefox, and Safari.
46 | */
47 |
48 | h1 {
49 | font-size: 2em;
50 | margin: 0.67em 0;
51 | }
52 |
53 | /* Grouping content
54 | ========================================================================== */
55 |
56 | /**
57 | * Add the correct display in IE 9-.
58 | * 1. Add the correct display in IE.
59 | */
60 |
61 | figcaption,
62 | figure,
63 | main { /* 1 */
64 | display: block;
65 | }
66 |
67 | /**
68 | * Add the correct margin in IE 8.
69 | */
70 |
71 | figure {
72 | margin: 1em 40px;
73 | }
74 |
75 | /**
76 | * 1. Add the correct box sizing in Firefox.
77 | * 2. Show the overflow in Edge and IE.
78 | */
79 |
80 | hr {
81 | box-sizing: content-box; /* 1 */
82 | height: 0; /* 1 */
83 | overflow: visible; /* 2 */
84 | }
85 |
86 | /**
87 | * 1. Correct the inheritance and scaling of font size in all browsers.
88 | * 2. Correct the odd `em` font sizing in all browsers.
89 | */
90 |
91 | pre {
92 | font-family: monospace, monospace; /* 1 */
93 | font-size: 1em; /* 2 */
94 | }
95 |
96 | /* Text-level semantics
97 | ========================================================================== */
98 |
99 | /**
100 | * 1. Remove the gray background on active links in IE 10.
101 | * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
102 | */
103 |
104 | a {
105 | background-color: transparent; /* 1 */
106 | -webkit-text-decoration-skip: objects; /* 2 */
107 | }
108 |
109 | /**
110 | * Remove the outline on focused links when they are also active or hovered
111 | * in all browsers (opinionated).
112 | */
113 |
114 | a:active,
115 | a:hover {
116 | outline-width: 0;
117 | }
118 |
119 | /**
120 | * 1. Remove the bottom border in Firefox 39-.
121 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
122 | */
123 |
124 | abbr[title] {
125 | border-bottom: none; /* 1 */
126 | text-decoration: underline; /* 2 */
127 | text-decoration: underline dotted; /* 2 */
128 | }
129 |
130 | /**
131 | * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
132 | */
133 |
134 | b,
135 | strong {
136 | font-weight: inherit;
137 | }
138 |
139 | /**
140 | * Add the correct font weight in Chrome, Edge, and Safari.
141 | */
142 |
143 | b,
144 | strong {
145 | font-weight: bolder;
146 | }
147 |
148 | /**
149 | * 1. Correct the inheritance and scaling of font size in all browsers.
150 | * 2. Correct the odd `em` font sizing in all browsers.
151 | */
152 |
153 | code,
154 | kbd,
155 | samp {
156 | font-family: monospace, monospace; /* 1 */
157 | font-size: 1em; /* 2 */
158 | }
159 |
160 | /**
161 | * Add the correct font style in Android 4.3-.
162 | */
163 |
164 | dfn {
165 | font-style: italic;
166 | }
167 |
168 | /**
169 | * Add the correct background and color in IE 9-.
170 | */
171 |
172 | mark {
173 | background-color: #ff0;
174 | color: #000;
175 | }
176 |
177 | /**
178 | * Add the correct font size in all browsers.
179 | */
180 |
181 | small {
182 | font-size: 80%;
183 | }
184 |
185 | /**
186 | * Prevent `sub` and `sup` elements from affecting the line height in
187 | * all browsers.
188 | */
189 |
190 | sub,
191 | sup {
192 | font-size: 75%;
193 | line-height: 0;
194 | position: relative;
195 | vertical-align: baseline;
196 | }
197 |
198 | sub {
199 | bottom: -0.25em;
200 | }
201 |
202 | sup {
203 | top: -0.5em;
204 | }
205 |
206 | /* Embedded content
207 | ========================================================================== */
208 |
209 | /**
210 | * Add the correct display in IE 9-.
211 | */
212 |
213 | audio,
214 | video {
215 | display: inline-block;
216 | }
217 |
218 | /**
219 | * Add the correct display in iOS 4-7.
220 | */
221 |
222 | audio:not([controls]) {
223 | display: none;
224 | height: 0;
225 | }
226 |
227 | /**
228 | * Remove the border on images inside links in IE 10-.
229 | */
230 |
231 | img {
232 | border-style: none;
233 | }
234 |
235 | /**
236 | * Hide the overflow in IE.
237 | */
238 |
239 | svg:not(:root) {
240 | overflow: hidden;
241 | }
242 |
243 | /* Forms
244 | ========================================================================== */
245 |
246 | /**
247 | * 1. Change the font styles in all browsers (opinionated).
248 | * 2. Remove the margin in Firefox and Safari.
249 | */
250 |
251 | button,
252 | input,
253 | optgroup,
254 | select,
255 | textarea {
256 | font-family: sans-serif; /* 1 */
257 | font-size: 100%; /* 1 */
258 | line-height: 1.15; /* 1 */
259 | margin: 0; /* 2 */
260 | }
261 |
262 | /**
263 | * Show the overflow in IE.
264 | * 1. Show the overflow in Edge.
265 | */
266 |
267 | button,
268 | input { /* 1 */
269 | overflow: visible;
270 | }
271 |
272 | /**
273 | * Remove the inheritance of text transform in Edge, Firefox, and IE.
274 | * 1. Remove the inheritance of text transform in Firefox.
275 | */
276 |
277 | button,
278 | select { /* 1 */
279 | text-transform: none;
280 | }
281 |
282 | /**
283 | * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
284 | * controls in Android 4.
285 | * 2. Correct the inability to style clickable types in iOS and Safari.
286 | */
287 |
288 | button,
289 | html [type="button"], /* 1 */
290 | [type="reset"],
291 | [type="submit"] {
292 | -webkit-appearance: button; /* 2 */
293 | }
294 |
295 | /**
296 | * Remove the inner border and padding in Firefox.
297 | */
298 |
299 | button::-moz-focus-inner,
300 | [type="button"]::-moz-focus-inner,
301 | [type="reset"]::-moz-focus-inner,
302 | [type="submit"]::-moz-focus-inner {
303 | border-style: none;
304 | padding: 0;
305 | }
306 |
307 | /**
308 | * Restore the focus styles unset by the previous rule.
309 | */
310 |
311 | button:-moz-focusring,
312 | [type="button"]:-moz-focusring,
313 | [type="reset"]:-moz-focusring,
314 | [type="submit"]:-moz-focusring {
315 | outline: 1px dotted ButtonText;
316 | }
317 |
318 | /**
319 | * Change the border, margin, and padding in all browsers (opinionated).
320 | */
321 |
322 | fieldset {
323 | border: 1px solid #c0c0c0;
324 | margin: 0 2px;
325 | padding: 0.35em 0.625em 0.75em;
326 | }
327 |
328 | /**
329 | * 1. Correct the text wrapping in Edge and IE.
330 | * 2. Correct the color inheritance from `fieldset` elements in IE.
331 | * 3. Remove the padding so developers are not caught out when they zero out
332 | * `fieldset` elements in all browsers.
333 | */
334 |
335 | legend {
336 | box-sizing: border-box; /* 1 */
337 | color: inherit; /* 2 */
338 | display: table; /* 1 */
339 | max-width: 100%; /* 1 */
340 | padding: 0; /* 3 */
341 | white-space: normal; /* 1 */
342 | }
343 |
344 | /**
345 | * 1. Add the correct display in IE 9-.
346 | * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
347 | */
348 |
349 | progress {
350 | display: inline-block; /* 1 */
351 | vertical-align: baseline; /* 2 */
352 | }
353 |
354 | /**
355 | * Remove the default vertical scrollbar in IE.
356 | */
357 |
358 | textarea {
359 | overflow: auto;
360 | }
361 |
362 | /**
363 | * 1. Add the correct box sizing in IE 10-.
364 | * 2. Remove the padding in IE 10-.
365 | */
366 |
367 | [type="checkbox"],
368 | [type="radio"] {
369 | box-sizing: border-box; /* 1 */
370 | padding: 0; /* 2 */
371 | }
372 |
373 | /**
374 | * Correct the cursor style of increment and decrement buttons in Chrome.
375 | */
376 |
377 | [type="number"]::-webkit-inner-spin-button,
378 | [type="number"]::-webkit-outer-spin-button {
379 | height: auto;
380 | }
381 |
382 | /**
383 | * 1. Correct the odd appearance in Chrome and Safari.
384 | * 2. Correct the outline style in Safari.
385 | */
386 |
387 | [type="search"] {
388 | -webkit-appearance: textfield; /* 1 */
389 | outline-offset: -2px; /* 2 */
390 | }
391 |
392 | /**
393 | * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
394 | */
395 |
396 | [type="search"]::-webkit-search-cancel-button,
397 | [type="search"]::-webkit-search-decoration {
398 | -webkit-appearance: none;
399 | }
400 |
401 | /**
402 | * 1. Correct the inability to style clickable types in iOS and Safari.
403 | * 2. Change font properties to `inherit` in Safari.
404 | */
405 |
406 | ::-webkit-file-upload-button {
407 | -webkit-appearance: button; /* 1 */
408 | font: inherit; /* 2 */
409 | }
410 |
411 | /* Interactive
412 | ========================================================================== */
413 |
414 | /*
415 | * Add the correct display in IE 9-.
416 | * 1. Add the correct display in Edge, IE, and Firefox.
417 | */
418 |
419 | details, /* 1 */
420 | menu {
421 | display: block;
422 | }
423 |
424 | /*
425 | * Add the correct display in all browsers.
426 | */
427 |
428 | summary {
429 | display: list-item;
430 | }
431 |
432 | /* Scripting
433 | ========================================================================== */
434 |
435 | /**
436 | * Add the correct display in IE 9-.
437 | */
438 |
439 | canvas {
440 | display: inline-block;
441 | }
442 |
443 | /**
444 | * Add the correct display in IE.
445 | */
446 |
447 | template {
448 | display: none;
449 | }
450 |
451 | /* Hidden
452 | ========================================================================== */
453 |
454 | /**
455 | * Add the correct display in IE 10-.
456 | */
457 |
458 | [hidden] {
459 | display: none;
460 | }
461 |
--------------------------------------------------------------------------------
/src/fonts/aticon.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AT-UI/at-ui-style/1751c3eab9a8701b40f02c09351341e0e6abd993/src/fonts/aticon.eot
--------------------------------------------------------------------------------
/src/fonts/aticon.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AT-UI/at-ui-style/1751c3eab9a8701b40f02c09351341e0e6abd993/src/fonts/aticon.ttf
--------------------------------------------------------------------------------
/src/fonts/aticon.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AT-UI/at-ui-style/1751c3eab9a8701b40f02c09351341e0e6abd993/src/fonts/aticon.woff
--------------------------------------------------------------------------------
/src/fonts/feather.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AT-UI/at-ui-style/1751c3eab9a8701b40f02c09351341e0e6abd993/src/fonts/feather.eot
--------------------------------------------------------------------------------
/src/fonts/feather.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AT-UI/at-ui-style/1751c3eab9a8701b40f02c09351341e0e6abd993/src/fonts/feather.ttf
--------------------------------------------------------------------------------
/src/fonts/feather.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AT-UI/at-ui-style/1751c3eab9a8701b40f02c09351341e0e6abd993/src/fonts/feather.woff
--------------------------------------------------------------------------------
/src/index.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * AT-UI
3 | */
4 |
5 | /* Mixin */
6 | @import './mixins/index.scss';
7 |
8 | /* Variables */
9 | @import './variables/index.scss';
10 |
11 | /* Core */
12 | @import './core/index.scss';
13 |
14 | /* Components */
15 | @import './components/index.scss';
16 |
--------------------------------------------------------------------------------
/src/mixins/index.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Mixins
3 | */
4 |
5 | /* library */
6 | @import './lib/bem';
7 | @import './lib/clearfix';
8 | @import './lib/ellipsis';
9 | @import './lib/hide-text';
10 | @import './lib/size';
11 | @import './lib/tint';
12 | @import './lib/shade';
13 |
--------------------------------------------------------------------------------
/src/mixins/lib/bem.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * BEM Mixins
3 | * From https://github.com/alphasights/paint/blob/812fb33c54a50277071f547a3e191cf5fe4fcb3f/styles/tools/_bem.scss
4 | */
5 |
6 | $bem-element-separator: '__';
7 | $bem-modifier-separator: '--';
8 |
9 | @function _bem-selector-to-string($selector) {
10 | $selector: inspect($selector);
11 | $dot-index: str-index($selector, '.') + 1;
12 | $selector: str-slice($selector, $dot-index, -1);
13 |
14 | @return $selector;
15 | }
16 |
17 | @function _bem-selector-has-modifier($selector) {
18 | $selector: _bem-selector-to-string($selector);
19 |
20 | @if str-index($selector, $bem-modifier-separator) or str-index($selector, ':') {
21 | @return true;
22 | } @else {
23 | @return false;
24 | }
25 | }
26 |
27 | @function _bem-get-block-name($selector) {
28 | $selector: _bem-selector-to-string($selector);
29 | $modifier-separator: $bem-modifier-separator;
30 |
31 | @if str-index($selector, ':') {
32 | $modifier-separator: ':';
33 | }
34 |
35 | $modifier-start: str-index($selector, $modifier-separator) - 1;
36 |
37 | @return str-slice($selector, 0, $modifier-start);
38 | }
39 |
40 | @mixin b($block) {
41 | .#{$block} {
42 | @content;
43 | }
44 | }
45 |
46 | @mixin e($elements) {
47 | $selector: &;
48 |
49 | @if _bem-selector-has-modifier($selector) {
50 | $block: _bem-get-block-name($selector);
51 |
52 | @at-root {
53 | #{$selector} {
54 | @each $element in $elements {
55 | .#{$block + $bem-element-separator + $element} {
56 | @content;
57 | }
58 | }
59 | }
60 | }
61 | } @else {
62 | @at-root {
63 | @each $element in $elements {
64 | #{$selector + $bem-element-separator + $element} {
65 | @content;
66 | }
67 | }
68 | }
69 | }
70 | }
71 |
72 | @mixin m($modifier) {
73 | @at-root {
74 | #{&}#{$bem-modifier-separator + $modifier} {
75 | @content;
76 | }
77 | }
78 | }
79 |
--------------------------------------------------------------------------------
/src/mixins/lib/clearfix.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * @example scss
3 | *
4 | * .element {
5 | * @include clearfix;
6 | * }
7 | *
8 | * // CSS Output
9 | * .element::after {
10 | * clear: both;
11 | * content: '';
12 | * display: block;
13 | * }
14 | */
15 |
16 | @mixin clearfix {
17 | &::after {
18 | clear: both;
19 | content: '';
20 | display: block;
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/src/mixins/lib/ellipsis.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Truncate text and add an ellipsis to represent overflow
3 | *
4 | * @param {number} $width [Default 100%]
5 | * @param {string} $display [Default inline-block] [Sets the display-value of the element]
6 | */
7 | @mixin ellipsis(
8 | $width: 100%,
9 | $display: inline-block
10 | ) {
11 | display: $display;
12 | max-width: $width;
13 | overflow: hidden;
14 | text-overflow: ellipsis;
15 | white-space: nowrap;
16 | word-wrap: normal;
17 | }
18 |
--------------------------------------------------------------------------------
/src/mixins/lib/hide-text.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Hides text to show a background image(a logo, for example)
3 | *
4 | * @example
5 | * .element {
6 | * @include hide-text;
7 | * }
8 | *
9 | * // CSS Output
10 | * .element {
11 | * overflow: hidden;
12 | * text-indent: 101%;
13 | * white-space: nowrap;
14 | * }
15 | */
16 |
17 | @mixin hide-text {
18 | overflow: hidden;
19 | text-indent: 101%;
20 | white-space: nowrap;
21 | }
22 |
--------------------------------------------------------------------------------
/src/mixins/lib/shade.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Mixes a color with black. It's different from darken()
3 | *
4 | * @param {color} $color
5 | * @param {number (percentage)} $percent [The amount of black to be mixed in]
6 | * @return {color}
7 | *
8 | * @example
9 | * .element {
10 | * background-color: shade(#ffbb52, 60%);
11 | * }
12 | *
13 | * // CSS Output
14 | * .element {
15 | * background-color: #664a20;
16 | * }
17 | */
18 |
19 | @function shade(
20 | $color,
21 | $percent
22 | ) {
23 | @return mix(#000, $color, $percent);
24 | }
25 |
--------------------------------------------------------------------------------
/src/mixins/lib/size.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Set width and height in a single statement
3 | *
4 | * @param {number (with unit) | string} $width
5 | * @param {number (with unit) | string} $height [default $width]
6 | */
7 |
8 | @mixin size(
9 | $width,
10 | $height: $width
11 | ) {
12 | width: $width;
13 | height: $height;
14 | }
15 |
--------------------------------------------------------------------------------
/src/mixins/lib/tint.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Mixes a color with white. It's different from lighten()
3 | *
4 | * @param {color} $color
5 | * @param {number (percentage)} $percent [The amout of white to be mixed in]
6 | * @return {color}
7 | *
8 | * @example
9 | * .element {
10 | * background-color: tint(#6ecaa6 , 40%);
11 | * }
12 | *
13 | * // CSS Output
14 | * .element {
15 | * background-color: #a8dfc9;
16 | * }
17 | */
18 |
19 | @function tint(
20 | $color,
21 | $percent
22 | ) {
23 | @return mix(#FFF, $color, $percent);
24 | }
25 |
--------------------------------------------------------------------------------
/src/variables/default.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Default Variables
3 | */
4 | @import '../mixins/index.scss';
5 |
6 | /* Prefix */
7 | $css-prefix: at;
8 |
9 | /* The Color of O2Team Brand */
10 | $brand-color : #6190E8;
11 | $brand-color-light : #78A4F4;
12 | $brand-color-dark : #346FC2;
13 |
14 | /* Color */
15 | $color-normal : #6190E8;
16 | $color-primary : #6190E8;
17 | $color-success : #13CE66;
18 | $color-error : #FF4949;
19 | $color-warning : #FFC82C;
20 | $color-info : #78A4FA;
21 | $color-white : #FFF;
22 |
23 | /* Color PalettC */
24 | $brand-blue-50 : #ECF2FC;
25 | $brand-blue-100 : #D0DEF8;
26 | $brand-blue-200 : #B0C8F4;
27 | $brand-blue-300 : #90B1EF;
28 | $brand-blue-400 : #79A1EB;
29 | $brand-blue-500 : #6190E8;
30 | $brand-blue-600 : #5988E5;
31 | $brand-blue-700 : #4F7DE2;
32 | $brand-blue-800 : #4573DE;
33 | $brand-blue-900 : #3361D8;
34 |
35 | $green-50 : #E3F9ED;
36 | $green-100 : #B8F0D1;
37 | $green-200 : #89E7B3;
38 | $green-300 : #5ADD94;
39 | $green-400 : #36D57D;
40 | $green-500 : #13CE66;
41 | $green-600 : #11C95E;
42 | $green-700 : #0EC253;
43 | $green-800 : #0BBC49;
44 | $green-900 : #06B038;
45 |
46 | $red-50 : #FFE9E9;
47 | $red-100 : #FFC8C8;
48 | $red-200 : #FFA4A4;
49 | $red-300 : #FF8080;
50 | $red-400 : #FF6464;
51 | $red-500 : #FF4949;
52 | $red-600 : #FF4242;
53 | $red-700 : #FF3939;
54 | $red-800 : #FF3131;
55 | $red-900 : #FF2121;
56 |
57 | $yellow-50 : #FFF8E6;
58 | $yellow-100 : #FFEFC0;
59 | $yellow-200 : #FFE496;
60 | $yellow-300 : #FFD96B;
61 | $yellow-400 : #FFD04C;
62 | $yellow-500 : #FFC82C;
63 | $yellow-600 : #FFC227;
64 | $yellow-700 : #FFBB21;
65 | $yellow-800 : #FFB41B;
66 | $yellow-900 : #FFA710;
67 |
68 | $blue-50 : #EFF4FE;
69 | $blue-100 : #D7E4FE;
70 | $blue-200 : #BCD2FD;
71 | $blue-300 : #A1BFFC;
72 | $blue-400 : #8CB2FB;
73 | $blue-500 : #78A4FA;
74 | $blue-600 : #709CF9;
75 | $blue-700 : #6592F9;
76 | $blue-800 : #5B89F8;
77 | $blue-900 : #4878F6;
78 |
79 | $grey-50 : #F7F7F7;
80 | $grey-100 : #ECECEC;
81 | $grey-200 : #DFDFDF;
82 | $grey-300 : #D2D2D2;
83 | $grey-400 : #C9C9C9;
84 | $grey-500 : #BFBFBF;
85 | $grey-600 : #B9B9B9;
86 | $grey-700 : #B1B1B1;
87 | $grey-800 : #A9A9A9;
88 | $grey-900 : #9B9B9B;
89 |
90 | $black-50 : #E6E8EB;
91 | $black-100 : #C0C6CE;
92 | $black-200 : #96A0AD;
93 | $black-300 : #6B798C;
94 | $black-400 : #4C5D73;
95 | $black-500 : #2C405A;
96 | $black-600 : #273A52;
97 | $black-700 : #213248;
98 | $black-800 : #1B2A3F;
99 | $black-900 : #101C2E;
100 |
101 | $text-color : #3F536E;
102 | $title-color : #2C405A;
103 |
104 | $border-color-gray : #CCC;
105 | $border-color-base : #C5D9E8;
106 | $border-color-split : tint($border-color-base, 20%);
107 | $border-color-light : tint($border-color-base, 30%);
108 | $border-color-lighter : tint($border-color-base, 50%);
109 | $border-color-lightest : tint($border-color-base, 80%);
110 |
111 | $bg-color : $color-white;
112 | $bg-color-base : #FAFBFC;
113 | $bg-color-light : #ECF5FD;
114 | $bg-color-lighter : tint($bg-color-light, 50%);
115 | $bg-color-gray : #f7f7f7;
116 |
117 | /* Assistant Color */
118 | $roof-color : #C2ABC7;
119 | $curtain-color : #F0D0D5;
120 | $door-color : #F1E4ED;
121 | $wall-color : #EEF0F0;
122 |
123 | /* Border */
124 | $border-radius-base : 4px;
125 | $border-radius-sm : 4px;
126 |
127 | /* Font */
128 | $font-family : -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
129 | $code-family : Consolas, Menlo, Courier, monospace;
130 |
131 | $font-size-smest : 11px;
132 | $font-size-smer : 12px;
133 | $font-size-sm : 13px;
134 | $font-size-base : 14px;
135 | $font-size-normal : 16px;
136 | $font-size-lg : 18px;
137 | $font-size-lger : 20px;
138 |
139 | $line-height-base : 1.5;
140 | $line-height-computed : floor($font-size-base * $line-height-base);
141 |
142 | /* Link */
143 | $link-color : $brand-blue-500;
144 | $link-hover-color : $brand-blue-400;
145 | $link-active-color : $brand-blue-700;
146 | $link-disabled-color : $grey-500;
147 | $link-hover-decoration : none;
148 |
149 | /* Disabled cursor */
150 | $cursor-disabled : not-allowed;
151 |
152 | /* Shadow */
153 | $shadow-color : rgba(100, 100, 100, .2);
154 | $shadow-1px-up : 0 -1px 6px $shadow-color;
155 | $shadow-1px-down : 0 1px 6px $shadow-color;
156 | $shadow-1px-left : -1px 0 6px $shadow-color;
157 | $shadow-1px-right : 1px 0 6px $shadow-color;
158 |
159 | /* Button */
160 | $btn-default-color : $text-color;
161 | $btn-default-bg : $color-white;
162 | $btn-default-bg-hover : $border-color-lightest;
163 | $btn-default-bg-active : $border-color-lighter;
164 | $btn-default-border : $border-color-base;
165 |
166 | $btn-primary-bg : $brand-blue-500;
167 | $btn-primary-border : $brand-blue-500;
168 |
169 | $btn-success-bg : $green-500;
170 | $btn-success-border : $green-500;
171 |
172 | $btn-error-bg : $red-500;
173 | $btn-error-border : $red-500;
174 |
175 | $btn-warning-bg : $yellow-500;
176 | $btn-warning-border : $yellow-500;
177 |
178 | $btn-info-bg : $blue-500;
179 | $btn-info-border : $blue-500;
180 |
181 | $btn-text-border : $brand-blue-500;
182 |
183 | $btn-disabled-color : $grey-300;
184 | $btn-disabled-bg : $grey-50;
185 | $btn-disabled-border : $grey-100;
186 |
187 | $btn-font-weight : 500;
188 |
189 | $btn-font-size-smer : 10px;
190 | $btn-font-size-sm : 11px;
191 | $btn-font-size-base : 12px;
192 | $btn-font-size-md : 14px;
193 | $btn-font-size-lg : 16px;
194 |
195 | $btn-padding-smer : 2px 10px;
196 | $btn-padding-sm : 4px 12px;
197 | $btn-padding-base : 6px 16px;
198 | $btn-padding-md : 8px 16px;
199 | $btn-padding-lg : 10px 18px;
200 |
201 | $btn-circle-size-smer : 24px;
202 | $btn-circle-size-sm : 28px;
203 | $btn-circle-size : 32px;
204 | $btn-circle-size-lg : 40px;
205 |
206 | /* Tag */
207 | $tag-bg-color : $grey-50;
208 | $tag-border-color : $grey-200;
209 |
210 | /* Checkbox */
211 | $checkbox-size : 16px;
212 | $checkbox-font-size : $font-size-smer;
213 |
214 | $checkbox-border-c : $border-color-base;
215 | $checkbox-border-c-hover : $brand-blue-400;
216 | $checkbox-border-c-checked : $brand-blue-400;
217 | $checkbox-border-c-disabled : $grey-100;
218 | $checkbox-bg-c-disabled : $grey-50;
219 | $checkbox-label-c-disabled : $grey-700;
220 |
221 | /* Input */
222 | $input-font-size-sm : 11px;
223 | $input-font-size-base : 12px;
224 | $input-font-size-lg : 14px;
225 |
226 | $input-padding-sm : 4px 10px;
227 | $input-padding-base : 6px 12px;
228 | $input-padding-lg : 8px 14px;
229 |
230 | $input-font-color : $text-color;
231 | $input-font-color-disabled : $grey-700;
232 |
233 | $input-border-color : $border-color-base;
234 | $input-border-color-hover : $brand-blue-400;
235 | $input-border-color-focus : $brand-blue-400;
236 | $input-border-color-disabled : $grey-100;
237 | $input-border-color-success : $color-success;
238 | $input-border-color-error : $color-error;
239 | $input-border-color-warning : $color-warning;
240 | $input-border-color-info : $color-info;
241 |
242 | $input-bg-color : $color-white;
243 | $input-bg-color-disabled : $grey-50;
244 |
245 | $input-icon-color : $border-color-base;
246 | $input-icon-font-size : 15px;
247 |
248 | $input-placeholder-color : $grey-400;
249 | $input-placeholder-color-disabled : $grey-400;
250 |
251 | $input-group-font-color : $grey-900;
252 | $input-group-bg-color : $grey-50;
253 | $input-group-bg-color-hover : $grey-100;
254 | $input-group-bg-color-active : $grey-200;
255 |
256 | /* InputNumber */
257 | $inputnumber-min-width : 80px;
258 | $inputnumber-height-sm : 28px;
259 | $inputnumber-height-base : 32px;
260 | $inputnumber-height-lg : 36px;
261 |
262 | $inputnumber-font-color : $input-font-color;
263 |
264 | $inputnumber-bg-color : $input-bg-color;
265 | $inputnumber-bg-color-disabled : $input-bg-color-disabled;
266 |
267 | $inputnumber-border-radius : $border-radius-base;
268 | $inputnumber-border-color : $input-border-color;
269 | $inputnumber-border-color-hover : $input-border-color-hover;
270 | $inputnumber-border-color-disabled : $input-border-color-disabled;
271 |
272 | $inputnumber-padding-sm : 0 8px;
273 | $inputnumber-padding-base : 0 8px;
274 | $inputnumber-padding-lg : 0 8px;
275 |
276 | $inputnumber-handler-width : 22px;
277 | $inputnumber-handler-border-color : $grey-200;
278 | $inputnumber-handler-bg-color-active : $grey-100;
279 |
280 | $inputnumber-handler-font-color : $grey-500;
281 | $inputnumber-handler-font-color-hover : $grey-900;
282 |
283 | $inputnumber-handler-font-size-sm : 9px;
284 | $inputnumber-handler-font-size-base : 10px;
285 | $inputnumber-handler-font-size-lg : 11px;
286 |
287 | $inputnumber-handler-ele-height-sm : 14px;
288 | $inputnumber-handler-ele-height-base : 16px;
289 | $inputnumber-handler-ele-height-lg : 18px;
290 |
291 | $inputnumber-handler-ele-height-sm-hover : 16px;
292 | $inputnumber-handler-ele-height-base-hover : 18px;
293 | $inputnumber-handler-ele-height-lg-hover : 20px;
294 |
295 | $inputnumber-handler-ele-font-color-disabled : $grey-100;
296 |
297 | /* Switch */
298 | $switch-min-width-sm : 32px;
299 | $switch-min-width-base : 40px;
300 | $switch-min-width-lg : 48px;
301 |
302 | $switch-height-sm : 16px;
303 | $switch-height-base : 20px;
304 | $switch-height-lg : 24px;
305 |
306 | $switch-border-radius-sm : 16px;
307 | $switch-border-radius-base : 20px;
308 | $switch-border-radius-lg : 24px;
309 |
310 | $switch-border-color : $grey-500;
311 | $switch-border-color-checked : $brand-blue-400;
312 | $switch-border-color-disabled : $grey-100;
313 |
314 | $switch-bg-color : $grey-500;
315 | $switch-bg-color-checked : $brand-blue-400;
316 | $switch-bg-color-disabled : $grey-100;
317 |
318 | $switch-font-color : $color-white;
319 | $switch-font-color-disabled : $grey-300;
320 |
321 | $switch-font-size-sm : $font-size-smest;
322 | $switch-font-size-base : $font-size-smer;
323 | $switch-font-size-lg : $font-size-sm;
324 |
325 | $switch-circle-size-sm : 12px;
326 | $switch-circle-size-base : 16px;
327 | $switch-circle-size-lg : 20px;
328 |
329 | $switch-circle-bg-color : $color-white;
330 | $switch-circle-bg-color-disabled : $grey-400;
331 |
332 | /* Slider */
333 | $slider-bar-height : 4px;
334 | $slider-margin : 8px 0;
335 |
336 | $slider-bar-bg-color : $brand-blue-400;
337 | $slider-bar-bg-color-disabled : $grey-400;
338 | $slider-track-bg-color : $grey-100;
339 | $slider-bar-border-radius : 2px;
340 |
341 | $slider-dot-color : $brand-blue-400;
342 | $slider-dot-color-hover : $brand-blue-600;
343 | $slider-dot-color-disabled : $grey-300;
344 | $slider-dot-size : 12px;
345 | $slider-dot-wrapper-size : $slider-dot-size;
346 | $slider-dot-wrapper-offset : -6px;
347 |
348 | /* Textarea */
349 | $textarea-padding : 6px 8px;
350 |
351 | /* Alert */
352 | $alert-padding : 8px 16px;
353 | $alert-padding-lg : 14px 16px;
354 | $alert-border-radius : $border-radius-base;
355 |
356 | $alert-text-color-success : #53664A;
357 | $alert-text-color-error : #AD3430;
358 | $alert-text-color-warning : #7F6128;
359 | $alert-text-color-info : #3B688C;
360 |
361 | $alert-message-font-size : $font-size-sm;
362 | $alert-description-font-size : $font-size-smer;
363 | $alert-close-font-size : $font-size-smer;
364 |
365 | $alert-icon-font-size : 15px;
366 | $alert-icon-font-size-lg : 28px;
367 |
368 | $alert-icon-color-success : #7D9970;
369 | $alert-icon-color-error : #FA4C46;
370 | $alert-icon-color-warning : #CC9B3F;
371 | $alert-icon-color-info : #66B3F3;
372 |
373 | $alert-bg-color-success : $green-50;
374 | $alert-bg-color-error : $red-50;
375 | $alert-bg-color-warning : $yellow-50;
376 | $alert-bg-color-info : $blue-50;
377 |
378 | $alert-border-color-success : $green-100;
379 | $alert-border-color-error : $red-100;
380 | $alert-border-color-warning : $yellow-100;
381 | $alert-border-color-info : $blue-100;
382 |
383 | /* Badge */
384 | $badge-height : 18px;
385 | $badge-padding : 0 6px;
386 | $badge-border-radius : $badge-height / 2;
387 | $badge-font-size : $font-size-smer;
388 | $badge-font-color : $color-white;
389 |
390 | $badge-bg-color : $red-500;
391 | $badge-bg-color-success : $green-500;
392 | $badge-bg-color-warning : $yellow-500;
393 | $badge-bg-color-info : $blue-500;
394 |
395 | $badge-dot-size : 10px;
396 |
397 | /* Card */
398 | $card-bg-color : $color-white;
399 | $card-border-color : $grey-100;
400 | $card-border-color-hover : $grey-50;
401 | $card-border-radius : $border-radius-base;
402 | $card-head-height : 48px;
403 |
404 | /* Collapse */
405 | $collapse-border-color : $grey-200;
406 | $collapse-border-radius : $border-radius-base;
407 |
408 | $collapse-header-bg-color : $grey-50;
409 | $collapse-header-text-color : $title-color;
410 | $collapse-header-text-color-disabled : $grey-400;
411 |
412 | $collapse-icon-size : $font-size-smer;
413 | $collapse-icon-color : tint($title-color, 50%);
414 |
415 | $collapse-body-text-color : $text-color;
416 | $collapse-body-bg-color : $color-white;
417 |
418 | /* Loading Bar */
419 | $loading-bar-bg-color-success : $color-primary;
420 | $loading-bar-bg-color-error : $color-error;
421 |
422 | /* Modal */
423 | $modal-initial-top : 100px;
424 | $modal-bg-color : $color-white;
425 | $modal-mask-bg-color : rgba(0, 0, 0, .5);
426 | $modal-section-border-color : $grey-100;
427 |
428 | $modal-header-padding : 12px 16px;
429 | $modal-header-font-size : $font-size-base;
430 | $modal-close-font-size : $font-size-sm;
431 | $modal-icon-font-size : 32px;
432 |
433 | $modal-body-padding : 16px;
434 | $modal-body-font-size : $font-size-sm;
435 |
436 | $modal-footer-padding : 12px 16px;
437 |
438 | $modal-icon-color-success : $green-300;
439 | $modal-icon-color-error : $red-300;
440 | $modal-icon-color-warning : $yellow-300;
441 | $modal-icon-color-info : $blue-300;
442 |
443 | /* Message */
444 | $message-padding : 6px 16px;
445 | $message-font-size : $font-size-sm;
446 | $message-bg-color : $color-white;
447 | $message-box-shadow : 0 1px 8px rgba(0, 0, 0, .15);
448 |
449 | $message-icon-color-success : $green-300;
450 | $message-icon-color-error : $red-300;
451 | $message-icon-color-warning : $yellow-300;
452 | $message-icon-color-info : $blue-300;
453 | $message-icon-color-loading : $blue-300;
454 |
455 | /* Radio */
456 | $radio-size : 16px;
457 | $radio-dot-size : 8px;
458 | $radio-font-size : $font-size-smer;
459 |
460 | $radio-border-c-hover : $brand-blue-400;
461 | $radio-border-c-checked : $brand-blue-400;
462 | $radio-border-c-disabled : $grey-100;
463 | $radio-bg-c-disabled : $grey-50;
464 | $radio-dot-c-disabled : $grey-300;
465 |
466 | /* Rate */
467 | $rate-icon-font-size : 20px;
468 | $rate-icon-color : $grey-100;
469 | $rate-icon-color-on : $yellow-500;
470 | $rate-text-font-size : $font-size-smer;
471 |
472 | /* Select */
473 | $select-font-size-sm : $font-size-smest;
474 | $select-font-size-base : $font-size-smer;
475 | $select-font-size-lg : $font-size-base;
476 |
477 | $select-bg-color : $color-white;
478 | $select-font-color : $text-color;
479 |
480 | $select-border-c-hover : $brand-blue-400;
481 | $select-border-c-checked : $brand-blue-400;
482 | $select-border-c-disabled : $grey-100;
483 | $select-bg-c-disabled : $grey-50;
484 |
485 | $select-selection-bg-color : $color-white;
486 | $select-selection-bg-color-disabled : tint($border-color-base, 70%);
487 |
488 | $select-padding-sm : 0 24px 0 8px;
489 | $select-padding-base : 0 24px 0 8px;
490 | $select-padding-lg : 0 24px 0 8px;
491 |
492 | $select-selection-height-sm : 24px;
493 | $select-selection-height-base : 26px;
494 | $select-selection-height-lg : 30px;
495 |
496 | /* Select Dropdown */
497 | $select-dropdown-font-size-sm : $font-size-smest;
498 | $select-dropdown-font-size-base : $font-size-smer;
499 | $select-dropdown-font-size-lg : $font-size-sm;
500 |
501 | $select-dropdown-bg-color : $color-white;
502 | $select-dropdown-height : 200px;
503 |
504 | $dropdown-option-padding-base : 6px 12px;
505 | $dropdown-option-bg-c-hover : $brand-blue-50;
506 | $dropdown-option-bg-c-selected : $grey-50;
507 |
508 | $option-group-font-c : $grey-500;
509 |
510 | /* Notification */
511 | $notification-width : 320px;
512 | $notification-padding : 8px 16px;
513 | $notification-padding-lg : 12px 16px;
514 | $notification-shadow : 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
515 | $notification-text-color : $text-color;
516 | $notification-bg-color : $color-white;
517 |
518 | $notification-font-size-lg : 28px;
519 | $notification-title-font-size : $font-size-sm;
520 | $notification-message-font-size : $font-size-smer;
521 |
522 | $notification-icon-color : $text-color;
523 | $notification-icon-font-size : $font-size-sm;
524 | $notification-icon-font-size-lg : 24px;
525 | $notification-close-color : $grey-300;
526 | $notification-close-color-focus : $grey-700;
527 | $notification-close-font-size : $font-size-smer;
528 | $notification-close-font-size-lg : $font-size-base;
529 |
530 | $notification-icon-color-success : $green-300;
531 | $notification-icon-color-error : $red-300;
532 | $notification-icon-color-warning : $yellow-300;
533 | $notification-icon-color-info : $blue-300;
534 |
535 | /* Popover */
536 | $popover-title-font-size : $font-size-smer;
537 | $popover-content-font-size : $font-size-smest;
538 | $popover-popper-max-width : 400px;
539 |
540 | $popover-bg-color : $color-white;
541 | $popover-title-bg-color : $grey-50;
542 | $popover-border-color : $grey-100;
543 | $popover-title-border-color : $brand-blue-50;
544 |
545 | $popover-arrow-size : 10px;
546 | $popover-arrow-bg-color : $popover-bg-color;
547 |
548 | $popover-padding : 4px 8px;
549 | $popover-title-padding : 6px 10px;
550 | $popover-content-padding : 8px 12px;
551 |
552 | /* Progress */
553 | $progress-height : 10px;
554 | $progress-border-radius : 50px;
555 | $progress-font-color : $text-color;
556 | $progress-font-size : $font-size-smer;
557 |
558 | $progress-track-bg-color : $grey-200;
559 | $progress-bar-bg-color : $brand-color-light;
560 | $progress-bar-bg-color-success : $color-success;
561 | $progress-bar-bg-color-error : $color-error;
562 |
563 | /* Timeline */
564 | $timeline-dot-color : $blue-500;
565 | $timeline-dot-color-success : $green-500;
566 | $timeline-dot-color-error : $red-500;
567 | $timeline-dot-color-warning : $yellow-500;
568 |
569 | $timeline-dot-bg-color : $color-white;
570 |
571 | $timeline-dot-size : 12px;
572 | $timeline-custom-dot-size : 20px;
573 | $timeline-custom-dot-font-size : $font-size-normal;
574 |
575 | $timeline-line-color : $grey-100;
576 | $timeline-item-last-min-height : 48px;
577 | $timeline-text-font-size : $font-size-smer;
578 |
579 | /* Tooltip */
580 | $tooltip-padding : 4px 8px;
581 | $tooltip-arrow-size : 4px;
582 | $tooltip-max-width : 200px;
583 | $tooltip-font-color : $color-white;
584 | $tooltip-font-size : $font-size-smer;
585 | $tooltip-bg-color : rgba(0, 0, 0, .75);
586 | $tooltip-border-color : rgba(0, 0, 0, .75);
587 |
588 | /* Table */
589 | $table-font-size-small : $font-size-smest;
590 | $table-font-size : $font-size-smer;
591 | $table-font-size-large : $font-size-sm;
592 |
593 | $table-text-color : $text-color;
594 | $table-border-color : $grey-100;
595 | $table-thead-bg-color : $grey-50;
596 | $table-tr-bg-color-hover : $bg-color-lighter;
597 | $table-tr-bg-color-stripe : tint($grey-50, 50%);
598 | $table-footer-height : 28px;
599 |
600 | $table-cell-height-small : 32px;
601 | $table-cell-height : 40px;
602 | $table-cell-height-large : 56px;
603 | $table-cell-padding : 0 16px;
604 |
605 | $table-sorter-width : 9px;
606 | $table-sorter-width-small : 7px;
607 | $table-sorter-height : 18px;
608 | $table-sorter-height-small : 14px;
609 | $table-sorter-icon-size : 9px;
610 | $table-sorter-icon-size-small : 7px;
611 |
612 | /* Breadcrumb */
613 | $breadcrumb-font-size : $font-size-base;
614 | $breadcrumb-separator-color : $grey-300;
615 |
616 | /* Dropdown */
617 | $dropdown-max-height : 200px;
618 | $dropdown-bg-color : $color-white;
619 | $dropdown-box-shadow : 0 1px 6px rgba(0, 0, 0, 0.2);
620 | $dropdown-font-size : $font-size-smer;
621 |
622 | $dropdown-item-padding : 8px 16px;
623 | $dropdown-item-min-width : 100px;
624 | $dropdown-item-bg-color-hover : $brand-blue-50;
625 | $dropdown-item-bg-color-disabled : $grey-300;
626 |
627 | $dropdown-divided-color : $brand-blue-50;
628 |
629 | /* Menu */
630 | $menu-text-color : $text-color;
631 | $menu-text-color-disabled : $grey-400;
632 | $menu-text-color-dark : $grey-200;
633 | $menu-text-color-dark-hover : $color-white;
634 | $menu-bg-color-light : $color-white;
635 | $menu-bg-color-dark : $black-500;
636 | $menu-bg-color-dark-hover : $black-600;
637 | $menu-font-size : $font-size-base;
638 | $menu-icon-size : $font-size-base;
639 |
640 | $menu-item-text-color-active : $brand-blue-500;
641 | $menu-item-bg-color-active : $brand-blue-50;
642 | $menu-item-bg-color-active-inline : rgba(236, 242, 252, 0.2);
643 |
644 | $menu-submenu-padding : 12px 16px;
645 | $menu-item-padding : 12px 16px;
646 | $menu-item-padding-inline : 12px 16px;
647 | $menu-item-padding-base : 0 16px;
648 |
649 | $menu-group-title-padding : 12px;
650 | $menu-group-title-text-color : $grey-500;
651 | $menu-group-title-font-size : $font-size-smer;
652 | $menu-group-item-padding : 12px 16px;
653 |
654 | $menu-dropdown-item-padding : 12px 16px;
655 | $menu-dropdown-item-font-size : $font-size-smer;
656 |
657 | $menu-height-horizontal : 48px;
658 | $menu-border-color : $border-color-lighter;
659 | $menu-prefix-bg-color : $brand-blue-500;
660 | $menu-prefix-bg-color-dark : $brand-blue-500;
661 | $menu-icon-color-inline : $border-color-base;
662 |
663 | /* Pagination */
664 | $pagination-item-size-sm : 20px;
665 | $pagination-item-size : 28px;
666 | $pagination-input-width : 40px;
667 | $pagination-item-font-size-sm : $font-size-smest;
668 | $pagination-item-font-size : $font-size-smer;
669 | $pagination-btn-font-size : $font-size-smer;
670 |
671 | $pagination-item-text-color : $text-color;
672 | $pagination-item-text-color-hover : $brand-blue-400;
673 | $pagination-item-text-color-active : $color-white;
674 | $pagination-btn-jump-text-color : $grey-100;
675 |
676 | $pagination-item-bg-color : $color-white;
677 | $pagination-item-bg-color-active : $brand-blue-400;
678 |
679 | $pagination-item-border-color : $border-color-base;
680 | $pagination-item-border-color-hover : $brand-blue-400;
681 | $pagination-item-border-color-active : $brand-blue-400;
682 |
683 | /* Tabs */
684 | $tabs-border-color : $grey-100;
685 | $tabs-nav-height : 36px;
686 | $tabs-nav-height-sm : 32px;
687 | $tabs-nav-font-size : $font-size-base;
688 | $tabs-nav-font-size-sm : $font-size-smer;
689 | $tabs-navigation-btn-width : 32px;
690 | $tabs-navigation-color : $text-color;
691 | $tabs-navigation-color-hover : $brand-blue-500;
692 | $tabs-navigation-color-disabled : $grey-400;
693 |
694 | $tabs-nav-item-padding : 0 20px;
695 | $tabs-nav-item-padding-sm : 0 16px;
696 | $tabs-nav-item-bg-color : $color-white;
697 | $tabs-nav-item-bg-color-card : $grey-50;
698 | $tabs-nav-item-icon-color : tint($text-color, 30%);
699 | $tabs-nav-item-icon-color-hover : $text-color;
700 |
701 | /* Steps */
702 | $step-font-size : $font-size-base;
703 | $step-font-size-sm : $font-size-smer;
704 | $step-description-font-size : $font-size-smer;
705 | $step-description-font-size-sm : $font-size-smest;
706 |
707 | $step-color : $grey-600;
708 | $step-color-active : $color-white;
709 | $step-color-process : $text-color;
710 | $step-color-error : $red-500;
711 | $step-text-color : $black-200;
712 |
713 | $step-bg-color : $color-white;
714 | $step-bg-color-active : $brand-blue-500;
715 | $step-bg-color-error : $red-500;
716 |
717 | $step-border-color : $grey-600;
718 | $step-border-color-active : $brand-blue-500;
719 | $step-border-color-error : $red-500;
720 |
721 | $step-icon-color : $grey-600;
722 | $step-icon-color-active : $brand-blue-500;
723 | $step-icon-color-error : $red-500;
724 |
725 | $step-label-size : 30px;
726 | $step-label-size-sm : 18px;
727 |
728 | $step-line-color : $grey-600;
729 | $step-line-color-active : $brand-blue-500;
730 |
731 | $step-main-height-vertical : 64px;
732 | $step-main-height-vertical-sm : 48px;
733 |
734 | /**
735 | * Media queries
736 | */
737 | /* Extra small screen / Mobile */
738 | $screen-xs : 480px;
739 | $screen-xs-min : $screen-xs;
740 | $screen-xs-max : $screen-xs-min - 1;
741 |
742 | /* Small screen / Tablet */
743 | $screen-sm : 768px;
744 | $screen-sm-min : $screen-sm;
745 | $screen-sm-max : $screen-sm-min - 1;
746 |
747 | /* Medium screen / Desktop */
748 | $screen-md : 992px;
749 | $screen-md-min : $screen-md;
750 | $screen-md-max : $screen-md-min - 1;
751 |
752 | /* Large screen / Wide Desktop */
753 | $screen-lg : 1200px;
754 | $screen-lg-min : $screen-lg;
755 | $screen-lg-max : $screen-lg-min - 1;
756 |
757 | /**
758 | * Grid system
759 | */
760 | $grid-columns : 24;
761 | $grid-gutter-width : 0;
762 |
763 | /* Container sizes */
764 | $container-sm : 720px + $grid-gutter-width;
765 | $container-md : 940px + $grid-gutter-width;
766 | $container-lg : 1140px + $grid-gutter-width;
767 |
768 | /* z-index list */
769 | $zindex-menu : 900;
770 | $zindex-modal : 1000;
771 | $zindex-notification : 1010;
772 | $zindex-message : 1010;
773 | $zindex-popover : 1020;
774 | $zindex-dropdown : 1050;
775 | $zindex-tooltip : 1050;
776 | $zindex-loading-bar : 1080;
777 |
--------------------------------------------------------------------------------
/src/variables/index.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Variables
3 | */
4 |
5 | @import './default.scss';
6 | @import './timing-function.scss';
7 |
--------------------------------------------------------------------------------
/src/variables/timing-function.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * CSS cubic-bezier timing functions
3 | * http://bourbon.io/docs/#timing-functions
4 | */
5 | $ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530);
6 | $ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190);
7 | $ease-in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220);
8 | $ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060);
9 | $ease-in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715);
10 | $ease-in-expo: cubic-bezier(0.950, 0.050, 0.795, 0.035);
11 | $ease-in-circ: cubic-bezier(0.600, 0.040, 0.980, 0.335);
12 | $ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045);
13 |
14 | $ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940);
15 | $ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000);
16 | $ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000);
17 | $ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000);
18 | $ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000);
19 | $ease-out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000);
20 | $ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000);
21 | $ease-out-back: cubic-bezier(0.175, 0.885, 0.320, 1.275);
22 |
23 | $ease-in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955);
24 | $ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000);
25 | $ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000);
26 | $ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000);
27 | $ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950);
28 | $ease-in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000);
29 | $ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860);
30 | $ease-in-out-back: cubic-bezier(0.680, -0.550, 0.265, 1.550);
31 |
--------------------------------------------------------------------------------