mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-23 01:20:24 +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": [
"stylelint-config-adidas",
"stylelint-config-adidas-bem",
"stylelint-config-standard",
"stylelint-config-recommended-scss"
],
"syntax": "scss",
"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]+$"
}
}
}

3389
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",
"serve": "^13.0.2",
"stryker-cli": "^1.0.2",
"stylelint": "^13.7.2",
"stylelint-config-adidas": "^1.3.0",
"stylelint-config-adidas-bem": "^1.2.0",
"stylelint-config-recommended-scss": "^4.2.0",
"stylelint-scss": "^3.18.0",
"stylelint": "^14.8.2",
"stylelint-config-recommended-scss": "^6.0.0",
"stylelint-config-standard": "^25.0.0",
"stylelint-scss": "^4.2.0",
"stylelint-selector-bem-pattern": "^2.1.1",
"ts-mockery": "^1.2.0",
"typescript": "^4.6.2",
"webpack": "^5.70.0"

4
src/common/AsideMenu.scss
View file

@ -4,7 +4,7 @@
.aside-menu {
width: $asideMenuWidth;
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;
padding-top: 13px;
padding-bottom: 10px;
@ -23,7 +23,7 @@
@media (max-width: $smMax) {
transition: left 300ms;
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;
font-size: 1.5rem;
cursor: pointer;
color: rgba(255, 255, 255, .5);
color: rgb(255 255 255 / .5);
@media (max-width: $smMax) {
display: inline-block;

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

@ -113,7 +113,7 @@
background: var(--primary-color);
border: 1px solid var(--border-color);
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 {

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 {
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);
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) {
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 {

10
src/theme/theme.scss
View file

@ -5,22 +5,22 @@ $lightPrimaryColor: #ffffff;
$lightPrimaryColorAlfa: rgba($lightPrimaryColor, .5);
$lightSecondaryColor: $lightColor;
$lightTextColor: #232323;
$lightBorderColor: rgba(0, 0, 0, .125);
$lightBorderColor: rgb(0 0 0 / .125);
$lightTableBorderColor: $mediumGrey;
$lightActiveColor: $lightGrey;
$lightBrandColor: $mainColor;
$lightInputColor: $lightPrimaryColor;
$lightInputTextColor: #495057;
$lightDisabledInputColor: $lightColor;
$lightBorderInputColor: rgba(0, 0, 0, .19);
$lightTableHighlightColor: rgba(0, 0, 0, .075);
$lightBorderInputColor: rgb(0 0 0 / .19);
$lightTableHighlightColor: rgb(0 0 0 / .075);
// Dark theme colors
$darkPrimaryColor: #161b22;
$darkPrimaryColorAlfa: rgba($darkPrimaryColor, .8);
$darkSecondaryColor: #0f131a;
$darkTextColor: rgb(201, 209, 217);
$darkBorderColor: rgba(255, 255, 255, .15);
$darkTextColor: rgb(201 209 217);
$darkBorderColor: rgb(255 255 255 / .15);
$darkTableBorderColor: #393d43;
$darkActiveColor: $darkSecondaryColor;
$darkBrandColor: #0b2d4e;