Compare commits
14 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
a85037224c | ||
|
|
9f02337c12 | ||
|
|
ae74652c69 | ||
|
|
ecb66f47f2 | ||
|
|
e00badce65 | ||
|
|
19df7df525 | ||
|
|
617ff73e8a | ||
|
|
e7217faaa6 | ||
|
|
fe1b67f34a | ||
|
|
421f72a87c | ||
|
|
80133df17a | ||
|
|
0233140edf | ||
|
|
82f2702da2 | ||
|
|
6fbdab365c |
7
.gitignore
vendored
7
.gitignore
vendored
@@ -1,7 +0,0 @@
|
||||
.DS_Store
|
||||
node_modules
|
||||
npm-debug.log
|
||||
.tmp
|
||||
dist
|
||||
.grunt
|
||||
styleguide/index.html
|
||||
18
.stylelintrc
18
.stylelintrc
@@ -1,18 +0,0 @@
|
||||
{
|
||||
"extends": [
|
||||
"stylelint-config-standard",
|
||||
"stylelint-config-property-sort-order-smacss"
|
||||
],
|
||||
"ignoreFiles": [
|
||||
"src/vendor/reset.css",
|
||||
],
|
||||
"rules": {
|
||||
"selector-pseudo-element-colon-notation": "double",
|
||||
"color-hex-case": "upper",
|
||||
"declaration-empty-line-before": null,
|
||||
"block-no-empty": true,
|
||||
"shorthand-property-no-redundant-values": true,
|
||||
"custom-property-empty-line-before": null,
|
||||
"no-descending-specificity": null
|
||||
}
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
language: node_js
|
||||
node_js:
|
||||
- 6.9.2
|
||||
notifications:
|
||||
email:
|
||||
on_success: never
|
||||
on_failure: change
|
||||
cache:
|
||||
yarn: true
|
||||
22
LICENSE.md
22
LICENSE.md
@@ -1,22 +0,0 @@
|
||||
Copyright (c) 2017 CARTO
|
||||
|
||||
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:
|
||||
|
||||
The above copyright notice and this permission notice shall be
|
||||
included in all copies or substantial portions of the Software.
|
||||
|
||||
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.
|
||||
46
README.md
46
README.md
@@ -1,46 +0,0 @@
|
||||
# CartoAssets [](https://www.npmjs.org/package/cartoassets)
|
||||
|
||||
> Share frontend assets between different CartoDB repositories
|
||||
|
||||
### Installation
|
||||
As easy as:
|
||||
- ```npm install --global grunt-cli``` [Grunt installation](http://gruntjs.com/getting-started)
|
||||
- ```npm install --global gulp-cli``` [Gulp installation](https://github.com/gulpjs/gulp)
|
||||
- ```npm install -g markdown-styleguide-generator``` [StyleGenerator installation](https://www.npmjs.com/package/markdown-styleguide-generator#install)
|
||||
- ```npm install```
|
||||
|
||||
### Build
|
||||
If you want to use any of the CartoAssets components, after the installation just run:
|
||||
- ```grunt build```
|
||||
|
||||
### Development
|
||||
It will generate a UI documentation about the components in this repository:
|
||||
- ```grunt dev```
|
||||
|
||||
If you want to check the documenation, it is generated in the ```dist``` folder.
|
||||
|
||||
### How to add/update the icon font
|
||||
|
||||
See this [instructions](https://github.com/CartoDB/CartoAssets/blob/master/Icon-Fonting.md)
|
||||
|
||||
### Publish a new version in NPM
|
||||
In order to publish a new version of CartoAssets you need to:
|
||||
|
||||
- Change version of the package.
|
||||
- Be a collaborator of the [npm module](https://www.npmjs.com/cartoassets) (Send an email to xavijam[at]cartodb.com).
|
||||
|
||||
If you have these previous steps done:
|
||||
|
||||
- ```npm publish```
|
||||
|
||||
### Publish CartoAssets styleguide and documentation in GH-Pages
|
||||
Just run this command:
|
||||
|
||||
- ```grunt publish```
|
||||
|
||||
|
||||
### Browser support
|
||||
|
||||
 |  |  |  | 
|
||||
--- | --- | --- | --- | --- |
|
||||
31+ ✔ | 38+ ✔ | 11+ ✔ | 31+ ✔ | 8+ ✔ |
|
||||
1
css/cartostyles.css
Normal file
1
css/cartostyles.css
Normal file
File diff suppressed because one or more lines are too long
0
src/fonts/OpenSans-Light.ttf → fonts/OpenSans-Light.ttf
Executable file → Normal file
0
src/fonts/OpenSans-Light.ttf → fonts/OpenSans-Light.ttf
Executable file → Normal file
0
src/fonts/OpenSans-Regular.ttf → fonts/OpenSans-Regular.ttf
Executable file → Normal file
0
src/fonts/OpenSans-Regular.ttf → fonts/OpenSans-Regular.ttf
Executable file → Normal file
0
src/fonts/OpenSans-Semibold.ttf → fonts/OpenSans-Semibold.ttf
Executable file → Normal file
0
src/fonts/OpenSans-Semibold.ttf → fonts/OpenSans-Semibold.ttf
Executable file → Normal file
BIN
fonts/cartoIcon.eot
Normal file
BIN
fonts/cartoIcon.eot
Normal file
Binary file not shown.
348
fonts/cartoIcon.svg
Normal file
348
fonts/cartoIcon.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 199 KiB |
BIN
fonts/cartoIcon.ttf
Normal file
BIN
fonts/cartoIcon.ttf
Normal file
Binary file not shown.
BIN
fonts/cartoIcon.woff
Normal file
BIN
fonts/cartoIcon.woff
Normal file
Binary file not shown.
43
package.json
43
package.json
@@ -1,43 +0,0 @@
|
||||
{
|
||||
"name": "cartoassets",
|
||||
"description": "Share frontend assets between different CARTO repositories",
|
||||
"version": "2.0.0-alpha",
|
||||
"homepage": "https://github.com/cartodb/CartoAssets",
|
||||
"author": {
|
||||
"name": "CARTO",
|
||||
"email": "frontend@carto.com"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/cartodb/CartoAssets.git"
|
||||
},
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"cssnano": "^3.10.0",
|
||||
"perfect-scrollbar": "git://github.com/CartoDB/perfect-scrollbar.git#master",
|
||||
"postcss": "^5.2.8",
|
||||
"postcss-browser-reporter": "^0.5.0",
|
||||
"postcss-cli": "^2.6.0",
|
||||
"postcss-cssnext": "^2.9.0",
|
||||
"postcss-import": "^9.0.0",
|
||||
"postcss-reporter": "^3.0.0",
|
||||
"stylelint-config-property-sort-order-smacss": "^2.0.0",
|
||||
"stylelint-config-standard": "^18.0.0"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "postcss -c postcss.config.js",
|
||||
"test": "npm run lint",
|
||||
"lint": "stylelint './src/**/*.css'"
|
||||
},
|
||||
"keywords": [
|
||||
"library",
|
||||
"CARTO",
|
||||
"share",
|
||||
"assets",
|
||||
"styleguide",
|
||||
"shared components"
|
||||
],
|
||||
"dependencies": {
|
||||
"normalize.css": "^7.0.0"
|
||||
}
|
||||
}
|
||||
@@ -1,24 +0,0 @@
|
||||
const POSTCSS = {
|
||||
'input': 'src/entry.css',
|
||||
'output': 'dist/carto_assets.css',
|
||||
'use': [
|
||||
'postcss-import',
|
||||
'postcss-cssnext'
|
||||
],
|
||||
'postcss-import': {
|
||||
path: ['src']
|
||||
},
|
||||
'cssnano': {
|
||||
safe: true,
|
||||
autoprefixer: false //handled by postcss-cssnext
|
||||
},
|
||||
'local-plugins': true,
|
||||
'map': 'file'
|
||||
}
|
||||
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
POSTCSS.use.push('cssnano'); // add cssnano in production
|
||||
POSTCSS.map = false; //sourcemaps to external file
|
||||
}
|
||||
|
||||
module.exports = POSTCSS;
|
||||
@@ -1,26 +0,0 @@
|
||||
.CDB-AvatarList {
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
.CDB-AvatarList-item {
|
||||
display: inline-block;
|
||||
margin-left: -12px;
|
||||
border: 2px solid white;
|
||||
border-radius: 50%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.CDB-AvatarList-itemMore {
|
||||
display: inline-block;
|
||||
margin-left: -12px;
|
||||
padding: 2px 6px;
|
||||
border-left: 2px solid white;
|
||||
border-radius: 50px;
|
||||
background: var(--color-line-hover);
|
||||
}
|
||||
|
||||
.CDB-AvatarList-itemMedia {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
@@ -1,30 +0,0 @@
|
||||
.CDB-Box-modal {
|
||||
box-sizing: border-box;
|
||||
min-width: 160px;
|
||||
border: 1px solid var(--color-line);
|
||||
border-radius: 4px;
|
||||
background: white;
|
||||
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.16);
|
||||
}
|
||||
|
||||
.CDB-Box-modalHeader {
|
||||
background: var(--color-bg-secondary);
|
||||
}
|
||||
|
||||
.CDB-Box-modalHeaderItem {
|
||||
display: flex;
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid var(--color-line);
|
||||
}
|
||||
|
||||
.CDB-Box-modalHeaderItem--block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.CDB-Box-modalHeaderItem--paddingHorizontal {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.CDB-Box-modalHeaderItem--paddingVertical {
|
||||
padding: 12px 0;
|
||||
}
|
||||
@@ -1,230 +0,0 @@
|
||||
.CDB-Button {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding: 8px 20px;
|
||||
transition: background 300ms;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
|
||||
.CDB-Button-Text {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.is-disabled {
|
||||
opacity: 0.24;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-Button--loading {
|
||||
.CDB-Button-loader {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) scale(0);
|
||||
transform-origin: 50%;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.CDB-Button-Text {
|
||||
transition: all 600ms;
|
||||
}
|
||||
|
||||
&.is-loading {
|
||||
cursor: default;
|
||||
|
||||
.CDB-Button-loader {
|
||||
animation-name: showIn;
|
||||
animation-duration: 600ms;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
.CDB-Button-Text {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes showIn {
|
||||
0% {
|
||||
transform: translate(-50%, -50%) scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-Button--small {
|
||||
padding: 4px 12px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.CDB-Button--big {
|
||||
padding: 11px 20px;
|
||||
}
|
||||
|
||||
.CDB-Button--wide {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.CDB-Button--icon {
|
||||
padding: 7px 9px;
|
||||
}
|
||||
|
||||
.CDB-Button--primary {
|
||||
background: var(--color-blue);
|
||||
color: white;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background: var(--color-blue-hover);
|
||||
}
|
||||
|
||||
&.is-loading {
|
||||
&:hover,
|
||||
&:active {
|
||||
background: var(--color-blue);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-disabled {
|
||||
&:hover,
|
||||
&:active {
|
||||
background: var(--color-blue);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-Button--alert {
|
||||
background: var(--color-alert);
|
||||
color: white;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background: color(var(--color-alert) shade(8%));
|
||||
}
|
||||
|
||||
&.is-disabled {
|
||||
&:hover,
|
||||
&:active {
|
||||
background: var(--color-alert);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-Button--error,
|
||||
.CDB-Button--negative {
|
||||
background: var(--color-error);
|
||||
color: white;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background: color(var(--color-error) shade(8%));
|
||||
}
|
||||
|
||||
&.is-disabled {
|
||||
&:hover,
|
||||
&:active {
|
||||
background: var(--color-error);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-Button--dashed {
|
||||
padding: 13px 0;
|
||||
border: 1px dashed var(--color-text-alt);
|
||||
color: var(--color-blue);
|
||||
|
||||
&:hover {
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
&.is-disabled {
|
||||
&:hover {
|
||||
border-color: var(--color-text-alt);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-Button--secondary {
|
||||
box-shadow: inset 0 0 0 1px var(--color-blue);
|
||||
color: var(--color-blue);
|
||||
|
||||
&:hover {
|
||||
background: rgba(var(--color-blue), 0.08);
|
||||
box-shadow: inset 0 0 0 2px var(--color-blue-hover);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: var(--color-blue);
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.is-disabled {
|
||||
&:hover {
|
||||
background: transparent;
|
||||
box-shadow: inset 0 0 0 1px var(--color-blue);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-loading {
|
||||
cursor: default;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background: none;
|
||||
color: var(--color-blue);
|
||||
}
|
||||
}
|
||||
|
||||
&--background {
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-Button--white {
|
||||
box-shadow: inset 0 0 0 1px white;
|
||||
color: white;
|
||||
|
||||
&:hover {
|
||||
background: rgba(white, 0.08);
|
||||
box-shadow: inset 0 0 0 2px color(white shade(8%));
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: color(var(--color-text-primary) alpha(0.8%));
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.is-disabled {
|
||||
opacity: 0.24;
|
||||
|
||||
&:hover {
|
||||
background: transparent;
|
||||
box-shadow: inset 0 0 0 1px white;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: transparent;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-loading {
|
||||
cursor: default;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background: none;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,76 +0,0 @@
|
||||
.Color-Blue {
|
||||
background: var(--color-blue);
|
||||
}
|
||||
|
||||
.Color-White {
|
||||
border: 1px solid #E5E5E5;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.Color-Dark {
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.Color-MainDark {
|
||||
background: var(--color-black);
|
||||
}
|
||||
|
||||
.Color-SecondaryDark {
|
||||
background: #282C2F;
|
||||
}
|
||||
|
||||
.Color-SecondaryBackground {
|
||||
background: var(--color-bg-secondary);
|
||||
}
|
||||
|
||||
.Color-ThirdBackground {
|
||||
background: var(--color-softgray);
|
||||
}
|
||||
|
||||
.Color-HoverLine {
|
||||
background: var(--color-line-hover);
|
||||
}
|
||||
|
||||
.Color-MainLine {
|
||||
background: var(--color-line);
|
||||
}
|
||||
|
||||
.Color-SecondaryLine {
|
||||
background: var(--color-line-hover);
|
||||
}
|
||||
|
||||
.Color-Type02 {
|
||||
background: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.Color-Type03 {
|
||||
background: var(--color-text-alt);
|
||||
}
|
||||
|
||||
.Color-Type04 {
|
||||
background: var(--color-text-alt);
|
||||
}
|
||||
|
||||
.Color-Higlight {
|
||||
background: var(--color-highlight);
|
||||
}
|
||||
|
||||
.Color-Alert {
|
||||
background: var(--color-alert);
|
||||
}
|
||||
|
||||
.Color-Public {
|
||||
background: var(--color-public);
|
||||
}
|
||||
|
||||
.Color-Link {
|
||||
background: var(--color-share);
|
||||
}
|
||||
|
||||
.Color-Password {
|
||||
background: var(--color-password);
|
||||
}
|
||||
|
||||
.Color-Error {
|
||||
background: var(--color-error);
|
||||
}
|
||||
@@ -1,92 +0,0 @@
|
||||
.CDB-Checkbox {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
opacity: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.CDB-Checkbox-face {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
box-sizing: border-box;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 1px solid var(--color-line);
|
||||
border-radius: 3px;
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
pointer-events: none;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 3px;
|
||||
width: 2px;
|
||||
border-radius: 1px;
|
||||
background: white;
|
||||
}
|
||||
|
||||
&::before {
|
||||
right: 4px;
|
||||
height: 8px;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
&::after {
|
||||
left: 4px;
|
||||
height: 6px;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-Checkbox:checked + .CDB-Checkbox-face {
|
||||
transition: background 300ms;
|
||||
border: 1px solid var(--color-blue);
|
||||
background: var(--color-blue);
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-Checkbox:hover + .CDB-Checkbox-face {
|
||||
border: 1px solid var(--color-blue-hover);
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
background: var(--color-line-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-Checkbox:active + .CDB-Checkbox-face {
|
||||
border: 1px solid var(--color-blue);
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
background: var(--color-blue);
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-Checkbox:disabled + .CDB-Checkbox-face {
|
||||
border: 1px solid var(--color-line-hover);
|
||||
background: var(--color-softgray);
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-Checkbox:checked:hover + .CDB-Checkbox-face {
|
||||
border: 1px solid var(--color-blue);
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
@@ -1,69 +0,0 @@
|
||||
.CDB-DropdownContainer {
|
||||
position: relative;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.CDB-Dropdown {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
flex-direction: row;
|
||||
max-height: 200px;
|
||||
}
|
||||
|
||||
.CDB-Dropdown-calculations {
|
||||
box-sizing: border-box;
|
||||
padding: 14px;
|
||||
border-right: 1px solid var(--color-line);
|
||||
border-radius: 4px 0 0 4px;
|
||||
background-color: var(--color-bg-secondary);
|
||||
}
|
||||
|
||||
.CDB-Dropdown-calculationsElement {
|
||||
margin-bottom: var(--line-height-medium);
|
||||
color: var(--color-black);
|
||||
font-size: var(--font-size-small);
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-Dropdown-options {
|
||||
width: $baseSize * 20;
|
||||
border-radius: 0 4px 4px 0;
|
||||
background-color: white;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.CDB-Dropdown-optionsElement {
|
||||
padding: 12px 10px;
|
||||
overflow: hidden;
|
||||
border-bottom: 1px solid var(--color-line);
|
||||
color: var(--color-blue);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(var(--color-blue), 0.08);
|
||||
color: var(--color-black);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.is-selected {
|
||||
color: var(--color-black);
|
||||
}
|
||||
|
||||
&.is-disabled {
|
||||
color: var(--color-text-alt);
|
||||
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,68 +0,0 @@
|
||||
.CDB-InputText {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
min-height: 32px;
|
||||
padding: 7px 8px;
|
||||
border: 1px solid var(--color-line);
|
||||
border-radius: 4px;
|
||||
font-size: var(--font-size-medium);
|
||||
line-height: var(--line-height-medium);
|
||||
|
||||
&.is-cursor {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.is-empty {
|
||||
color: var(--color-text-alt);
|
||||
}
|
||||
|
||||
&.is-number {
|
||||
color: var(--color-highlight);
|
||||
}
|
||||
|
||||
&.is-null {
|
||||
color: var(--color-text-alt);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border: 1px solid var(--color-blue-hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border: 1px solid var(--color-black);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&.is-disabled {
|
||||
border-color: var(--color-line-hover);
|
||||
background: var(--color-softgray);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&.has-icon {
|
||||
padding-right: 32px;
|
||||
}
|
||||
|
||||
&.has-error {
|
||||
border: 1px solid color(var(--color-error) alpha(0.48));
|
||||
background: color(var(--color-error) alpha(0.04));
|
||||
color: var(--color-error);
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-InputTextPlain {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
font-size: var(--font-size-medium);
|
||||
line-height: var(--line-height-medium);
|
||||
}
|
||||
|
||||
.CDB-FieldError .CDB-InputText {
|
||||
border: 1px solid color(var(--color-error) alpha(0.48));
|
||||
background: color(var(--color-error) alpha(0.04));
|
||||
color: var(--color-error);
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
.CDB-Legend {
|
||||
width: 96px;
|
||||
}
|
||||
|
||||
.CDB-Legend--big {
|
||||
width: 192px;
|
||||
}
|
||||
|
||||
.CDB-Fieldset {
|
||||
display: flex;
|
||||
align-items: ceter;
|
||||
}
|
||||
|
||||
.CDB-Fieldset-block {
|
||||
width: 100%;
|
||||
}
|
||||
@@ -1,112 +0,0 @@
|
||||
.CDB-OptionInput {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
border-radius: 16px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.CDB-OptionInput-container {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.CDB-OptionInput-container--noMargin {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.CDB-OptionInput-item {
|
||||
display: flex;
|
||||
position: relative;
|
||||
box-sizing: content-box;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: var(--font-size-medium);
|
||||
|
||||
&.is-active,
|
||||
&:hover,
|
||||
&:focus {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
width: auto;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-OptionInput-container--border .CDB-OptionInput-item {
|
||||
border: 1px solid var(--color-line);
|
||||
|
||||
&:hover {
|
||||
border: 1px solid var(--color-blue-hover);
|
||||
}
|
||||
|
||||
&.is-active,
|
||||
&:focus {
|
||||
border: 1px solid var(--color-black);
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-right: 0;
|
||||
border-top-left-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
|
||||
&:hover {
|
||||
+ .CDB-OptionInput-item::after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
+ .CDB-OptionInput-item {
|
||||
border-left: none;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
|
||||
&.is-active::after,
|
||||
&:focus::after,
|
||||
&:hover::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -1px;
|
||||
width: 1px;
|
||||
height: calc(100% + 2px);
|
||||
}
|
||||
|
||||
&:hover::after {
|
||||
background-color: var(--color-blue-hover);
|
||||
}
|
||||
|
||||
&.is-active::after,
|
||||
&:focus::after {
|
||||
background-color: var(--color-black);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-OptionInput-content {
|
||||
display: flex;
|
||||
box-sizing: content-box;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
padding: 0 8px;
|
||||
color: var(--color-black);
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
@@ -1,81 +0,0 @@
|
||||
.CDB-Radio {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
opacity: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.CDB-Radio-face {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 1px solid var(--color-line);
|
||||
border-radius: 50%;
|
||||
background: white;
|
||||
text-indent: 20px;
|
||||
cursor: pointer;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
margin-top: -3px;
|
||||
margin-left: -3px;
|
||||
border-radius: 50%;
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-Radio:checked + .CDB-Radio-face {
|
||||
transition: background 300ms;
|
||||
border: 1px solid var(--color-blue);
|
||||
background: var(--color-blue);
|
||||
|
||||
&::before {
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-Radio:disabled + .CDB-Radio-face {
|
||||
border: 1px solid var(--color-line-hover);
|
||||
background: var(--color-softgray);
|
||||
|
||||
&::before {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-Radio:active + .CDB-Radio-face {
|
||||
&::before {
|
||||
background: var(--color-blue);
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-Radio:hover + .CDB-Radio-face {
|
||||
border: 1px solid var(--color-blue-hover);
|
||||
|
||||
&::before {
|
||||
background: var(--color-line-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-Radio:focus + .CDB-Radio-face,
|
||||
.CDB-Radio:checked:hover + .CDB-Radio-face {
|
||||
border: 1px solid var(--color-blue);
|
||||
}
|
||||
|
||||
.CDB-Radio:disabled:hover + .CDB-Radio-face {
|
||||
border: 1px solid var(--color-line-hover);
|
||||
}
|
||||
|
||||
.CDB-Radio:checked:hover + .CDB-Radio-face {
|
||||
&::before {
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
@@ -1,48 +0,0 @@
|
||||
.CDB-Select {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.CDB-SelectItem {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
}
|
||||
|
||||
.CDB-SelectFake {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding: 7px 8px 6px;
|
||||
border: 1px solid var(--color-line);
|
||||
border-radius: 4px;
|
||||
background: white;
|
||||
font-size: var(--font-size-medium);
|
||||
line-height: var(--line-height-medium);
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
|
||||
&:hover {
|
||||
border: 1px solid var(--color-line-hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border: 1px solid var(--color-blue);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
border-color: var(--color-line-hover);
|
||||
background: var(--color-softgray);
|
||||
}
|
||||
|
||||
&.has-error {
|
||||
border: 1px solid color(var(--color-error) alpha(0.48));
|
||||
background: color(var(--color-error) alpha(0.04));
|
||||
color: var(--color-error);
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-FieldError .CDB-Select,
|
||||
.CDB-FieldError .CDB-SelectFake {
|
||||
border: 1px solid color(var(--color-error) alpha(0.48));
|
||||
background: color(var(--color-error) alpha(0.04));
|
||||
color: var(--color-error);
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
.CDB-TabsForms {
|
||||
border: 1px solid var(--color-line);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.CDB-TabsForms-inner {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.CDB-TabsForms-item {
|
||||
border-left: 1px solid var(--color-line-hover);
|
||||
}
|
||||
|
||||
.CDB-TabsForms-item:first-child {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.CDB-TabsForms-button {
|
||||
padding: 7px 8px;
|
||||
}
|
||||
@@ -1,38 +0,0 @@
|
||||
.CDB-Textarea {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding: 7px 8px 6px;
|
||||
border: 1px solid var(--color-line);
|
||||
border-radius: 4px;
|
||||
font-size: var(--font-size-medium);
|
||||
line-height: var(--line-height-medium);
|
||||
|
||||
&:hover {
|
||||
border: 1px solid var(--color-line-hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border: 1px solid var(--color-blue);
|
||||
outline-color: transparent;
|
||||
outline-style: none;
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&.is-disabled {
|
||||
border-color: var(--color-line-hover);
|
||||
background: var(--color-softgray);
|
||||
}
|
||||
|
||||
&.has-error {
|
||||
border: 1px solid color(var(--color-error) alpha(0.48));
|
||||
background: color(var(--color-error) alpha(0.04));
|
||||
color: var(--color-error);
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-FieldError .CDB-Textarea,
|
||||
.CDB-Textarea.has-error {
|
||||
border: 1px solid color(var(--color-error) alpha(0.48));
|
||||
background: color(var(--color-error) alpha(0.04));
|
||||
color: var(--color-error);
|
||||
}
|
||||
@@ -1,53 +0,0 @@
|
||||
.CDB-Toggle {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 32px;
|
||||
height: 16px;
|
||||
opacity: 0;
|
||||
|
||||
&:hover {
|
||||
+ .CDB-ToggleFace {
|
||||
background: var(--color-text-alt-hover);
|
||||
}
|
||||
|
||||
&:checked + .CDB-ToggleFace {
|
||||
background: var(--color-highlight);
|
||||
}
|
||||
}
|
||||
|
||||
+ .CDB-ToggleFace {
|
||||
position: relative;
|
||||
width: 32px;
|
||||
height: 16px;
|
||||
margin: 0 2px;
|
||||
transition: background 300ms;
|
||||
border-radius: 50px;
|
||||
background: var(--color-text-alt);
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: white;
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.48);
|
||||
}
|
||||
}
|
||||
|
||||
&:checked + .CDB-ToggleFace {
|
||||
background: var(--color-highlight);
|
||||
|
||||
&::before {
|
||||
right: 2px;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.Toggle .is-disabled {
|
||||
opacity: 0.24;
|
||||
pointer-events: none;
|
||||
}
|
||||
@@ -1,60 +0,0 @@
|
||||
.CDB-HeaderInfo {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
&.is-block {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-HeaderInfo-listItem {
|
||||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
vertical-align: middle;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-HeaderInfo-inner {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.CDB-HeaderInfo-back {
|
||||
margin-top: 7px;
|
||||
}
|
||||
|
||||
.CDB-HeaderInfo-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.CDB-HeaderInfo-titleText {
|
||||
flex: 1;
|
||||
width: 0;
|
||||
padding-right: 16px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.CDB-HeaderInfo-actionsItem {
|
||||
display: inline-block;
|
||||
margin-left: 4px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.CDB-HeaderNumeration {
|
||||
box-sizing: border-box;
|
||||
width: 24px;
|
||||
min-width: 24px;
|
||||
height: 24px;
|
||||
border: 1px solid var(--color-line);
|
||||
border-radius: 4px;
|
||||
background-color: white;
|
||||
color: var(--color-text-alt);
|
||||
font-size: var(--font-size-small);
|
||||
line-height: 23px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
.CDB-SelectorLayer {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.CDB-SelectorLayer.is-disabled {
|
||||
background-color: var(--color-softgray);
|
||||
}
|
||||
|
||||
.CDB-SelectorLayer-letter {
|
||||
height: 14px;
|
||||
padding: 1px 5px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
.CDB-ListDecoration-item {
|
||||
border-bottom: 1px solid var(--color-line-hover);
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-ListDecoration-itemPadding {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.CDB-ListDecoration-itemPadding--horizontal {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.CDB-ListDecoration-itemPadding--vertical {
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
.CDB-ListDecoration-itemLink {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
padding: 12px 16px;
|
||||
text-align: left;
|
||||
}
|
||||
@@ -1,89 +0,0 @@
|
||||
.CDB-Loader {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 50%;
|
||||
height: 3px;
|
||||
transform: translateX(-200%);
|
||||
background-image: linear-gradient(90deg, rgba(var(--color-blue), 1) 0%, #32BBFE 90%, #FAFEFF 95%);
|
||||
}
|
||||
|
||||
.CDB-Loader.is-visible {
|
||||
animation: loader-progress 1s cubic-bezier(0, 0.85, 0.6, 0.6) infinite;
|
||||
}
|
||||
|
||||
@keyframes loader-progress {
|
||||
from {
|
||||
transform: translateX(-200%);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateX(200%);
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-LoaderIcon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.CDB-LoaderIcon-spinner {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
animation: rotate 2s linear infinite;
|
||||
}
|
||||
|
||||
.CDB-LoaderIcon--small,
|
||||
.CDB-LoaderIcon--small .CDB-LoaderIcon-spinner {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.CDB-LoaderIcon--big,
|
||||
.CDB-LoaderIcon--big .CDB-LoaderIcon-spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.CDB-LoaderIcon-path {
|
||||
animation: dash 1.5s ease-in-out infinite;
|
||||
stroke-width: 4px;
|
||||
stroke-linecap: round;
|
||||
stroke: rgba(255, 255, 255, 0.88);
|
||||
}
|
||||
|
||||
.CDB-LoaderIcon--big .CDB-LoaderIcon-path {
|
||||
stroke-width: 2px;
|
||||
}
|
||||
|
||||
.CDB-LoaderIcon.is-dark .CDB-LoaderIcon-path {
|
||||
stroke: rgba(0, 0, 0, 0.24);
|
||||
}
|
||||
|
||||
.CDB-LoaderIcon.is-blue .CDB-LoaderIcon-path {
|
||||
stroke: var(--color-blue);
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dash {
|
||||
0% {
|
||||
stroke-dasharray: 1, 150;
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
|
||||
50% {
|
||||
stroke-dasharray: 90, 150;
|
||||
stroke-dashoffset: -35;
|
||||
}
|
||||
|
||||
100% {
|
||||
stroke-dasharray: 90, 150;
|
||||
stroke-dashoffset: -124;
|
||||
}
|
||||
}
|
||||
@@ -1,129 +0,0 @@
|
||||
.CDB-NavMenu {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.CDB-NavMenu-inner {
|
||||
position: relative;
|
||||
margin-bottom: 18px;
|
||||
border-bottom: 1px solid var(--color-line);
|
||||
|
||||
&--no-margin {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&--is-dropdown {
|
||||
padding-top: 8px;
|
||||
padding-right: 0;
|
||||
padding-bottom: 0;
|
||||
padding-left: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-NavMenu-link {
|
||||
display: block;
|
||||
margin-bottom: -1px;
|
||||
padding: 4px 0 11px;
|
||||
transition: border-color 0.2s ease-in;
|
||||
border-bottom: 2px solid transparent;
|
||||
border-radius: 0;
|
||||
color: var(--color-blue);
|
||||
|
||||
&:hover {
|
||||
border-bottom: 2px solid var(--color-blue-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-NavMenu-item,
|
||||
.CDB-NavSubmenu-item {
|
||||
display: inline-block;
|
||||
margin-right: 12px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.CDB-NavMenu-item.is-selected .CDB-NavMenu-link {
|
||||
border-bottom: 2px solid var(--color-text-primary);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.CDB-NavMenu-item.is-disabled .CDB-NavMenu-link {
|
||||
color: var(--color-text-alt);
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.CDB-NavSubmenu {
|
||||
border-bottom: 2px solid var(--color-line-hover);
|
||||
|
||||
&--inside {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
padding-top: 14px;
|
||||
}
|
||||
|
||||
&--outside {
|
||||
margin-top: -5px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-NavSubmenu-link {
|
||||
display: block;
|
||||
margin-bottom: -1px;
|
||||
padding-bottom: 12px;
|
||||
transition: border-color 0.2s ease-in;
|
||||
border-bottom: 2px solid transparent;
|
||||
border-radius: 0;
|
||||
color: var(--color-blue);
|
||||
|
||||
&:hover {
|
||||
border-bottom: 2px solid var(--color-blue-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-NavSubmenu-item.is-selected .CDB-NavSubmenu-link {
|
||||
border-bottom: 2px solid var(--color-line);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.CDB-NavSubmenu-status {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.CDB-NavMenu.is-dark {
|
||||
.CDB-NavMenu-inner,
|
||||
.CDB-NavSubmenu {
|
||||
border-bottom: 1px solid var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.CDB-NavMenu-link,
|
||||
.CDB-NavSubmenu-link {
|
||||
margin-bottom: -1px;
|
||||
color: var(--color-text-alt);
|
||||
|
||||
&:hover {
|
||||
border-bottom: 2px solid darken(var(--color-line), 8%);
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-NavSubmenu-item.is-disabled .CDB-NavMenu-link {
|
||||
opacity: 0.24;
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.CDB-NavMenu-item.is-selected .CDB-NavMenu-link {
|
||||
border-bottom: 2px solid var(--color-line);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.CDB-NavSubmenu-item.is-selected .CDB-NavSubmenu-link {
|
||||
border-bottom: 2px solid var(--color-line);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.CDB-NavSubmenu-status {
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
}
|
||||
@@ -1,79 +0,0 @@
|
||||
.CDB-Shape {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
text-align: center;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-Shape--medium {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.CDB-Shape-add {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 1px;
|
||||
bottom: 7px;
|
||||
left: 0;
|
||||
height: 1px;
|
||||
background: var(--color-black);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 1;
|
||||
bottom: 0;
|
||||
left: 7px;
|
||||
width: 1px;
|
||||
background: var(--color-black);
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-Shape-add.is-small {
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 3px;
|
||||
bottom: 7px;
|
||||
left: 4px;
|
||||
height: 1px;
|
||||
background: var(--color-black);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
bottom: 3px;
|
||||
left: 8px;
|
||||
width: 1px;
|
||||
background: var(--color-black);
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-Shape-add.is-blue {
|
||||
&::before,
|
||||
&::after {
|
||||
background: var(--color-blue);
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-Shape-add.is-white {
|
||||
&::before,
|
||||
&::after {
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
@@ -1,66 +0,0 @@
|
||||
.CDB-Shape-Arrow {
|
||||
position: relative;
|
||||
width: 1px;
|
||||
height: 8px;
|
||||
background: var(--color-black);
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 0;
|
||||
width: 5px;
|
||||
height: 1px;
|
||||
transform: rotate(45deg);
|
||||
background: var(--color-black);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: -4px;
|
||||
width: 5px;
|
||||
height: 1px;
|
||||
transform: rotate(-45deg);
|
||||
background: var(--color-black);
|
||||
}
|
||||
|
||||
&.is-up {
|
||||
top: 6px;
|
||||
right: 9px;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
&.is-down {
|
||||
top: 13px;
|
||||
left: 46px;
|
||||
transform: rotate(-135deg);
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-Shape-Arrow.is-blue {
|
||||
background: var(--color-blue);
|
||||
|
||||
&::before {
|
||||
background: var(--color-blue);
|
||||
}
|
||||
|
||||
&::after {
|
||||
background: var(--color-blue);
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-Shape-Arrow.is-white {
|
||||
background: white;
|
||||
|
||||
&::before {
|
||||
background: white;
|
||||
}
|
||||
|
||||
&::after {
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
@@ -1,102 +0,0 @@
|
||||
.CDB-Shape-CircleItem {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border: 1px solid var(--color-black);
|
||||
border-radius: 50%;
|
||||
|
||||
&.is-small {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
transform: translateY(2px);
|
||||
}
|
||||
|
||||
&.is-blue {
|
||||
border: 1px solid var(--color-blue);
|
||||
}
|
||||
|
||||
&.is-white {
|
||||
border: 1px solid white;
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-Shape-tick {
|
||||
display: block;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
transform: rotate(-45deg);
|
||||
background: var(--color-black);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
transform: rotate(45deg);
|
||||
background: var(--color-black);
|
||||
}
|
||||
|
||||
&.is-medium {
|
||||
&::before {
|
||||
top: 5px;
|
||||
left: 4px;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: 3px;
|
||||
right: 5px;
|
||||
height: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-small {
|
||||
&::before {
|
||||
top: 4px;
|
||||
left: 2px;
|
||||
height: 3px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: 2px;
|
||||
right: 3px;
|
||||
height: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-Shape-tick.is-blue {
|
||||
&::before {
|
||||
background: var(--color-blue);
|
||||
}
|
||||
|
||||
&::after {
|
||||
background: var(--color-blue);
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-Shape-tick.is-white {
|
||||
&::before {
|
||||
background: white;
|
||||
}
|
||||
|
||||
&::after {
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-Shape-tick.is-green {
|
||||
&::before {
|
||||
background: var(--color-highlight);
|
||||
}
|
||||
|
||||
&::after {
|
||||
background: var(--color-highlight);
|
||||
}
|
||||
}
|
||||
@@ -1,109 +0,0 @@
|
||||
.CDB-Shape-close {
|
||||
display: block;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
transform: rotate(-45deg);
|
||||
background: var(--color-black);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
transform: rotate(45deg);
|
||||
background: var(--color-black);
|
||||
}
|
||||
|
||||
&.is-huge {
|
||||
&::before {
|
||||
top: -2px;
|
||||
left: 7px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: -2px;
|
||||
right: 8px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-large {
|
||||
&::before {
|
||||
top: 2px;
|
||||
left: 7px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: 2px;
|
||||
right: 8px;
|
||||
height: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-medium {
|
||||
&::before {
|
||||
top: 3px;
|
||||
left: 6px;
|
||||
height: 7px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: 3px;
|
||||
right: 6px;
|
||||
height: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-small {
|
||||
&::before {
|
||||
top: 2px;
|
||||
left: 4px;
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: 2px;
|
||||
right: 4px;
|
||||
height: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-Shape-close.is-blue {
|
||||
&::before {
|
||||
background: var(--color-blue);
|
||||
}
|
||||
|
||||
&::after {
|
||||
background: var(--color-blue);
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-Shape-close.is-white {
|
||||
&::before {
|
||||
background: white;
|
||||
}
|
||||
|
||||
&::after {
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-Shape-close.is-red {
|
||||
&::before {
|
||||
background: var(--color-error);
|
||||
}
|
||||
|
||||
&::after {
|
||||
background: var(--color-error);
|
||||
}
|
||||
}
|
||||
@@ -1,34 +0,0 @@
|
||||
.CDB-Shape-dash {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
bottom: 7px;
|
||||
left: 2px;
|
||||
height: 1px;
|
||||
background: var(--color-black);
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-Shape-dash.is-small {
|
||||
&::before {
|
||||
right: 3px;
|
||||
left: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-Shape-dash.is-blue {
|
||||
&::before {
|
||||
background: var(--color-blue);
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-Shape-dash.is-white {
|
||||
&::before {
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
@@ -1,64 +0,0 @@
|
||||
.CDB-Shape-Dataset {
|
||||
padding-top: 1px;
|
||||
|
||||
&.is-small {
|
||||
padding-top: 0;
|
||||
|
||||
.CDB-Shape-DatasetItem {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
margin-left: -7px;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
box-shadow: 2px 0 0 white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-Shape-DatasetItem {
|
||||
display: inline-block;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
margin-left: -10px;
|
||||
border: 1px solid var(--color-black);
|
||||
border-radius: 50%;
|
||||
background: white;
|
||||
|
||||
&:first-child {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-left: 0;
|
||||
box-shadow: 3px 0 0 white;
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-Shape-Dataset.is-blue {
|
||||
.CDB-Shape-DatasetItem {
|
||||
border: 1px solid var(--color-blue);
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-Shape-Dataset.is-grey {
|
||||
.CDB-Shape-DatasetItem {
|
||||
border: 1px solid var(--color-line-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-Shape-Dataset.is-white {
|
||||
.CDB-Shape-DatasetItem {
|
||||
border: 1px solid var(--color-line-hover);
|
||||
background: var(--color-black);
|
||||
|
||||
&:first-child {
|
||||
box-shadow: 3px 0 var(--color-black);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-Shape-Dataset.is-white.is-small {
|
||||
.CDB-Shape-DatasetItem:first-child {
|
||||
box-shadow: 2px 0 var(--color-black);
|
||||
}
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
.CDB-Shape-dot {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-line-hover);
|
||||
|
||||
&.is-selected {
|
||||
background: var(--color-text-secondary);
|
||||
}
|
||||
}
|
||||
@@ -1,50 +0,0 @@
|
||||
.CDB-Shape-CircleItem {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
border: 1px solid var(--color-black);
|
||||
border-radius: 50%;
|
||||
|
||||
&.is-small {
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
&.is-blue {
|
||||
border: 1px solid var(--color-blue);
|
||||
}
|
||||
|
||||
&.is-white {
|
||||
border: 1px solid white;
|
||||
}
|
||||
|
||||
&.is-green {
|
||||
border: 1px solid var(--color-highlight);
|
||||
}
|
||||
|
||||
&.is-red {
|
||||
border: 1px solid var(--color-error);
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-Shape-CircleItem--fill {
|
||||
&.is-blue {
|
||||
border: 1px solid var(--color-blue);
|
||||
background: var(--color-blue);
|
||||
}
|
||||
|
||||
&.is-white {
|
||||
border: 1px solid white;
|
||||
background: white;
|
||||
}
|
||||
|
||||
&.is-green {
|
||||
border: 1px solid var(--color-highlight);
|
||||
background: var(--color-highlight);
|
||||
}
|
||||
|
||||
&.is-red {
|
||||
border: 1px solid var(--color-error);
|
||||
background: var(--color-error);
|
||||
}
|
||||
}
|
||||
@@ -1,29 +0,0 @@
|
||||
.CDB-Shape-hamburguer {
|
||||
width: 16px;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-Shape-hamburguerItem {
|
||||
height: 2px;
|
||||
margin-bottom: 2px;
|
||||
background: var(--color-black);
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-Shape-hamburguer.is-blue {
|
||||
.CDB-Shape-hamburguerItem {
|
||||
background: var(--color-blue);
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-Shape-hamburguer.is-white {
|
||||
.CDB-Shape-hamburguerItem {
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
@@ -1,69 +0,0 @@
|
||||
.CDB-Shape-magnify {
|
||||
display: block;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
border: 1px solid var(--color-black);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
bottom: -1px;
|
||||
width: 1px;
|
||||
height: 7px;
|
||||
transform: rotate(314deg);
|
||||
background: var(--color-black);
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-Shape-magnify.is-blue {
|
||||
&::before {
|
||||
border: 1px solid var(--color-blue);
|
||||
}
|
||||
|
||||
&::after {
|
||||
background: var(--color-blue);
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-Shape-magnify.is-white {
|
||||
&::before {
|
||||
border: 1px solid white;
|
||||
}
|
||||
|
||||
&::after {
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-Shape-magnify.is-small {
|
||||
&::before {
|
||||
top: 3px;
|
||||
left: 4px;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
bottom: 3px;
|
||||
width: 1px;
|
||||
height: 5px;
|
||||
transform: rotate(314deg);
|
||||
}
|
||||
}
|
||||
@@ -1,74 +0,0 @@
|
||||
.CDB-Shape-rectsHandle {
|
||||
position: relative;
|
||||
padding: 1px 0 0;
|
||||
}
|
||||
|
||||
.CDB-Shape-rectsHandle.is-small {
|
||||
padding: 3px 0 0 1px;
|
||||
|
||||
.CDB-Shape-rectsHandleItem {
|
||||
height: 2px;
|
||||
margin-bottom: 2px;
|
||||
|
||||
&::before {
|
||||
left: 5px;
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-Shape-rectsHandleItem {
|
||||
height: 3px;
|
||||
margin-bottom: 3px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
background: var(--color-black);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 9px;
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
background: var(--color-black);
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-Shape-rectsHandleItem--blue {
|
||||
&::before,
|
||||
&::after {
|
||||
background: var(--color-blue);
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-Shape-rectsHandleItem--white {
|
||||
&::before,
|
||||
&::after {
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-Shape-rectsHandleItem--grey {
|
||||
&::before,
|
||||
&::after {
|
||||
background: var(--color-line-hover);
|
||||
}
|
||||
}
|
||||
@@ -1,49 +0,0 @@
|
||||
.CDB-Shape-paragraph {
|
||||
padding-top: 3px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.CDB-Shape-paragraph.is-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.CDB-Shape-paragraph.is-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.CDB-Shape-paragraphItem {
|
||||
height: 1px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.CDB-Shape-paragraphItem:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.CDB-Shape-paragraphBar {
|
||||
display: inline-block;
|
||||
height: 1px;
|
||||
margin-bottom: 2px;
|
||||
background: var(--color-line-hover);
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.CDB-Shape-paragraph.is-active .CDB-Shape-paragraphBar {
|
||||
background: var(--color-blue);
|
||||
}
|
||||
|
||||
.CDB-Shape-paragraphBar--01 {
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
.CDB-Shape-paragraphBar--02 {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.CDB-Shape-paragraphBar--03 {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.CDB-Shape-paragraphBar--04 {
|
||||
width: 4px;
|
||||
}
|
||||
@@ -1,52 +0,0 @@
|
||||
.CDB-Shape-threePoints {
|
||||
display: inline-block;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.CDB-Shape-threePoints.is-horizontal {
|
||||
padding: 4px 0;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.CDB-Shape-threePointsItem {
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
margin-bottom: 5px;
|
||||
background: var(--color-black);
|
||||
}
|
||||
|
||||
.CDB-Shape-threePointsItem.is-round {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.CDB-Shape-threePointsItem:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.CDB-Shape-threePoints.is-small {
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
.CDB-Shape-threePoints.is-small .CDB-Shape-threePointsItem {
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.CDB-Shape-threePoints.is-medium {
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
.CDB-Shape-threePoints.is-medium .CDB-Shape-threePointsItem {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.CDB-Shape-threePoints.is-blue .CDB-Shape-threePointsItem {
|
||||
background: var(--color-blue);
|
||||
}
|
||||
|
||||
.CDB-Shape-threePoints.is-white .CDB-Shape-threePointsItem {
|
||||
background: white;
|
||||
}
|
||||
@@ -1,64 +0,0 @@
|
||||
.CDB-ArrowToogle {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 0;
|
||||
width: 10px;
|
||||
height: 1px;
|
||||
transform: rotate(-45deg);
|
||||
background: var(--color-black);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: -1px;
|
||||
width: 10px;
|
||||
height: 1px;
|
||||
transform: rotate(45deg);
|
||||
background: var(--color-black);
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-ArrowToogle.is-down {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.CDB-ArrowToogle.is-small {
|
||||
&::before {
|
||||
left: 2px;
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
right: 1px;
|
||||
width: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-ArrowToogle.is-blue {
|
||||
&::before {
|
||||
background: var(--color-blue);
|
||||
}
|
||||
|
||||
&::after {
|
||||
background: var(--color-blue);
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-ArrowToogle.is-white {
|
||||
&::before {
|
||||
background: white;
|
||||
}
|
||||
|
||||
&::after {
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
@@ -1,77 +0,0 @@
|
||||
.CDB-Shape {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.CDB-Shape--small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.CDB-Shape--medium {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.CDB-Shape:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.CDB-Type {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.CDB-Type-circle {
|
||||
position: absolute;
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-line-hover);
|
||||
}
|
||||
|
||||
.CDB-Type-circle--01 {
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.CDB-Type-circle--02 {
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.CDB-Type-circle--03 {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.CDB-Type-circle--04 {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.CDB-Type--polygon::before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
right: 1px;
|
||||
bottom: 1px;
|
||||
left: 1px;
|
||||
border: 1px solid var(--color-line-hover);
|
||||
}
|
||||
|
||||
.CDB-Type--line::before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 3px;
|
||||
width: 1px;
|
||||
transform: rotate(45deg);
|
||||
background: var(--color-line-hover);
|
||||
}
|
||||
@@ -1,49 +0,0 @@
|
||||
.CDB-Tag {
|
||||
padding: 0 3px;
|
||||
border: 1px solid var(--color-blue);
|
||||
border-radius: 2px;
|
||||
color: var(--color-blue);
|
||||
|
||||
&.is-public {
|
||||
border: 1px solid var(--color-public);
|
||||
color: var(--color-public);
|
||||
}
|
||||
|
||||
&.is-link {
|
||||
border: 1px solid var(--color-share);
|
||||
color: var(--color-share);
|
||||
}
|
||||
|
||||
&.is-password {
|
||||
border: 1px solid var(--color-password);
|
||||
color: var(--color-password);
|
||||
}
|
||||
|
||||
&.is-private {
|
||||
border: 1px solid var(--color-error);
|
||||
color: var(--color-error);
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-ListTag {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.CDB-ListTag-item {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.CDB-Tag.CDB-Tag--withLink {
|
||||
display: flex;
|
||||
padding: 4px 4px 4px 8px;
|
||||
border-radius: 4px;
|
||||
background: color(var(--color-blue) alpha(16%));
|
||||
}
|
||||
|
||||
.CDB-Tag.CDB-Tag--opaque {
|
||||
padding: 2px 4px;
|
||||
border: 0;
|
||||
border-radius: 2px;
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@@ -1,88 +0,0 @@
|
||||
.CDB-InfoTooltip {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
background: color(var(--color-black) alpha(8%));
|
||||
}
|
||||
|
||||
.CDB-InfoTooltip::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 4px solid transparent;
|
||||
}
|
||||
|
||||
.is-black {
|
||||
&.CDB-InfoTooltip.CDB-InfoTooltip--up::after {
|
||||
border-bottom-color: color(var(--color-black) alpha(8%));
|
||||
}
|
||||
|
||||
&.CDB-InfoTooltip.CDB-InfoTooltip--down::after {
|
||||
border-top-color: color(var(--color-black) alpha(8%));
|
||||
}
|
||||
|
||||
&.CDB-InfoTooltip.CDB-InfoTooltip--left::after {
|
||||
border-right-color: color(var(--color-black) alpha(8%));
|
||||
}
|
||||
|
||||
&.CDB-InfoTooltip.CDB-InfoTooltip--right::after {
|
||||
border-left-color: color(var(--color-black) alpha(8%));
|
||||
}
|
||||
}
|
||||
|
||||
.is-error {
|
||||
&.CDB-InfoTooltip.CDB-InfoTooltip--up::after {
|
||||
border-bottom-color: var(--color-error);
|
||||
}
|
||||
|
||||
&.CDB-InfoTooltip.CDB-InfoTooltip--down::after {
|
||||
border-top-color: var(--color-error);
|
||||
}
|
||||
|
||||
&.CDB-InfoTooltip.CDB-InfoTooltip--left::after {
|
||||
border-right-color: var(--color-error);
|
||||
}
|
||||
|
||||
&.CDB-InfoTooltip.CDB-InfoTooltip--right::after {
|
||||
border-left-color: var(--color-error);
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-InfoTooltip.CDB-InfoTooltip--up::after {
|
||||
top: -8px;
|
||||
left: calc(50% - 4px);
|
||||
border-top-width: 4px;
|
||||
border-top-style: solid;
|
||||
}
|
||||
|
||||
.CDB-InfoTooltip.CDB-InfoTooltip--down::after {
|
||||
bottom: -8px;
|
||||
left: calc(50% - 4px);
|
||||
border-top-width: 4px;
|
||||
border-top-style: solid;
|
||||
}
|
||||
|
||||
.CDB-InfoTooltip.CDB-InfoTooltip--left::after {
|
||||
top: calc(50% - 4px);
|
||||
left: -8px;
|
||||
border-right-width: 4px;
|
||||
border-right-style: solid;
|
||||
}
|
||||
|
||||
.CDB-InfoTooltip.CDB-InfoTooltip--right::after {
|
||||
top: calc(50% - 4px);
|
||||
right: -8px;
|
||||
border-right-width: 4px;
|
||||
border-right-style: solid;
|
||||
}
|
||||
|
||||
.CDB-InfoTooltip.is-error {
|
||||
background: var(--color-error);
|
||||
}
|
||||
|
||||
.CDB-InfoTooltip-text {
|
||||
color: white;
|
||||
}
|
||||
@@ -1,52 +0,0 @@
|
||||
.CDB-Text {
|
||||
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
|
||||
$sFontWeight-normal: 400;
|
||||
|
||||
&.is-semibold {
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
&.is-light {
|
||||
font-weight: var(--font-weight-lighter);
|
||||
}
|
||||
}
|
||||
|
||||
.is-underlined {
|
||||
border-bottom: 1px dotted var(--color-line);
|
||||
}
|
||||
|
||||
.CDB-Size-huge {
|
||||
font-size: var(--font-size-huge);
|
||||
line-height: var(--line-height-huge);
|
||||
}
|
||||
|
||||
.CDB-Size-large {
|
||||
font-size: var(--font-size-large);
|
||||
line-height: var(--line-height-large);
|
||||
}
|
||||
|
||||
.CDB-Size-medium {
|
||||
font-size: var(--font-size-medium);
|
||||
line-height: var(--line-height-medium);
|
||||
}
|
||||
|
||||
.CDB-Size-small {
|
||||
font-size: var(--font-size-small);
|
||||
line-height: var(--line-height-small);
|
||||
}
|
||||
|
||||
.CDB-Size-small.u-whiteTextColor {
|
||||
-webkit-font-smoothing: initial;
|
||||
}
|
||||
|
||||
.CDB-FontSize-small {
|
||||
font-size: var(--font-size-small);
|
||||
}
|
||||
|
||||
.CDB-FontSize-medium {
|
||||
font-size: var(--font-size-medium);
|
||||
}
|
||||
|
||||
.CDB-IconFont.is-disabled {
|
||||
opacity: 0.24;
|
||||
}
|
||||
@@ -1,42 +0,0 @@
|
||||
@import 'variables/sizes';
|
||||
@import 'variables/colors';
|
||||
@import 'utilities/defaults';
|
||||
@import 'utilities/fonts';
|
||||
@import 'utilities/helpers';
|
||||
@import 'components/forms/checkbox';
|
||||
@import 'components/forms/dropdowns';
|
||||
@import 'components/forms/inputs';
|
||||
@import 'components/forms/legends';
|
||||
@import 'components/forms/option-input';
|
||||
@import 'components/forms/radio';
|
||||
@import 'components/forms/selects';
|
||||
@import 'components/forms/tabsForms';
|
||||
@import 'components/forms/textarea';
|
||||
@import 'components/forms/toggle';
|
||||
@import 'components/shapes/add';
|
||||
@import 'components/shapes/arrow';
|
||||
@import 'components/shapes/check-circle';
|
||||
@import 'components/shapes/close';
|
||||
@import 'components/shapes/dash';
|
||||
@import 'components/shapes/dataset';
|
||||
@import 'components/shapes/dots';
|
||||
@import 'components/shapes/error-circle';
|
||||
@import 'components/shapes/hamburguer';
|
||||
@import 'components/shapes/magnify';
|
||||
@import 'components/shapes/move';
|
||||
@import 'components/shapes/paragraph';
|
||||
@import 'components/shapes/threePoints';
|
||||
@import 'components/shapes/toogle-arrow';
|
||||
@import 'components/shapes/type';
|
||||
@import 'components/avatars';
|
||||
@import 'components/boxes';
|
||||
@import 'components/buttons';
|
||||
@import 'components/colors';
|
||||
@import 'components/headers';
|
||||
@import 'components/lists';
|
||||
@import 'components/loader';
|
||||
@import 'components/menu';
|
||||
@import 'components/tags';
|
||||
@import 'components/tooltips';
|
||||
@import 'components/typography';
|
||||
@import 'components/layer-selector';
|
||||
@@ -1,16 +0,0 @@
|
||||
/**
|
||||
* Base styles
|
||||
*/
|
||||
|
||||
body {
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-blue);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
@@ -1,32 +0,0 @@
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
src: url('../fonts/OpenSans-Light.eot');
|
||||
src:
|
||||
url('../fonts/OpenSans-Light.eot?#iefix') format('embedded-opentype'),
|
||||
url('../fonts/OpenSans-Light.woff') format('woff'),
|
||||
url('../fonts/OpenSans-Light.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url('../fonts/OpenSans-Regular.eot');
|
||||
src:
|
||||
url('../fonts/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
|
||||
url('../fonts/OpenSans-Regular.woff') format('woff'),
|
||||
url('../fonts/OpenSans-Regular.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
src: url('../fonts/OpenSans-Semibold.eot');
|
||||
src:
|
||||
url('../fonts/OpenSans-Semibold.eot?#iefix') format('embedded-opentype'),
|
||||
url('../fonts/OpenSans-Semibold.woff') format('woff'),
|
||||
url('../fonts/OpenSans-Semibold.ttf') format('truetype');
|
||||
}
|
||||
@@ -1,175 +0,0 @@
|
||||
/* MARGINS */
|
||||
|
||||
.u-tSpace--s {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.u-tSpace {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.u-tSpace--m {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.u-tSpace-xl {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.u-rSpace--s {
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.u-rSpace {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.u-rSpace--m {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.u-rSpace--xl {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.u-bSpace--s {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.u-bSpace {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.u-bSpace--m {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.u-bSpace--xl {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.u-lSpace--s {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.u-lSpace {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.u-lSpace--m {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.u-lSpace--xl {
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
/* -- COLORS */
|
||||
.u-actionTextColor {
|
||||
color: var(--color-blue);
|
||||
|
||||
&:hover {
|
||||
color: var(--color-blue-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.u-mainTextColor {
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.u-secondaryTextColor {
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.u-altTextColor {
|
||||
color: var(--color-text-alt);
|
||||
}
|
||||
|
||||
.u-hintTextColor {
|
||||
color: var(--color-text-alt);
|
||||
}
|
||||
|
||||
.u-alertTextColor {
|
||||
color: var(--color-alert);
|
||||
}
|
||||
|
||||
.u-whiteTextColor {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.u-errorTextColor {
|
||||
color: var(--color-error);
|
||||
}
|
||||
|
||||
/* -- DISPLAYS */
|
||||
|
||||
.u-iBlock {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.u-showDesktop {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.u-showMobile {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* -- DECORATION */
|
||||
|
||||
.u-ellipsis {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.u-upperCase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* -- FLEX */
|
||||
|
||||
.u-flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.u-justifySpace {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.u-justifyCenter {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.u-justifyStart {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.u-justifyEnd {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.u-alignStart {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.u-alignCenter {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.u-alignEnd {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
/* Media queries */
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
.u-showDesktop {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.u-showMobile {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
@@ -1,24 +0,0 @@
|
||||
:root {
|
||||
--color-blue: #1785FB;
|
||||
--color-blue-hover: color(var(--color-blue) l(-10%) s(-10%));
|
||||
--color-softgray: #F9F9F9;
|
||||
--color-black: #2E3C43;
|
||||
|
||||
--color-highlight: #9DE0AD;
|
||||
--color-alert: #FFFFC0;
|
||||
--color-public: #9BC63B;
|
||||
--color-share: #FEB100;
|
||||
--color-password: #FB7B23;
|
||||
--color-error: #F15743;
|
||||
|
||||
--color-text-primary: var(--color-black);
|
||||
--color-text-secondary: #747D82;
|
||||
--color-text-alt: #BABEC0;
|
||||
--color-text-alt-hover: color(var(--color-text-alt) l(-10%) s(-10%));
|
||||
|
||||
--color-bg-primary: #FFF;
|
||||
--color-bg-secondary: #F2F6F9;
|
||||
|
||||
--color-line: #DDD;
|
||||
--color-line-hover: color(var(--color-line) l(-10%) s(-10%));
|
||||
}
|
||||
@@ -1,23 +0,0 @@
|
||||
:root {
|
||||
--layout-desktop: 352px;
|
||||
--layout-mobile: 280px;
|
||||
|
||||
--unit: 8px;
|
||||
|
||||
--margin-section: 24px;
|
||||
--margin-element: 14px;
|
||||
|
||||
--font-size-small: 10px;
|
||||
--font-size-medium: 12px;
|
||||
--font-size-large: 16px;
|
||||
--font-size-huge: 26px;
|
||||
|
||||
--font-weight-lighter: 300;
|
||||
--font-weight-normal: 400;
|
||||
--font-weight-semibold: 600;
|
||||
|
||||
--line-height-small: 14px;
|
||||
--line-height-medium: 16px;
|
||||
--line-height-large: 22px;
|
||||
--line-height-huge: 34px;
|
||||
}
|
||||
67
src/vendor/reset.css
vendored
67
src/vendor/reset.css
vendored
@@ -1,67 +0,0 @@
|
||||
/* http://meyerweb.com/eric/tools/css/reset/
|
||||
v2.0 | 20110126
|
||||
License: none (public domain)
|
||||
*/
|
||||
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font: inherit;
|
||||
font-size: 100%;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
}
|
||||
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: '';
|
||||
}
|
||||
|
||||
table {
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
// Resetting buttons too
|
||||
button {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
dd, dt {
|
||||
display: inline-block;
|
||||
}
|
||||
15962
styleguide/index.html
Normal file
15962
styleguide/index.html
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user