onhover effects

z · z · commit a2c032ffd831 · 2017-12-03T18:12:08.000+05:30
diff --git a/components/learn/subject-marked.js b/components/learn/subject-marked.js
@@ -10,8 +10,10 @@ const Marked = styled.div`
     border-collapse: collapse;
     text-align: center;
   }
-  td:first-child {
-    text-align: right;
+  td,
+  tr,
+  table th th {
+    text-align: center;
   }
   th {
     background: #f5f5f5;
@@ -20,7 +22,7 @@ const Marked = styled.div`
   }
   td,
   th {
-    padding: 6px;
+    padding: 15px;
     border: 1px solid #ccc;
     text-align: center;
   }
@@ -33,7 +35,7 @@ const Marked = styled.div`
     tr {
       display: block;
       text-align: center;
-      margin-bottom: 10px;
+      margin-bottom: 30px;
     }
     thead tr {
       position: absolute;
@@ -49,22 +51,21 @@ const Marked = styled.div`
       border-bottom: 1px solid #eee;
       position: relative;
       padding-left: 50%;
+      text-align: center;
     }
     td:before {
+      text-align: center;
       position: absolute;
-      top: 6px;
       left: 6px;
       width: 30%;
-      padding-right: 5px;
-      white-space: normal;
-      font-size: 12px;
-      text-align: center;
+      font-size: 0.7rem;
     }
     td:nth-of-type(1):before {
       content: 'Concept';
     }
     td:nth-of-type(1) {
       background: #f4f6fb;
+      text-align: center;
     }
     td:nth-of-type(2):before {
       content: 'Best video';
@@ -76,7 +77,7 @@ const Marked = styled.div`
       content: 'Duration';
     }
     td:nth-of-type(5):before {
-      content: 'Prereq';
+      content: 'Prereq.';
     }
   }
 `;
diff --git a/components/learn/syllabus-tree/syllabus-tree-container.js b/components/learn/syllabus-tree/syllabus-tree-container.js
@@ -22,18 +22,18 @@ export default class SyllabusTree extends React.Component {
     const Container = styled.div`
       & .node {
         transition: all 0.5s;
-        border-radius: 3px;
       }
 
       & .node:hover,
       & .info:hover {
-        background-color: rgb(220, 245, 243);
+        background-color: #f5f5f5;
+        border-left: 1px solid #374355;
         cursor: pointer;
       }
 
       & .info,
       & .node {
-        padding: 2px 10px 2px 5px;
+        padding: 5px 10px 5px 5px;
         font: 14px Helvetica, Arial, sans-serif;
         user-select: none;
       }

Original file line number	Diff line number	Diff line change
@@ -10,8 +10,10 @@ const Marked = styled.div`
`10`	`10`	`border-collapse: collapse;`
`11`	`11`	`text-align: center;`
`12`	`12`	`}`
`13`		`- td:first-child {`
`14`		`- text-align: right;`
	`13`	`+ td,`
	`14`	`+ tr,`
	`15`	`+ table th th {`
	`16`	`+ text-align: center;`
`15`	`17`	`}`
`16`	`18`	`th {`
`17`	`19`	`background: #f5f5f5;`
@@ -20,7 +22,7 @@ const Marked = styled.div`
`20`	`22`	`}`
`21`	`23`	`td,`
`22`	`24`	`th {`
`23`		`- padding: 6px;`
	`25`	`+ padding: 15px;`
`24`	`26`	`border: 1px solid #ccc;`
`25`	`27`	`text-align: center;`
`26`	`28`	`}`
@@ -33,7 +35,7 @@ const Marked = styled.div`
`33`	`35`	`tr {`
`34`	`36`	`display: block;`
`35`	`37`	`text-align: center;`
`36`		`- margin-bottom: 10px;`
	`38`	`+ margin-bottom: 30px;`
`37`	`39`	`}`
`38`	`40`	`thead tr {`
`39`	`41`	`position: absolute;`
@@ -49,22 +51,21 @@ const Marked = styled.div`
`49`	`51`	`border-bottom: 1px solid #eee;`
`50`	`52`	`position: relative;`
`51`	`53`	`padding-left: 50%;`
	`54`	`+ text-align: center;`
`52`	`55`	`}`
`53`	`56`	`td:before {`
	`57`	`+ text-align: center;`
`54`	`58`	`position: absolute;`
`55`		`- top: 6px;`
`56`	`59`	`left: 6px;`
`57`	`60`	`width: 30%;`
`58`		`- padding-right: 5px;`
`59`		`- white-space: normal;`
`60`		`- font-size: 12px;`
`61`		`- text-align: center;`
	`61`	`+ font-size: 0.7rem;`
`62`	`62`	`}`
`63`	`63`	`td:nth-of-type(1):before {`
`64`	`64`	`content: 'Concept';`
`65`	`65`	`}`
`66`	`66`	`td:nth-of-type(1) {`
`67`	`67`	`background: #f4f6fb;`
	`68`	`+ text-align: center;`
`68`	`69`	`}`
`69`	`70`	`td:nth-of-type(2):before {`
`70`	`71`	`content: 'Best video';`
@@ -76,7 +77,7 @@ const Marked = styled.div`
`76`	`77`	`content: 'Duration';`
`77`	`78`	`}`
`78`	`79`	`td:nth-of-type(5):before {`
`79`		`- content: 'Prereq';`
	`80`	`+ content: 'Prereq.';`
`80`	`81`	`}`
`81`	`82`	`}`
`82`	`83`	`;