fix(CookieLawComponent): wrapping css styles inside the .cookie-law p…

…arent to avoid wrapping all the css styles inside the .cookie-law parent to avoid interfeering with the parent application closes #9
andreasonny83 · Mar 25, 2017 · bf7d16d · bf7d16d
1 parent 33d4507
commit bf7d16d
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 26 deletions.
diff --git a/src/cookie-law.component.ts b/src/cookie-law.component.ts
@@ -63,6 +63,9 @@ export type CookieLawTarget = '_blank' | '_self';
   ],
   styleUrls: [ './cookie-law.css' ],
   templateUrl: './cookie-law.html',
+  host: {
+    '[class.cookie-law]': 'true'
+  }
 })
 export class CookieLawComponent implements OnInit {
   animation: CookieLawAnimation;

diff --git a/src/cookie-law.css b/src/cookie-law.css
@@ -1,15 +1,4 @@
-a {
-  color: #bbb;
-  -webkit-transition: color .2s;
-  transition: color .2s;
-}
-a:hover {
-  color: #fff;
-}
-a:hover svg {
-  fill: #fff;
-}
-.cookie-law-wrapper {
+.cookie-law .cookie-law-wrapper {
   background: #333;
   color: #bbb;
   display: block;
@@ -25,7 +14,22 @@ a:hover svg {
   font-smooth: always;
   -webkit-font-smoothing: antialiased;
 }
-.dismiss {
+
+.cookie-law .cookie-law-wrapper a {
+  color: #bbb;
+  -webkit-transition: color .2s;
+  transition: color .2s;
+}
+
+.cookie-law .cookie-law-wrapper a:hover {
+  color: #fff;
+}
+
+.cookie-law .cookie-law-wrapper a:hover svg {
+  fill: #fff;
+}
+
+.cookie-law .cookie-law-wrapper .dismiss {
   display: block;
   box-sizing: border-box;
   padding: 10px;
@@ -35,41 +39,48 @@ a:hover svg {
   text-decoration: none;
   line-height: 20px;
 }
-.dismiss svg {
+
+.cookie-law .cookie-law-wrapper .dismiss svg {
   display: block;
   fill: #bbb;
   width: 20px;
   height: 20px;
   -webkit-transition: fill .2s;
   transition: fill .2s;
 }
-.copy {
+
+.cookie-law .cookie-law-wrapper .copy {
   box-sizing: border-box;
   padding: 10px 60px 10px 10px;
 }
-.copy span {
+
+.cookie-law .cookie-law-wrapper .copy span {
   color: #fff;
   font-weight: 400;
 }
-.copy a {
+
+.cookie-law .cookie-law-wrapper .copy a {
   text-decoration: underline;
 }
-.copy a:active, .copy a:hover {
+
+.cookie-law .cookie-law-wrapper .copy a:active, .copy a:hover {
     outline: 0;
 }
 
 @media (min-width: 600px) {
   /* For bigger devices: */
-  .copy {
+  .cookie-law .cookie-law-wrapper .copy {
     padding: 20px 60px 20px 20px;
     font-size: 18px;
     line-height: 24px;
   }
-  .dismiss {
+
+  .cookie-law .cookie-law-wrapper .dismiss {
     top: 10px;
     right: 15px;
   }
-  .dismiss svg {
+
+  .cookie-law .cookie-law-wrapper .dismiss svg {
     width: 24px;
     height: 24px;
   }

diff --git a/tslint.json b/tslint.json
@@ -3,20 +3,18 @@
     "node_modules/codelyzer"
   ],
   "rules":{
-    "directive-selector": [true, "attribute", "sg", "camelCase"],
-    "component-selector": [true, "element", "cookie", "kebab-case"],
+    "directive-selector": [true, "attribute", "camelCase"],
+    "component-selector": [true, "element", "kebab-case"],
     "use-input-property-decorator": true,
     "use-output-property-decorator": true,
-    "use-host-property-decorator": true,
     "no-attribute-parameter-decorator": true,
     "no-input-rename": true,
     "no-output-rename": true,
     "no-forward-ref": true,
     "use-life-cycle-interface": true,
     "use-pipe-transform-interface": true,
-    "pipe-naming": [true, "camelCase", "sg"],
+    "pipe-naming": [true, "camelCase"],
     "component-class-suffix": true,
-    "directive-class-suffix": true,
     "templates-use-public": true,
     "no-access-missing-member": true,
     "invoke-injectable": true