From 35efba2b4e147e64789464019e8be0139955e1d8 Mon Sep 17 00:00:00 2001 From: rubenmoya Date: Fri, 22 Dec 2017 18:10:38 +0100 Subject: [PATCH] Migrate components to PostCSS syntax --- src/components/_avatars.css | 50 --- src/components/_buttons.css | 498 ----------------------- src/components/_colors.css | 124 ------ src/components/_headers.css | 222 ---------- src/components/_layer-selector.css | 23 -- src/components/_loader.css | 163 -------- src/components/_menu.css | 261 ------------ src/components/_tags.css | 130 ------ src/components/_tooltips.css | 143 ------- src/components/_typography.css | 73 ---- src/components/avatars.css | 26 ++ src/components/{_boxes.css => boxes.css} | 28 +- src/components/buttons.css | 233 +++++++++++ src/components/colors.css | 76 ++++ src/components/headers.css | 60 +++ src/components/layer-selector.css | 13 + src/components/{_lists.css => lists.css} | 15 +- src/components/loader.css | 85 ++++ src/components/menu.css | 131 ++++++ src/components/tags.css | 49 +++ src/components/tooltips.css | 88 ++++ src/components/typography.css | 52 +++ 22 files changed, 826 insertions(+), 1717 deletions(-) delete mode 100644 src/components/_avatars.css delete mode 100644 src/components/_buttons.css delete mode 100644 src/components/_colors.css delete mode 100644 src/components/_headers.css delete mode 100644 src/components/_layer-selector.css delete mode 100644 src/components/_loader.css delete mode 100644 src/components/_menu.css delete mode 100644 src/components/_tags.css delete mode 100644 src/components/_tooltips.css delete mode 100644 src/components/_typography.css create mode 100644 src/components/avatars.css rename src/components/{_boxes.css => boxes.css} (52%) create mode 100644 src/components/buttons.css create mode 100644 src/components/colors.css create mode 100644 src/components/headers.css create mode 100644 src/components/layer-selector.css rename src/components/{_lists.css => lists.css} (74%) create mode 100644 src/components/loader.css create mode 100644 src/components/menu.css create mode 100644 src/components/tags.css create mode 100644 src/components/tooltips.css create mode 100644 src/components/typography.css diff --git a/src/components/_avatars.css b/src/components/_avatars.css deleted file mode 100644 index ba95446..0000000 --- a/src/components/_avatars.css +++ /dev/null @@ -1,50 +0,0 @@ -// Typography styles -// ---------------------------------------------- - -/* SG -# Avatars/List - -``` - -``` -*/ - -.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-secondary); -} - -.CDB-AvatarList-itemMedia { - width: 16px; - height: 16px; - border-radius: 50%; -} diff --git a/src/components/_buttons.css b/src/components/_buttons.css deleted file mode 100644 index 4f99d24..0000000 --- a/src/components/_buttons.css +++ /dev/null @@ -1,498 +0,0 @@ -// Buttons styles -// ---------------------------------------------- - -/* SG -# Buttons/Primary - -Layout Component: -[CDB-Button][CDB-Button--primary | CDB-Button--secondary] - -``` - - - - - - - - - - - - - - - - -
-
-
- - - - - - - - - - - - - - - - - -
-
-
- - - - - - - - - - - - - - - - -
-
-
- -
- - - - - - - - - - - - - - - -
- -``` -*/ - -.CDB-Button { - position: relative; - padding: $baseSize $baseSize + 12; - transition: background, 300ms; - border-radius: $baseSize / 2; - cursor: pointer; - box-sizing: border-box; - - - .CDB-Button-Text { - display: block; - } - - &.is-disabled { - opacity: 0.24; - cursor: default; - } -} - -.CDB-Button--loading { - .CDB-Button-loader { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%) scale(0); - transform-origin: 50%; - opacity: 0; - z-index: 10; - } - - .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: $baseSize / 2 $baseSize + 4; - border-radius: 3px; -} - -.CDB-Button--big { - padding: $baseSize + 3 $baseSize + 12; -} - -.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: darken(var(--color-alert), 8%); - } - - &.is-disabled { - &:hover, - &:active { - background: var(--color-alert); - } - } -} - - -.CDB-Button--error, -.CDB-Button--negative { - background: var(--color-error); - color: white; - - &:hover, - &:active { - background: darken(var(--color-error), 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); - } - } -} - - - -// Buttons styles -// ---------------------------------------------- - -/* SG -# Buttons/Secondary - -``` - - - - - - - - - - - - - - - - - -
-
-
- -
- - - - - - - - - - - - - - - -
- -``` -*/ - - -.CDB-Button--secondary { - color: var(--color-blue); - box-shadow: inset 0 0 0 1px 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 { - color: white; - box-shadow: inset 0 0 0 1px white; - - &:hover { - background: rgba(white, 0.08); - box-shadow: inset 0 0 0 2px darken(white, 8%); - } - - &:active { - background: rgba($cMainBg, 0.08); - 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; - } - } -} diff --git a/src/components/_colors.css b/src/components/_colors.css deleted file mode 100644 index 74487ce..0000000 --- a/src/components/_colors.css +++ /dev/null @@ -1,124 +0,0 @@ -// Colors styles -// ---------------------------------------------- - -/* SG -# Colors/structure - - -``` -
-
-
-
-
-
-``` -*/ - -.Color-Blue { - background: var(--color-blue); -} -.Color-White { - border: 1px solid #E5E5E5; - background: white; -} -.Color-Dark { - background: $cBlack; -} - -.Color-MainDark { - background: $cMainBg; -} -.Color-SecondaryDark { - background: $cSecondaryDark; -} -.Color-SecondaryBackground { - background: $cSecondaryBackground; -} -.Color-ThirdBackground { - background: var(--color-softgray); -} - - -/* SG -# Colors/line - - -``` -
-
-
-
-``` -*/ - - -.Color-HoverLine { - background: var(--color-line-hover); -} -.Color-MainLine { - background: var(--color-line); -} -.Color-SecondaryLine { - background: var(--color-line-secondary); -} - - -/* SG -# Colors/typography - - -``` -
-
-
-
-
-
-``` -*/ - - -.Color-Type02 { - background: var(--color-text-secondary); -} -.Color-Type03 { - background: var(--color-text-alt); -} -.Color-Type04 { - background: var(--color-text-alt); -} - - -/* SG -# Colors/other - - -``` -
-
-
-
-
-
-``` -*/ - -.Color-Higlight { - background: $cHighlight; -} -.Color-Alert { - background: var(--color-alert); -} -.Color-Public { - background: $cPublic; -} -.Color-Link { - background: $cLink; -} -.Color-Password { - background: $cPassword; -} -.Color-Error { - background: var(--color-error); -} diff --git a/src/components/_headers.css b/src/components/_headers.css deleted file mode 100644 index a0efbee..0000000 --- a/src/components/_headers.css +++ /dev/null @@ -1,222 +0,0 @@ -// Typography styles -// ---------------------------------------------- - -/* SG -# Headers - -``` -
-
-

Name Map

-
- -
-
-
-
-
-
-
- -
-
- -
- -
-
-
- -
- -
-
-

Stadiums Affected Stadiums Affected Stadiums AffectedStadiums Affected Stadiums Affected Stadiums Affected Stadiums Affected

- -
-
-
    -
  • -
  • -
-
-

populates_places

-
-
- -
-
-
- -
- -
-
-

Basemap

-
- -
-
-
-
-
-
-
- -
-
-

Positron by CartoDB

-
-
- -
-
-
- -
- -
- -
-
    -
  • -
  • -
-
-

populates_places

-
-
- -
-
-
- -
-
1
- -
-
-

Type

- -
- -
-
-
- -
-
- -

Histogram

-

Distribution of a numeric variable in a range

-
-
- -
-
-
-``` -*/ - -.CDB-HeaderInfo { - @include display-flex(); - @include 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 { - @include flex(1); -} -.CDB-HeaderInfo-back { - margin-top: 7px; -} -.CDB-HeaderInfo-title { - @include display-flex(); - @include align-items(center); -} -.CDB-HeaderInfo-titleText { - @include flex(1); - width: 0; - padding-right: 16px; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; -} -.CDB-HeaderInfo-actionsItem { - display: inline-block; - margin-left: 4px; - vertical-align: middle; -} -.CDB-HeaderNumeration { - width: $baseSize * 3; - min-width: $baseSize * 3; - height: $baseSize * 3; - border: 1px solid var(--color-line); - border-radius: 4px; - background-color: white; - color: var(--color-text-alt); - font-size: $sFontSize-small; - line-height: 23px; - text-align: center; - box-sizing: border-box; -} diff --git a/src/components/_layer-selector.css b/src/components/_layer-selector.css deleted file mode 100644 index 6a0b4b4..0000000 --- a/src/components/_layer-selector.css +++ /dev/null @@ -1,23 +0,0 @@ -// Layer selector and letters -// ---------------------------------------------- - -/* SG -# Layer selector and letters - - -``` - b0 -``` -*/ - -.CDB-SelectorLayer { - position: relative; -} -.CDB-SelectorLayer.is-disabled { - background-color: var(--color-softgray); -} -.CDB-SelectorLayer-letter { - height: 14px; - padding: 1px 5px; - border-radius: 2px; -} diff --git a/src/components/_loader.css b/src/components/_loader.css deleted file mode 100644 index 97f17b7..0000000 --- a/src/components/_loader.css +++ /dev/null @@ -1,163 +0,0 @@ -// Loader styles -// ---------------------------------------------- - -/* SG -# Loader/principal - -This is the generic loader for widgets, maps, components, ... - -``` -
- -``` -*/ - -.CDB-Loader { - position: absolute; - 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%); - z-index: 2; -} - -.CDB-Loader.is-visible { - @include css3-prefix(animation, loader-progress 1s cubic-bezier(0, 0.85, 0.6, 0.6) infinite); -} - -@include keyframes(loader-progress) { - from { - transform: translateX(-200%); - } - to { - transform: translateX(200%); - } -} - -/* SG -# Loader/circle - -``` -
-
- -
- -
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -``` -*/ -.CDB-LoaderIcon { - width: 16px; - height: 16px; -} - -.CDB-LoaderIcon-spinner { - animation: rotate 2s linear infinite; - width: 16px; - height: 16px; -} - -.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 { - stroke: rgba(255, 255, 255, 0.88); - stroke-linecap: round; - animation: dash 1.5s ease-in-out infinite; - stroke-width: 4px; -} - -.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; - } -} diff --git a/src/components/_menu.css b/src/components/_menu.css deleted file mode 100644 index 92ac1eb..0000000 --- a/src/components/_menu.css +++ /dev/null @@ -1,261 +0,0 @@ -// Menu styles -// ---------------------------------------------- - -/* SG -# Menu/Navigation - - -``` - - -

-

- -
- -
- -

-

- - - - -

-

- -
- -
- -``` -*/ - -.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: $baseSize; - padding-right: 0; - padding-bottom: 0; - padding-left: $baseSize * 2; - } -} - - -.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 $cMainText; - color: $cMainText; -} - -.CDB-NavMenu-item.is-disabled .CDB-NavMenu-link { - pointer-events: none; - color: var(--color-text-alt); - cursor: default; -} - -.CDB-NavSubmenu { - border-bottom: 2px solid var(--color-line-secondary); - - &--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: $cMainText; -} - -.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 { - pointer-events: none; - cursor: default; - opacity: 0.24; - } - - .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); - } -} diff --git a/src/components/_tags.css b/src/components/_tags.css deleted file mode 100644 index 1166d08..0000000 --- a/src/components/_tags.css +++ /dev/null @@ -1,130 +0,0 @@ -// Typography styles -// ---------------------------------------------- - -/* SG -# Tags / Privacy - -``` - - - - - -``` -*/ - -.CDB-Tag { - padding: 0 3px; - border: 1px solid var(--color-blue); - border-radius: 2px; - color: var(--color-blue); - - &.is-public { - border: 1px solid $cPublic; - color: $cPublic; - } - &.is-link { - border: 1px solid $cLink; - color: $cLink; - } - &.is-password { - border: 1px solid $cPassword; - color: $cPassword; - } - &.is-private { - border: 1px solid var(--color-error); - color: var(--color-error); - } -} - -/* SG -# Tags / Metadata - -``` - - -``` -*/ - -.CDB-ListTag { - @include display-flex(); -} - -.CDB-ListTag-item { - margin-right: $baseSize; -} - -.CDB-Tag.CDB-Tag--withLink { - @include display-flex(); - padding: $halfBaseSize $halfBaseSize $halfBaseSize $baseSize; - border-radius: $halfBaseSize; - background: rgba(var(--color-blue), 0.16); -} - -/* SG -# Tags / Data Type - -``` - - -``` -*/ - -.CDB-Tag.CDB-Tag--opaque { - padding: $baseSize / 4 $halfBaseSize; - border: 0; - border-radius: $baseSize / 4; - background: rgba(0, 0, 0, 0.04); - text-transform: uppercase; -} diff --git a/src/components/_tooltips.css b/src/components/_tooltips.css deleted file mode 100644 index 22bbc0d..0000000 --- a/src/components/_tooltips.css +++ /dev/null @@ -1,143 +0,0 @@ -// Info Tooltip -// ---------------------------------------------- - -/* SG -# Info Tooltip - - -``` -
-
-

627K Transactions

-
-
- -
-
-

627K Transactions

-
-
- -
-
-

627K Transactions

-
-
- -
-
-

627K Transactions

-
-
- -
-
-

627K Transactions

-
-
- -
-
-

627K Transactions

-
-
- - -
-
-

627K Transactions

-
-
- -
-
-

627K Transactions

-
-
- - - -``` -*/ - -.CDB-InfoTooltip { - display: inline-block; - position: absolute; - padding: $baseSize; - border-radius: $halfBaseSize; - background: rgba($cMainBg, 0.8); -} -.CDB-InfoTooltip::after { - display: block; - position: absolute; - width: 0; - height: 0; - border: 4px solid transparent; - content: ''; -} - -.is-black { - &.CDB-InfoTooltip.CDB-InfoTooltip--up::after { - border-bottom-color: rgba($cMainBg, 0.8); - } - &.CDB-InfoTooltip.CDB-InfoTooltip--down::after { - border-top-color: rgba($cMainBg, 0.8); - } - &.CDB-InfoTooltip.CDB-InfoTooltip--left::after { - border-right-color: rgba($cMainBg, 0.8); - } - &.CDB-InfoTooltip.CDB-InfoTooltip--right::after { - border-left-color: rgba($cMainBg, 0.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: -$baseSize; - left: calc(50% - #{$halfBaseSize}); - border-top-width: $halfBaseSize; - border-top-style: solid; -} - -.CDB-InfoTooltip.CDB-InfoTooltip--down::after { - bottom: -$baseSize; - left: calc(50% - #{$halfBaseSize}); - border-top-width: $halfBaseSize; - border-top-style: solid; -} - -.CDB-InfoTooltip.CDB-InfoTooltip--left::after { - top: calc(50% - #{$halfBaseSize}); - left: -$baseSize; - border-right-width: $halfBaseSize; - border-right-style: solid; -} - -.CDB-InfoTooltip.CDB-InfoTooltip--right::after { - top: calc(50% - #{$halfBaseSize}); - right: -$baseSize; - border-right-width: $halfBaseSize; - border-right-style: solid; -} - -.CDB-InfoTooltip.is-error { - background: var(--color-error); -} - -.CDB-InfoTooltip-text { - color: white; -} diff --git a/src/components/_typography.css b/src/components/_typography.css deleted file mode 100644 index 5f2f5f4..0000000 --- a/src/components/_typography.css +++ /dev/null @@ -1,73 +0,0 @@ -// Typography styles -// ---------------------------------------------- - -/* SG -# Typography - -``` -

Open Sans 26/34 Regular

-

Open Sans 26/34 Light

-

Open Sans 16/22 Regular

-

Open Sans 12/16 Semibold

-

Open Sans 12/16 Semibold Uppercase

-

Open Sans 12/16 Regular

-

Open Sans 12/16 Regular

-

Open Sans 12/16 Regular

-

Open Sans 10/14 Semibold

-

Open Sans 10/14 Regular

-? -``` -*/ - -.CDB-Text { - font-family: 'Open Sans'; - $sFontWeight-normal: 400; - - &.is-semibold { - font-weight: $sFontWeight-semibold; - } - &.is-light { - font-weight: $sFontWeight-lighter; - } -} - -.is-underlined { - border-bottom: 1px dotted var(--color-line); -} - -.CDB-Size-huge { - font-size: $sFontSize-huge; - line-height: $sLineHeight-huge; -} - -.CDB-Size-large { - font-size: $sFontSize-large; - line-height: $sLineHeight-large; -} - -.CDB-Size-medium { - font-size: var(--font-size-medium); - line-height: var(--line-height-medium); -} - -.CDB-Size-small { - font-size: $sFontSize-small; - line-height: $sLineHeight-small; - -} - -.CDB-Size-small.u-whiteTextColor { - -webkit-font-smoothing: initial; -} - -.CDB-FontSize-small { - font-size: $sFontSize-small; -} - -.CDB-FontSize-medium { - font-size: var(--font-size-medium); -} - -.CDB-IconFont.is-disabled { - opacity: 0.24; -} diff --git a/src/components/avatars.css b/src/components/avatars.css new file mode 100644 index 0000000..db9438f --- /dev/null +++ b/src/components/avatars.css @@ -0,0 +1,26 @@ +.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-secondary); +} + +.CDB-AvatarList-itemMedia { + width: 16px; + height: 16px; + border-radius: 50%; +} diff --git a/src/components/_boxes.css b/src/components/boxes.css similarity index 52% rename from src/components/_boxes.css rename to src/components/boxes.css index f90cf58..16496df 100644 --- a/src/components/_boxes.css +++ b/src/components/boxes.css @@ -1,38 +1,30 @@ -// Menu styles -// ---------------------------------------------- - -/* SG -# Boxes/Dropdown - - -``` -
 
-``` -*/ - .CDB-Box-modal { min-width: 160px; border: 1px solid var(--color-line); border-radius: 4px; background: white; - box-shadow: 0 $baseSize $baseSize * 2 0 rgba(0, 0, 0, 0.16); + box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.16); box-sizing: border-box; } .CDB-Box-modalHeader { - background: $cSecondaryBackground; + background: var(--color-bg-secondary); } + .CDB-Box-modalHeaderItem { - @include display-flex(); - padding: $baseSize + 4 $baseSize * 2; + display: flex; + padding: 12px 16px; border-bottom: 1px solid var(--color-line); } + .CDB-Box-modalHeaderItem--block { display: block; } + .CDB-Box-modalHeaderItem--paddingHorizontal { - padding: 0 $baseSize * 2; + padding: 0 16px; } + .CDB-Box-modalHeaderItem--paddingVertical { - padding: $baseSize + 4 0; + padding: 12px 0; } diff --git a/src/components/buttons.css b/src/components/buttons.css new file mode 100644 index 0000000..7ae20ac --- /dev/null +++ b/src/components/buttons.css @@ -0,0 +1,233 @@ +.CDB-Button { + position: relative; + padding: 8px 20px; + transition: background 300ms; + border-radius: 4px; + cursor: pointer; + box-sizing: border-box; + + + .CDB-Button-Text { + display: block; + } + + &.is-disabled { + opacity: 0.24; + cursor: default; + } +} + +.CDB-Button--loading { + .CDB-Button-loader { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%) scale(0); + transform-origin: 50%; + opacity: 0; + z-index: 10; + } + + .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 { + color: var(--color-blue); + box-shadow: inset 0 0 0 1px 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 { + color: white; + box-shadow: inset 0 0 0 1px 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; + } + } +} diff --git a/src/components/colors.css b/src/components/colors.css new file mode 100644 index 0000000..b56f364 --- /dev/null +++ b/src/components/colors.css @@ -0,0 +1,76 @@ +.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-secondary); +} + +.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); +} diff --git a/src/components/headers.css b/src/components/headers.css new file mode 100644 index 0000000..600e68a --- /dev/null +++ b/src/components/headers.css @@ -0,0 +1,60 @@ +.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; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} + +.CDB-HeaderInfo-actionsItem { + display: inline-block; + margin-left: 4px; + vertical-align: middle; +} + +.CDB-HeaderNumeration { + 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; + box-sizing: border-box; +} diff --git a/src/components/layer-selector.css b/src/components/layer-selector.css new file mode 100644 index 0000000..590e86c --- /dev/null +++ b/src/components/layer-selector.css @@ -0,0 +1,13 @@ +.CDB-SelectorLayer { + position: relative; +} + +.CDB-SelectorLayer.is-disabled { + background-color: var(--color-softgray); +} + +.CDB-SelectorLayer-letter { + height: 14px; + padding: 1px 5px; + border-radius: 2px; +} diff --git a/src/components/_lists.css b/src/components/lists.css similarity index 74% rename from src/components/_lists.css rename to src/components/lists.css index e70d220..adb58f7 100644 --- a/src/components/_lists.css +++ b/src/components/lists.css @@ -1,15 +1,3 @@ -// List styles -// ---------------------------------------------- - -/* SG -# Lists/Lists Decorations - - -``` -
 
-``` -*/ - .CDB-ListDecoration-item { border-bottom: 1px solid var(--color-line-secondary); @@ -17,12 +5,15 @@ border-bottom: 0; } } + .CDB-ListDecoration-itemPadding { padding: 12px 16px; } + .CDB-ListDecoration-itemPadding--horizontal { padding: 0 16px; } + .CDB-ListDecoration-itemPadding--vertical { padding: 12px 0; } diff --git a/src/components/loader.css b/src/components/loader.css new file mode 100644 index 0000000..7de14a6 --- /dev/null +++ b/src/components/loader.css @@ -0,0 +1,85 @@ +.CDB-Loader { + position: absolute; + 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%); + z-index: 2; +} + +.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 { + animation: rotate 2s linear infinite; + width: 16px; + height: 16px; +} + +.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 { + stroke: rgba(255, 255, 255, 0.88); + stroke-linecap: round; + animation: dash 1.5s ease-in-out infinite; + stroke-width: 4px; +} + +.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; + } +} diff --git a/src/components/menu.css b/src/components/menu.css new file mode 100644 index 0000000..9550961 --- /dev/null +++ b/src/components/menu.css @@ -0,0 +1,131 @@ +.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 { + pointer-events: none; + color: var(--color-text-alt); + cursor: default; +} + +.CDB-NavSubmenu { + border-bottom: 2px solid var(--color-line-secondary); + + &--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 { + pointer-events: none; + cursor: default; + opacity: 0.24; + } + + .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); + } +} diff --git a/src/components/tags.css b/src/components/tags.css new file mode 100644 index 0000000..5815417 --- /dev/null +++ b/src/components/tags.css @@ -0,0 +1,49 @@ +.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; +} diff --git a/src/components/tooltips.css b/src/components/tooltips.css new file mode 100644 index 0000000..6286b68 --- /dev/null +++ b/src/components/tooltips.css @@ -0,0 +1,88 @@ +.CDB-InfoTooltip { + display: inline-block; + position: absolute; + padding: 8px; + border-radius: 4px; + background: color(var(--color-black) alpha(8%)); +} + +.CDB-InfoTooltip::after { + display: block; + position: absolute; + width: 0; + height: 0; + border: 4px solid transparent; + content: ''; +} + +.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; +} diff --git a/src/components/typography.css b/src/components/typography.css new file mode 100644 index 0000000..00140f8 --- /dev/null +++ b/src/components/typography.css @@ -0,0 +1,52 @@ +.CDB-Text { + font-family: 'Open Sans'; + $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; +}