Merge pull request #40 from OneNoteDev/bug/namespace-the-css

leakymemory · web-flow · commit 85a7e5261913 · 2017-05-16T14:00:56.000-07:00
Bug/namespace the css
diff --git a/sampleapp/index.html b/sampleapp/index.html
@@ -7,7 +7,7 @@
 		<link rel="stylesheet" href="dist/pickerStyles.css">
 	</head>
 	<body style="min-height:100%">
-		<div id="oneNotePicker" style="width:295px;height:180px;margin:50px;overflow-y:scroll"></div>
+		<div id="oneNotePicker" style="width:350px;height:350px;margin:50px;overflow-y:scroll"></div>
 		<script src="dist/sample.js"></script>
 	</body>
 </html>
diff --git a/src/oneNotePicker.scss b/src/oneNotePicker.scss
@@ -1,49 +1,63 @@
-@import "~bulma/bulma.sass";
-
-#oneNotePicker {
-  background: white;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-.menu-list li ul {
-  margin-top: 0px;
-  margin-bottom: 0px;
-  margin-right: 0px;
-  border-left: none;
-}
-
-.menu-list li a {
-  padding-top: 6px;
-  padding-bottom: 6px;
-}
-
-.menu-list li a div {
-  display: inline-block;
-  vertical-align: top;
-}
-
-.menu-list label {
-  color: black;
-}
-
-.picker-list-header {
-  margin-top: 0px;
-  margin-bottom: 0px;
-  margin-right: 0px;
-}
-
-.picker-icon-left {
-  margin-right: 5px;
-
-  img {
+  #oneNotePicker {
+    background: white;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
+
+.onenote-picker {
+  ul {
+    list-style: none;
+    padding: 0;
+  }
+
+  .menu-list a {
+    border-radius: 2px;
+    color: #4a4a4a;
     display: block;
+    padding: 0.5em 0.75em;
+  }
+
+  .menu-list li ul {
+    margin-top: 0px;
+    margin-bottom: 0px;
+    margin-right: 0px;
+    border-left: none;
+    margin: 0.75em;
+    padding-left: 0.75em;
+  }
+
+  .menu-list li a {
+    padding-top: 6px;
+    padding-bottom: 6px;
+  }
+
+  .menu-list li a div {
+    display: inline-block;
+    vertical-align: top;
+  }
+
+  .menu-list label {
+    color: black;
+  }
+
+  .picker-list-header {
+    margin-top: 0px;
+    margin-bottom: 0px;
+    margin-right: 0px;
   }
-}
 
-.picker-selectedItem {
-  // Office UI Fabric specifies a hover which has more priority this, hence the !important
-  background-color: #D0D0D0 !important;
+  .picker-icon-left {
+    margin-right: 5px;
+
+    img {
+      display: block;
+    }
+  }
+
+  .picker-selectedItem {
+    // Office UI Fabric specifies a hover which has more priority this, hence the !important
+    background-color: #D0D0D0 !important;
+  }
 }
diff --git a/src/oneNotePicker.tsx b/src/oneNotePicker.tsx
@@ -11,7 +11,7 @@ interface OneNotePickerProps extends GlobalProps {
 class OneNotePicker extends React.Component<OneNotePickerProps, null> {
 	render() {
 		return (
-			<div className='ms-fontColor-themePrimary'>
+			<div className='onenote-picker ms-fontColor-themePrimary'>
 				<ul role='tree' className='menu-list picker-list-header'>
 					{this.props.notebooks.map(notebook => <NotebookItem globals={this.props.globals} notebook={notebook} key={notebook.name}></NotebookItem>)}
 				</ul>
