mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2024-12-23 01:20:24 +03:00
Merge pull request #644 from acelaya-forks/feature/new-css-style
Feature/new css style
This commit is contained in:
commit
c2818645c4
10 changed files with 563 additions and 2885 deletions
26
.stylelintrc
26
.stylelintrc
|
@ -1,11 +1,29 @@
|
||||||
{
|
{
|
||||||
"extends": [
|
"extends": [
|
||||||
"stylelint-config-adidas",
|
"stylelint-config-standard",
|
||||||
"stylelint-config-adidas-bem",
|
|
||||||
"stylelint-config-recommended-scss"
|
"stylelint-config-recommended-scss"
|
||||||
],
|
],
|
||||||
"syntax": "scss",
|
"syntax": "scss",
|
||||||
"plugins": [
|
"plugins": [
|
||||||
"stylelint-scss"
|
"stylelint-scss",
|
||||||
]
|
"stylelint-selector-bem-pattern"
|
||||||
|
],
|
||||||
|
"rules": {
|
||||||
|
"string-quotes": "single",
|
||||||
|
"number-leading-zero": "never",
|
||||||
|
"selector-pseudo-element-colon-notation": null,
|
||||||
|
"alpha-value-notation": null,
|
||||||
|
"scss/at-import-partial-extension": null,
|
||||||
|
"color-hex-length": null,
|
||||||
|
"selector-class-pattern": null,
|
||||||
|
"scss/no-global-function-names": null,
|
||||||
|
"plugin/selector-bem-pattern": {
|
||||||
|
"componentName": "[A-Z]+",
|
||||||
|
"componentSelectors": {
|
||||||
|
"initial": "^\\.{componentName}(?:-[a-z]+)?$",
|
||||||
|
"combined": "^\\.combined-{componentName}-[a-z]+$"
|
||||||
|
},
|
||||||
|
"utilitySelectors": "^\\.util-[a-z]+$"
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -14,6 +14,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
||||||
* [#594](https://github.com/shlinkio/shlink-web-client/pull/594) Updated to a new coding standard.
|
* [#594](https://github.com/shlinkio/shlink-web-client/pull/594) Updated to a new coding standard.
|
||||||
* [#627](https://github.com/shlinkio/shlink-web-client/pull/627) Updated to Jest 28.
|
* [#627](https://github.com/shlinkio/shlink-web-client/pull/627) Updated to Jest 28.
|
||||||
* [#603](https://github.com/shlinkio/shlink-web-client/pull/603) Migrated to new and maintained dependencies to parse CSV<->JSON.
|
* [#603](https://github.com/shlinkio/shlink-web-client/pull/603) Migrated to new and maintained dependencies to parse CSV<->JSON.
|
||||||
|
* [#610](https://github.com/shlinkio/shlink-web-client/pull/610) Migrated to a maintained coding style for CSS.
|
||||||
* [#619](https://github.com/shlinkio/shlink-web-client/pull/619) Introduced react testing library, to progressively replace enzyme.
|
* [#619](https://github.com/shlinkio/shlink-web-client/pull/619) Introduced react testing library, to progressively replace enzyme.
|
||||||
|
|
||||||
### Deprecated
|
### Deprecated
|
||||||
|
|
3383
package-lock.json
generated
3383
package-lock.json
generated
File diff suppressed because it is too large
Load diff
10
package.json
10
package.json
|
@ -102,11 +102,11 @@
|
||||||
"sass": "^1.49.9",
|
"sass": "^1.49.9",
|
||||||
"serve": "^13.0.2",
|
"serve": "^13.0.2",
|
||||||
"stryker-cli": "^1.0.2",
|
"stryker-cli": "^1.0.2",
|
||||||
"stylelint": "^13.7.2",
|
"stylelint": "^14.8.2",
|
||||||
"stylelint-config-adidas": "^1.3.0",
|
"stylelint-config-recommended-scss": "^6.0.0",
|
||||||
"stylelint-config-adidas-bem": "^1.2.0",
|
"stylelint-config-standard": "^25.0.0",
|
||||||
"stylelint-config-recommended-scss": "^4.2.0",
|
"stylelint-scss": "^4.2.0",
|
||||||
"stylelint-scss": "^3.18.0",
|
"stylelint-selector-bem-pattern": "^2.1.1",
|
||||||
"ts-mockery": "^1.2.0",
|
"ts-mockery": "^1.2.0",
|
||||||
"typescript": "^4.6.2",
|
"typescript": "^4.6.2",
|
||||||
"webpack": "^5.70.0"
|
"webpack": "^5.70.0"
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
.aside-menu {
|
.aside-menu {
|
||||||
width: $asideMenuWidth;
|
width: $asideMenuWidth;
|
||||||
background-color: var(--primary-color);
|
background-color: var(--primary-color);
|
||||||
box-shadow: rgba(0, 0, 0, .05) 0 8px 15px;
|
box-shadow: rgb(0 0 0 / .05) 0 8px 15px;
|
||||||
position: fixed !important;
|
position: fixed !important;
|
||||||
padding-top: 13px;
|
padding-top: 13px;
|
||||||
padding-bottom: 10px;
|
padding-bottom: 10px;
|
||||||
|
@ -23,7 +23,7 @@
|
||||||
@media (max-width: $smMax) {
|
@media (max-width: $smMax) {
|
||||||
transition: left 300ms;
|
transition: left 300ms;
|
||||||
top: $headerHeight - 3px;
|
top: $headerHeight - 3px;
|
||||||
box-shadow: -10px 0 50px 11px rgba(0, 0, 0, .55);
|
box-shadow: -10px 0 50px 11px rgb(0 0 0 / .55);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -16,7 +16,7 @@
|
||||||
z-index: 1035;
|
z-index: 1035;
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: rgba(255, 255, 255, .5);
|
color: rgb(255 255 255 / .5);
|
||||||
|
|
||||||
@media (max-width: $smMax) {
|
@media (max-width: $smMax) {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
|
@ -113,7 +113,7 @@
|
||||||
background: var(--primary-color);
|
background: var(--primary-color);
|
||||||
border: 1px solid var(--border-color);
|
border: 1px solid var(--border-color);
|
||||||
border-radius: .25rem;
|
border-radius: .25rem;
|
||||||
box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
|
box-shadow: 0 2px 6px rgb(0 0 0 / .2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.react-tags__suggestions li {
|
.react-tags__suggestions li {
|
||||||
|
|
|
@ -49,7 +49,7 @@ a:not(.nav-link):not(.navbar-brand):not(.page-link):not(.highlight-card):not(.bt
|
||||||
}
|
}
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
|
box-shadow: 0 .125rem .25rem rgb(0 0 0 / .075);
|
||||||
background-color: var(--primary-color);
|
background-color: var(--primary-color);
|
||||||
border-color: var(--border-color);
|
border-color: var(--border-color);
|
||||||
}
|
}
|
||||||
|
|
|
@ -8,7 +8,7 @@
|
||||||
|
|
||||||
.servers-list__list-group:not(.servers-list__list-group--embedded) {
|
.servers-list__list-group:not(.servers-list__list-group--embedded) {
|
||||||
max-width: 400px;
|
max-width: 400px;
|
||||||
box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
|
box-shadow: 0 .125rem .25rem rgb(0 0 0 / .075);
|
||||||
}
|
}
|
||||||
|
|
||||||
.servers-list__server-item.servers-list__server-item {
|
.servers-list__server-item.servers-list__server-item {
|
||||||
|
|
|
@ -5,22 +5,22 @@ $lightPrimaryColor: #ffffff;
|
||||||
$lightPrimaryColorAlfa: rgba($lightPrimaryColor, .5);
|
$lightPrimaryColorAlfa: rgba($lightPrimaryColor, .5);
|
||||||
$lightSecondaryColor: $lightColor;
|
$lightSecondaryColor: $lightColor;
|
||||||
$lightTextColor: #232323;
|
$lightTextColor: #232323;
|
||||||
$lightBorderColor: rgba(0, 0, 0, .125);
|
$lightBorderColor: rgb(0 0 0 / .125);
|
||||||
$lightTableBorderColor: $mediumGrey;
|
$lightTableBorderColor: $mediumGrey;
|
||||||
$lightActiveColor: $lightGrey;
|
$lightActiveColor: $lightGrey;
|
||||||
$lightBrandColor: $mainColor;
|
$lightBrandColor: $mainColor;
|
||||||
$lightInputColor: $lightPrimaryColor;
|
$lightInputColor: $lightPrimaryColor;
|
||||||
$lightInputTextColor: #495057;
|
$lightInputTextColor: #495057;
|
||||||
$lightDisabledInputColor: $lightColor;
|
$lightDisabledInputColor: $lightColor;
|
||||||
$lightBorderInputColor: rgba(0, 0, 0, .19);
|
$lightBorderInputColor: rgb(0 0 0 / .19);
|
||||||
$lightTableHighlightColor: rgba(0, 0, 0, .075);
|
$lightTableHighlightColor: rgb(0 0 0 / .075);
|
||||||
|
|
||||||
// Dark theme colors
|
// Dark theme colors
|
||||||
$darkPrimaryColor: #161b22;
|
$darkPrimaryColor: #161b22;
|
||||||
$darkPrimaryColorAlfa: rgba($darkPrimaryColor, .8);
|
$darkPrimaryColorAlfa: rgba($darkPrimaryColor, .8);
|
||||||
$darkSecondaryColor: #0f131a;
|
$darkSecondaryColor: #0f131a;
|
||||||
$darkTextColor: rgb(201, 209, 217);
|
$darkTextColor: rgb(201 209 217);
|
||||||
$darkBorderColor: rgba(255, 255, 255, .15);
|
$darkBorderColor: rgb(255 255 255 / .15);
|
||||||
$darkTableBorderColor: #393d43;
|
$darkTableBorderColor: #393d43;
|
||||||
$darkActiveColor: $darkSecondaryColor;
|
$darkActiveColor: $darkSecondaryColor;
|
||||||
$darkBrandColor: #0b2d4e;
|
$darkBrandColor: #0b2d4e;
|
||||||
|
|
Loading…
Reference in a new issue