mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2025-01-03 23:07:26 +03:00
Code Issues Projects Releases Packages Wiki Activity

Replaced adidas coding styles for CSS with a custom one based on stylelint recommended

Browse source
This commit is contained in:
Alejandro Celaya 2022-05-11 22:32:17 +02:00
parent f3570d0c9d
commit 67c45f444b
9 changed files with 562 additions and 2885 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
.stylelintrc
View file

@ -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]+$"
}
}
} }

3383
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

10
package.json
View file

@ -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
src/common/AsideMenu.scss
View file

@ -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);
} }
} }

2
src/common/MenuLayout.scss
View file

@ -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;

2
src/common/react-tag-autocomplete.scss
View file

@ -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 {

2
src/index.scss
View file

@ -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);
} }

2
src/servers/ServersListGroup.scss
View file

@ -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 {

10
src/theme/theme.scss
View file

@ -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;