Skip to content

Commit c5f64c9

Browse files
josemigallasjosemigallas
committed
🚧
1 parent 01badd4 commit c5f64c9

File tree

63 files changed

+968
-1322
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

63 files changed

+968
-1322
lines changed

‎.qlty/configs/.stylelintrc.yaml‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
extends: stylelint-config-standard-scss
22

33
rules:
4-
scss/at-extend-no-missing-placeholder: false
5-
scss/dollar-variable-pattern: false
6-
scss/at-function-pattern: false # TODO: we should standardize function names
4+
# scss/at-extend-no-missing-placeholder: false
5+
# scss/dollar-variable-pattern: false
6+
# scss/at-function-pattern: false # TODO: we should standardize function names
77

88
alpha-value-notation: number # TODO: Sass is too old, this should be percentage
99

10-
color-function-alias-notation: false # TODO: make it 'without-alpha'
10+
# color-function-alias-notation: false # TODO: make it 'without-alpha'
1111
color-function-notation: legacy # TODO: make it 'modern'
1212

1313
custom-property-pattern:
@@ -25,12 +25,12 @@ rules:
2525
- always-multi-line
2626
- except:
2727
- first-nested
28-
- after-first-line-comment
28+
- after-single-line-comment
2929
- ignore:
3030
- after-comment
3131

32-
selector-class-pattern: false # TODO: we should standardize class names
32+
selector-class-pattern: null # TODO: we should standardize class names
3333

34-
selector-id-pattern: false # TODO: we should standardize id names
34+
# selector-id-pattern: false # TODO: we should standardize id names
3535

3636
value-keyword-case: lower

‎.qlty/qlty.toml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,4 +103,5 @@ package_filters = ["eslint"]
103103

104104
[[plugin]]
105105
name = "stylelint"
106+
version = "15.11.0"
106107
extra_packages = ["stylelint-config-standard-scss@latest"]

‎.stylelintignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
app/assets/stylesheets/vendor/**/*.scss

‎app/assets/stylesheets/error.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33

44
$width: line-height-times(24);
55
$wrapper-padding: line-height-times(1);
6+
$border-color: #d2d2d2;
67

78
html {
89
@include typography-base;
@@ -50,7 +51,7 @@ body {
5051
/* stylelint-disable-next-line no-descending-specificity -- FIXME */
5152
a {
5253
text-decoration: none;
53-
color: $label-color;
54+
color: #8A8D90;
5455
}
5556
}
5657

‎app/assets/stylesheets/provider/_buttons.scss‎

Lines changed: 3 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,8 @@
1-
@mixin internal-potato-button($color, $bgcolor, $border-color) {
2-
font-size: $font-size-base;
3-
background-color: $bgcolor;
4-
border-radius: $border-radius-sm;
5-
display: inline-block;
6-
vertical-align: top;
7-
margin: 0;
8-
padding: line-height-times(1 / 4) line-height-times(1 / 2) !important;
9-
border: $border-width solid $border-color;
10-
color: $color;
11-
text-decoration: none;
12-
width: auto !important;
13-
min-width: line-height-times(3);
14-
cursor: pointer;
15-
white-space: nowrap;
16-
text-align: center !important;
17-
height: line-height-times(1.5);
18-
line-height: $line-height-sm;
19-
appearance: none;
20-
21-
&.big {
22-
font-size: $font-size-lg;
23-
}
24-
25-
&:hover {
26-
color: $bgcolor;
27-
background-color: transparent;
28-
}
29-
30-
}
31-
321
table [type='submit']:not(.action, .pf-c-button, .pf-c-dropdown__menu-item) {
332
float: right;
34-
35-
@include internal-potato-button($important-button-color, $important-button-bg-color, $important-button-border-color);
36-
}
37-
38-
table .disabled-button,
39-
/* stylelint-disable-next-line no-descending-specificity -- FIXME */
40-
.disabled-button {
41-
@include internal-potato-button($disabled-button-color, $disabled-button-bg-color, $disabled-button-border-color);
42-
43-
cursor: default;
3+
// TODO: make sure no "important" buttons remain
4+
// @extend .pf-m-primary;
5+
// @extend .pf-c-button;
446
}
457

468
.button.next,

‎app/assets/stylesheets/provider/_colorbox.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@
1515
}
1616

1717
#colorbox {
18-
box-shadow: 0 0 line-height-times(1 / 2) $box-shadow-color;
19-
background: rgba($body-background, .99);
18+
box-shadow: var(--pf-global--BoxShadow--lg);
19+
background: white;
2020
border: $border-width solid $border-color;
2121
text-align: left;
2222
border-radius: $border-radius;
@@ -54,7 +54,7 @@
5454
position: fixed;
5555
width: 100%;
5656
height: 100%;
57-
background: rgba($content-background, .8);
57+
background: var(--pf-global--BackgroundColor--dark-transparent-100);
5858
}
5959

6060
#cboxMiddleLeft,

‎app/assets/stylesheets/provider/_colors.scss‎

Lines changed: 13 additions & 123 deletions
Original file line numberDiff line numberDiff line change
@@ -1,125 +1,15 @@
11
@charset 'utf-8';
22

3-
// Descriptive color names
4-
// based on color names with main color attached for clarity if needed http://chir.ag/projects/name-that-color/
5-
6-
/* TODO: can we use actual PF vars? */
7-
// greys
8-
$alabasterWhite: #fafafa; // pf-black-100
9-
$altoGray: #d2d2d2; // pf-black-300
10-
$black: #030303; // pf-black
11-
$osloGray: #8a8d90; // pf-black-500
12-
$outerSpaceGray: #3c3f42; // pf-black-800
13-
$gallery: #f0f0f0; // pf-black-200
14-
$white: #fff;
15-
$whiteBoxShadowColor: rgba(3, 3, 3, 0.2);
16-
$whiteBoxShadow: $whiteBoxShadowColor 0 1px 2px 0;
17-
$wildSandGray: #f5f5f5; // pf-black-150
18-
19-
// colors
20-
$curiousBlue: #2b9af3; // pf-blue-300
21-
$lochMaraBlue: #06c; // pf-blue-400
22-
$appleGreen: #3f9c35;
23-
$guardsmanRed: #c00;
24-
$tahitiGold: #ec7a08;
25-
26-
// brand colors
27-
$brand-orange: #ff7314;
28-
$twitter-color: #55acee;
29-
$facebook-color: #3b5998;
30-
31-
// Functional color names
32-
$body-background: $white;
33-
$content-background: $gallery;
34-
$background-color-base: $body-background;
35-
$font-color: $outerSpaceGray;
36-
$color-base: $font-color;
37-
$light-background-color: $alabasterWhite;
38-
$label-color: $osloGray;
39-
$highlight-color: $lochMaraBlue;
40-
$border-color: $altoGray;
41-
$select-color: $border-color;
42-
$focus-color: $alabasterWhite;
43-
$brand-blue: $lochMaraBlue;
44-
$light-color: $osloGray;
45-
$form-background-color: $white;
46-
$hint-color: $osloGray;
47-
$link-color: $highlight-color;
48-
$link-hover-color: $outerSpaceGray;
49-
$icon-hover-color: $lochMaraBlue;
50-
$dirty-color: $alabasterWhite;
51-
$success-color: $appleGreen;
52-
$error-color: $guardsmanRed;
53-
$error-background-color: rgba($error-color, 0.1);
54-
$disabled-color: $osloGray;
55-
$disabled-background-color: $wildSandGray;
56-
$placeholder-color: $osloGray;
57-
$create-color: $success-color;
58-
$delete-color: $error-color;
59-
$delete-background-color: $error-background-color;
60-
$warning-color: $tahitiGold;
61-
$table-search-background-color: $light-background-color;
62-
$tr-odd-color: transparent;
63-
$tr-even-color: transparent;
64-
$wrapper-color: none;
65-
$header-background-color: $black;
66-
$header-border-color: $curiousBlue;
67-
$tab-menu-active-color: $lochMaraBlue;
68-
$tab-menu-active-background-color: $content-background;
69-
$tab-content-color: $content-background;
70-
71-
// view specific colors
72-
$overview-widget-border: $border-color;
73-
$overview-widget-background: $tab-content-color;
74-
$box-shadow-color: rgba($font-color, .1);
75-
$menu-background-color: $content-background;
76-
$menu-color: $outerSpaceGray;
77-
$menu-active-color: $lochMaraBlue;
78-
$menu-hover-color: $lochMaraBlue;
79-
$submenu-color: $menu-color;
80-
$submenu-hover-color: $menu-hover-color;
81-
$submenu-active-color: $menu-active-color;
82-
$submenu-border-color: $border-color;
83-
$chart-background-color: $white;
84-
$sample-data-color: $white;
85-
$sample-data-bg-color: $lochMaraBlue;
86-
$sample-data-border-color: $lochMaraBlue;
87-
$important-button-color: $white;
88-
$important-button-bg-color: $lochMaraBlue;
89-
$important-button-border-color: $lochMaraBlue;
90-
$secondary-button-color: $white;
91-
$secondary-button-bg-color: $osloGray;
92-
$secondary-button-border-color: $osloGray;
93-
$disabled-button-color: $white;
94-
$disabled-button-bg-color: $altoGray;
95-
$disabled-button-border-color: $altoGray;
96-
$glow-color: $highlight-color;
97-
$glow-background-color: $wildSandGray;
98-
99-
/// --- login ---
100-
101-
$login-content-color: $font-color;
102-
$codemirror-color: $label-color;
103-
$codemirror-border: $content-background;
104-
$codemirror-bg: $content-background;
105-
$codemirror-bg-readonly: $codemirror-bg;
106-
$codemirror-color-readonly: $codemirror-color;
107-
$codemirror-cursor-color: $highlight-color;
108-
$codemirror-vars-color: #00b9e4; // pf-light-blue-400
109-
$codemirror-vars2-color: #703fec; // pf-purple-400
110-
$codemirror-selected-bg: $select-color;
111-
$codemirror-meta-color: $tahitiGold;
112-
$codemirror-attr-color: $tahitiGold;
113-
$codemirror-number-color: $tahitiGold;
114-
$codemirror-comment-color: $label-color;
115-
$codemirror-keyword-color: $tahitiGold;
116-
$codemirror-builtin-color: $highlight-color;
117-
$codemirror-color-def: $tahitiGold;
118-
$codemirror-color-tag: $tahitiGold;
119-
$codemirror-liquid-bg-color: transparent;
120-
$codemirror-liquid-color: $highlight-color;
121-
$codemirror-liquid-tag-color: $label-color;
122-
$codemirror-liquid-markup-delim-color: $highlight-color;
123-
$codemirror-liquid-string-color: $success-color;
124-
$codemirror-gutter-color: $border-color;
125-
$codemirror-gutter-background-color: $codemirror-bg;
3+
$body-background: white;
4+
$border-color: var(--pf-global--palette--black-300);
5+
$disabled-color: var(--pf-global--disabled-color--100);
6+
$error-color: var(--pf-global--danger-color--100);
7+
$font-color: var(--pf-global--Color--100);
8+
$highlight-color: var(--pf-global--primary-color--100);
9+
$label-color: var(--pf-global--palette--black-500);
10+
$light-color: var(--pf-global--Color--200);
11+
$link-color: var(--pf-global--link--Color);
12+
$link-hover-color: var(--pf-global--primary-color--200);
13+
$success-color: var(--pf-global--success-color--100);
14+
$warning-color: var(--pf-global--warning-color--100);
15+
$warning-color-hover: var(--pf-global--warning-color--200);

‎app/assets/stylesheets/provider/_commons.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ dl {
9898
padding: 0;
9999
}
100100

101-
p + ul {
101+
p + ul:not(.pf-c-list) {
102102
list-style: none;
103103
padding-left: line-height-times(2 / 3);
104104
}
@@ -169,7 +169,7 @@ pre code:not(.pf-c-code-block__code) {
169169
margin: line-height-times(1 / 2) 0 line-height-times(1);
170170
overflow: hidden;
171171
padding: line-height-times(1 / 2);
172-
background-color: $light-background-color;
172+
background-color: var(--pf-global--BackgroundColor--light-200);
173173
border: $border-width solid $border-color;
174174

175175

@@ -198,7 +198,7 @@ hr {
198198
}
199199

200200
::selection {
201-
background: $select-color;
201+
background: $border-color;
202202
}
203203

204204
.ui-sortable-handler {

‎app/assets/stylesheets/provider/_fields_definitions.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,13 @@
66
li {
77
@include white-box-shadow;
88

9-
background: $background-color-base no-repeat line-height-times(1 / 2) center image-url("drag-icon.png");
9+
background: $body-background no-repeat line-height-times(1 / 2) center image-url("drag-icon.png");
1010
margin-bottom: line-height-times(1 / 2);
1111
overflow: visible !important;
1212
padding: line-height-times(1 / 2) 0 line-height-times(1 / 2) line-height-times(1);
1313

1414
&.ui-sortable-helper {
15-
box-shadow: 0 0 line-height-times(1 / 2) $box-shadow-color;
15+
box-shadow: var(--pf-global--BoxShadow--md);
1616
}
1717

1818
.name {

‎app/assets/stylesheets/provider/_footer.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
$footer-link-color: $osloGray;
1+
$footer-link-color: var(--pf-global--palette--black-500);
22
$footer-link-hover-color: $link-hover-color;
33

44
footer {

0 commit comments

Comments
 (0)