Removing .icon class as it clashes with SS style definition

jaedb · Feb 22, 2018 · c0283cd · c0283cd
1 parent 6713d95
commit c0283cd
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 10 deletions.
diff --git a/_config/config.yml b/_config/config.yml
@@ -1,2 +1,2 @@
 IconField:
-  icons_directory: site/icons
+  icons_directory: /site/icons/
diff --git a/code/IconField.php b/code/IconField.php
@@ -5,6 +5,7 @@
 use SilverStripe\View\Requirements;
 use SilverStripe\View\ArrayData;
 use SilverStripe\ORM\ArrayList;
+use SilverStripe\Forms\FormField;
 use SilverStripe\Forms\OptionsetField;
 use SilverStripe\Core\Config\Config;
 
@@ -88,13 +89,19 @@ public function Field($properties = array()) {
 		));
 
 		return $this->customise($properties)->renderWith('IconField');
+        //return FormField::Field($properties);
 	}
 
 	/**
 	 * Handle extra classes
 	 **/
     public function extraClass(){
         $classes = array('field', 'IconField', parent::extraClass());
+
+		if (($key = array_search("icon", $classes)) !== false) {
+		    unset($classes[$key]);
+		}
+
         return implode(' ', $classes);
     }
 }

diff --git a/css/IconField.css b/css/IconField.css
@@ -1,21 +1,21 @@
 
-.field.icon ul {
+.field.IconField ul {
 	margin: 0;
 	padding: 0;
 	border-radius: 4px;
 	border: 1px solid #b3b3b3;
 	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJUlEQVQYV2N89+7dfwY0ICQkxIguxjgUFKI7GsTH5m4M3w1ChQDSWCb4tR+WrAAAAABJRU5ErkJggg==");
 }
 
-.field.icon .option {
+.field.IconField .option {
 	display: inline-block;
 }
 
-.field.icon .option input {
+.field.IconField .option input {
 	display: none;
 }
 
-.field.icon .option label {
+.field.IconField .option label {
 	display: inline-block;
 	width: 50px;
 	height: 50px;
@@ -28,21 +28,21 @@
 	position: relative;
 }
 
-.field.icon .option label:hover {
+.field.IconField .option label:hover {
 	background: rgba(0,0,0,0.1);
 }
 
-.field.icon .option label img {
+.field.IconField .option label img {
 	max-width: 100%;
 	max-height: 100%;
 }
 
-.field.icon .option input:checked + label {
+.field.IconField .option input:checked + label {
 	background-color: #3875d7;
 	background-image: -moz-linear-gradient(center top , #3875d7 20%, #2a62bc 90%);
 }
 
-.field.icon .option:first-child label:after {
+.field.IconField .option:first-child label:after {
 	content: 'No icon';
 	display: block;
 	color: #000000;
@@ -55,6 +55,6 @@
 	right: 0;
 }
 
-.field.icon .option input:checked + label:after {
+.field.IconField .option input:checked + label:after {
 	color: #FFFFFF;
 }