fixed style errors and omitted default style rules when needed #556

impactoss · Jul 2, 2024 · e0a1313 · e0a1313
1 parent f97dae2
commit e0a1313
Show file tree

Hide file tree

Showing 19 changed files with 49 additions and 36 deletions.
diff --git a/.stylelintrc b/.stylelintrc
@@ -2,5 +2,25 @@
    "extends": [
     "stylelint-config-standard"
   ],
-  "customSyntax": "postcss-styled-syntax"
+  "customSyntax": "postcss-styled-syntax",
+  "rules":{
+    "at-rule-empty-line-before": null,
+    "media-query-no-invalid": null,
+    "alpha-value-notation": null,
+    "rule-empty-line-before": null,
+    "length-zero-no-unit": null,
+    "declaration-empty-line-before": "never",
+    "selector-class-pattern": null,
+    "no-empty-source": null,
+    "declaration-block-no-redundant-longhand-properties": null,
+    "color-function-notation": null,
+    "media-feature-range-notation": null,
+    "comment-empty-line-before": null,
+    "color-hex-length": null,
+    "number-max-precision": null,
+    "no-descending-specificity": null,
+    "custom-property-empty-line-before": null,
+    "shorthand-property-no-redundant-values": null,
+    "property-no-vendor-prefix": null
+  }
 }
diff --git a/app/components/EntityListItem/EntityListItemMain/EntityListItemMainBottom/ConnectionPopup.js b/app/components/EntityListItem/EntityListItemMain/EntityListItemMainBottom/ConnectionPopup.js
@@ -93,7 +93,7 @@ const TriangleBottom = styled.div`
   }}%;
    margin-left: -10px;
 
-   &:after {
+   &::after {
       content: "";
       position: absolute;
       width: 20px;

diff --git a/app/components/EntityListItem/EntityListItemMain/index.js b/app/components/EntityListItem/EntityListItemMain/index.js
@@ -84,6 +84,7 @@ const EntityListItemMainTopWrap = styled.div`
     ? 0
     : props.theme.sizes.mainListItem.paddingHorizontal
 }px;
+  }
 `;
 
 const EntityListItemMainSubtitle = styled.div`

diff --git a/app/components/EntityListNestedList/EntityListNestedItem/EntityListNestedReportItem.js b/app/components/EntityListNestedList/EntityListNestedItem/EntityListNestedReportItem.js
@@ -71,12 +71,13 @@ const EntityListItemMainTopWrap = styled.div`
   right: 0;
   padding-top: 4px;
   padding-right: 6px;
-  @media (min-width: ${(props) => props.theme && props.theme.breakpoints ? props.theme.breakpoints.small : '769px'}) {
+  @media (min-width: ${(props) => props.theme && props.theme.breakpoints ? props.theme.breakpoints.small : '769px'}){
     padding-top: ${(props) => props.theme.sizes && props.theme.sizes.mainListItem.paddingTop}px;
     padding-right: ${(props) => (!props.theme.sizes)
     ? 0
     : props.theme.sizes.mainListItem.paddingHorizontal
 }px;
+  }
 `;
 
 const Reference = styled(Label)`

diff --git a/app/components/Header/Brand.js b/app/components/Header/Brand.js
@@ -7,17 +7,14 @@ export default styled.a`
   left: 0;
   text-decoration: none;
   color: ${palette('headerBrand', 0)};
-
-  &:hover {
-    color: ${palette('headerBrandHover', 0)};
-    opacity: 0.75;
-  }
-
   z-index: 110;
   overflow: hidden;
-
   padding-right: 46px;
   height: ${(props) => props.theme.sizes.header.banner.heightMobile}px;
+  &:hover {
+    color: ${palette('headerBrandHover', 0)};
+    opacity: 0.75;
+  }
   @media (min-width: ${(props) => props.theme.breakpoints.small}) {
     padding-right: 46px;
     height: ${(props) => props.theme.sizes.header.banner.height}px;

diff --git a/app/components/Header/LinkAccount.js b/app/components/Header/LinkAccount.js
@@ -11,5 +11,4 @@ export default styled(LinkSecondary)`
     color: ${(props) => props.active ? palette('headerNavAccountItemHover', 1) : palette('headerNavAccountItemHover', 0)};
     text-decoration: ${(props) => props.active ? 'none' : 'underline'};
   }
-}
 `;
diff --git a/app/components/SelectReset/index.js b/app/components/SelectReset/index.js
@@ -43,7 +43,6 @@ const Select = styled.select`
   }
   @media print {
     appearance: none;
-    text-overflow: '';
     text-indent: 0.01px; /* Removes default arrow from firefox */
     text-overflow: "";  /* Removes default arrow from firefox */
     font-size: ${(props) => props.theme.sizes.print.small};

diff --git a/app/components/buttons/ButtonCancel.js b/app/components/buttons/ButtonCancel.js
@@ -5,7 +5,7 @@ import ButtonForm from './ButtonForm';
 
 const ButtonCancel = styled(ButtonForm)`
   color: ${palette('buttonCancel', 0)};
-  &:hover, &:hover {
+  &:hover {
     color: ${palette('buttonCancelHover', 0)};
   }
 `;

diff --git a/app/components/buttons/ButtonDefaultWithIcon/index.js b/app/components/buttons/ButtonDefaultWithIcon/index.js
@@ -51,10 +51,7 @@ const Word = styled.span`
     return 'inline';
   }};
   }
-  ${(props) => props.iconRight
-    ? '&:after { content: " "; }'
-    : '&:before { content: " "; }'
-}
+  ${(props) => props.iconRight ? '&::after { content: " "; }' : '&::before { content: " "; }'}
 `;
 
 class ButtonDefaultWithIcon extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function

diff --git a/app/components/buttons/ButtonTagCategory/index.js b/app/components/buttons/ButtonTagCategory/index.js
@@ -29,7 +29,7 @@ const getColor = (props, isHover = false) => {
 
 // eslint-disable no-nested-ternary
 const ButtonTagCategory = styled(Button)`
-  color: ${(props) => getFontColor(props)}};
+  color: ${(props) => getFontColor(props)};
   background-color: ${(props) => getColor(props)};
   margin-right: 2px;
   border-radius: ${(props) => props.isSmartTag ? 9999 : 3}px;

diff --git a/app/components/buttons/ButtonTagCategoryInverse/index.js b/app/components/buttons/ButtonTagCategoryInverse/index.js
@@ -51,6 +51,7 @@ const ButtonTagCategoryInverse = styled(Button)`
     : palette('taxonomiesHover', props.taxId || 0)
 };
     }
+  }
 `;
 
 export default ButtonTagCategoryInverse;
diff --git a/app/components/categoryList/CategoryListItem/index.js b/app/components/categoryList/CategoryListItem/index.js
@@ -77,7 +77,7 @@ const Bar = styled.div`
   }
   @media print {
     z-index: 0;
-    &:before {
+    &::before {
       content: '';
       display: block;
       position: absolute;

diff --git a/app/components/categoryList/CategoryListKey/index.js b/app/components/categoryList/CategoryListKey/index.js
@@ -50,7 +50,7 @@ const Square = styled.div`
     position: relative;
     overflow: hidden;
     z-index: 0;
-    &:before {
+    &::before {
       content: '';
       display: block;
       position: absolute;

diff --git a/app/components/fields/ShortTitleTag.js b/app/components/fields/ShortTitleTag.js
@@ -10,7 +10,7 @@ const getFontColor = ({ pIndex }) => {
 
 const ShortTitleTag = styled.span`
   display: inline-block;
-  color: ${(props) => getFontColor(props)}};
+  color: ${(props) => getFontColor(props)};
   background-color: ${({ pIndex }) => palette('taxonomies', pIndex || 0)};
   padding: 1px 6px;
   margin-right: 2px;

diff --git a/app/components/forms/DateControl/styles.js b/app/components/forms/DateControl/styles.js
@@ -78,7 +78,6 @@ const DatePickerStyle = createGlobalStyle`
   }
 
   .rdp-cell {
-    //border: 1px solid #eaecec;
     text-align: center;
     cursor: pointer;
     vertical-align: middle;

diff --git a/app/components/styled/ColumnHeader/index.js b/app/components/styled/ColumnHeader/index.js
@@ -7,7 +7,7 @@ const ColumnHeader = styled.div`
   padding-left: ${(props) => (props.isSelect)
     ? 0
     : 4
-}px
+}px;
   word-break: break-word;
   width: ${(props) => props.colWidth}%;
   position: relative;
@@ -38,7 +38,7 @@ const ColumnHeader = styled.div`
     line-height: 30px;
     padding-top: 0;
     padding-bottom: 0;
-    &:before {
+    &::before {
       content: '';
       display: block;
       position: absolute;

diff --git a/app/components/styled/SkipContent/index.js b/app/components/styled/SkipContent/index.js
@@ -23,6 +23,6 @@ const SkipContent = styled.a`
     outline: 1px solid ${palette('primary', 0)};
     outline-offset: 0px;
   }
-}`;
+`;
 
 export default SkipContent;
diff --git a/app/containers/Overview/HorizontalDiagram.js b/app/containers/Overview/HorizontalDiagram.js
@@ -223,7 +223,7 @@ const DiagramButtonMain = styled(DiagramButton)`
   }
   @media (min-width: ${(props) => props.theme.breakpoints.small}) {
     padding: 0.4em 0.75em 1em;
-    &:before {
+    &::before {
       content: '';
       display: inline-block;
       vertical-align: middle;

diff --git a/app/global-styles.js b/app/global-styles.js
@@ -12,47 +12,47 @@ const GlobalStyle = createGlobalStyle`
   /* roboto - 400 - latin */
   @font-face {
     font-display: swap;
-    font-family: 'Roboto';
+    font-family: Roboto;
     font-style: normal;
     font-weight: 400;
     src: url(${Roboto400TTF}) format('truetype');
   }
   /* roboto - 400 - italic - latin */
   @font-face {
     font-display: swap;
-    font-family: 'Roboto';
+    font-family: Roboto;
     font-style: italic;
     font-weight: 400;
     src: url(${Roboto400iTTF}) format('truetype');
   }
   /* roboto - 500 - latin */
   @font-face {
     font-display: swap;
-    font-family: 'Roboto';
+    font-family: Roboto;
     font-style: normal;
     font-weight: 500;
     src: url(${Roboto500TTF}) format('truetype');
   }
   /* roboto - 500 - italic - latin */
   @font-face {
     font-display: swap;
-    font-family: 'Roboto';
+    font-family: Roboto;
     font-style: italic;
     font-weight: 500;
     src: url(${Roboto500iTTF}) format('truetype');
   }
   /* roboto - 700 - latin */
   @font-face {
     font-display: swap;
-    font-family: 'Roboto';
+    font-family: Roboto;
     font-style: normal;
     font-weight: 700;
     src: url(${Roboto700TTF}) format('truetype');
   }
   /* roboto - 700 - italic - latin */
   @font-face {
     font-display: swap;
-    font-family: 'Roboto';
+    font-family: Roboto;
     font-style: italic;
     font-weight: 700;
     src: url(${Roboto700iTTF}) format('truetype');
@@ -64,13 +64,13 @@ const GlobalStyle = createGlobalStyle`
     width: 100%;
   }
   body {
-    font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
     font-size: 16px;
     line-height: 1.428571429;
     color: #1c2121;;
   }
   button, input, select, textarea {
-    font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
     background-color: transparent;
     border-style: none;
     color: inherit;
@@ -100,7 +100,6 @@ const GlobalStyle = createGlobalStyle`
     text-align: left;
     color: #0077d8;
     text-decoration: none;
-
     &:hover {
       color: #d66149;
     }
@@ -278,7 +277,7 @@ const GlobalStyle = createGlobalStyle`
   }
   @media print {
     @page {
-      margin: 1.5cm 1.2cm 1.5cm;
+      margin: 1.5cm 1.2cm;
     }
     body {
       font-size: 10pt;
-Original file line number
+Diff line change
@@ Expand Up / @@ -84,6 +84,7 @@ const EntityListItemMainTopWrap = styled.div` @@
         ? 0
         : props.theme.sizes.mainListItem.paddingHorizontal
     }px;
+      }
     `;
     const EntityListItemMainSubtitle = styled.div`
@@ Expand Down @@