Add details in template list popup

Issue-ID: VID-730
Signed-off-by: Yoav Schneiderman <yoav.schneiderman@intl.att.com>
Change-Id: I7042e85a1e12e7d5d9a19b5cc1eb92c65ea08134

2 files changed, 43 insertions, 1 deletions

diff --git a/vid-webpack-master/src/app/shared/components/formControls/component/checkbox/checkbox.formControl.component.scss b/vid-webpack-master/src/app/shared/components/formControls/component/checkbox/checkbox.formControl.component.scss
new file mode 100644
index 000000000..005e28cc6
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/formControls/component/checkbox/checkbox.formControl.component.scss
@@ -0,0 +1,41 @@
+.details-item input {
+  cursor: pointer;
+  opacity: 0;
+  position: absolute;
+  z-index: 100;
+  width: 24px;
+  height: 22px;
+  margin: 0;
+}
+
+.details-item label {
+  position: relative;
+  cursor: pointer;
+}
+
+.details-item label:before {
+  content:'';
+  -webkit-appearance: none;
+  background-color: transparent;
+  border: 2px solid #0079bf;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
+  padding: 10px;
+  display: inline-block;
+  position: relative;
+  vertical-align: middle;
+  cursor: pointer;
+  margin-right: 5px;
+}
+
+.details-item input:checked + label:after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 2px;
+  left: 9px;
+  width: 6px;
+  height: 14px;
+  border: solid #0079bf;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
diff --git a/vid-webpack-master/src/app/shared/components/formControls/component/checkbox/checkbox.formControl.component.ts b/vid-webpack-master/src/app/shared/components/formControls/component/checkbox/checkbox.formControl.component.ts
index f9ba48308..215b1fec1 100644
--- a/vid-webpack-master/src/app/shared/components/formControls/component/checkbox/checkbox.formControl.component.ts
+++ b/vid-webpack-master/src/app/shared/components/formControls/component/checkbox/checkbox.formControl.component.ts
@@ -4,7 +4,8 @@ import {FormGroup} from "@angular/forms";
 
 @Component({
   selector: 'checkbox-form-control',
-  templateUrl: './checkbox.formControl.component.html'
+  templateUrl: './checkbox.formControl.component.html',
+  styleUrls : ['./checkbox.formControl.component.scss']
 })
 export class CheckboxFormControlComponent{
   @Input() data: FormControlModel;