#184 dialog buttons added in

Author: mortendk

elevenfeat/css/ui-dialog.css

@@ -35,13 +35,14 @@ libraries-extend:
     - elevenfeat/feat.placeblock
 
   quickedit/quickedit:
-  - elevenfeat/feat.quickedit
-  # core/jquery.ui:
-  # - elevenfeat/feat.jquery_ui
+    - elevenfeat/feat.quickedit
+
+  core/jquery.ui:
+    - elevenfeat/feat.jquery_ui
 
   #Forms
   ckeditor/drupal.ckeditor:
-  - elevenfeat/form.ckeditor
+    - elevenfeat/form.ckeditor
 
 
 
@@ -141,7 +142,7 @@ libraries-override:
   #   css:
   #     component:
   #       assets/vendor/jquery.ui/themes/base/button.css: false
-
+  #
 
   node/drupal.node.preview:
     css:

elevenfeat/elevenfeat.info.yml

@@ -8,8 +8,6 @@ global:
       # templates/form/select/form-select.css: {}
     # layout:
       # css/layout.css: {}
-    component:
-      css/ui-dialog.css: {}
     theme:
       css/type.css: {}
   dependencies:
@@ -61,10 +59,12 @@ feat.quickedit:
 
 
 
-# feat.jquery_ui:
-#   css:
-#     theme:
-#       templates/jquery_ui/jquery_ui.css: {}
+feat.jquery_ui:
+  css:
+    theme:
+      templates/jquery_ui/jquery_ui.css: {}
+      templates/jquery_ui/dialog.css: {}
+
 
 # ------------------------------------------------------------------------------
 # Forms

elevenfeat/elevenfeat.libraries.yml

@@ -0,0 +1,93 @@
+/*
+overwrites for ui dialog for eleven feat.
+*/
+body .ui-widget-overlay {
+	background: var(--white-90);
+}
+
+/*.ui-dialog[style] {
+  width: 33% !important;
+  left: 33% !important
+}*/
+.ui-dialog.ui-corner-all.ui-widget-content {
+  /*border: 1px solid var(--concrete);*/
+}
+.ui-widget-content,
+.ui-widget.ui-widget-content{
+  border: none;
+}
+
+.ui-dialog-title {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
+  font-weight: bold;
+}
+
+.ui-dialog .ui-dialog-content {
+  margin: 0;
+  padding: 16px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
+  font-size: 16px;
+  background-color: var(--gravel);
+  color: var(--asphalt);
+}
+
+/* Buttons */
+.ui-dialog .ui-dialog-buttonpane {
+  background-color: var(--gravel);
+  padding-bottom: 16px;
+  border: none;
+}
+
+body .ui-dialog .button {
+  font-size: 16px;
+  color: var(--white);
+  position: relative;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
+  border: none;
+  border-radius: 0;
+  text-shadow: none;
+  width: auto;
+  height: 2rem;
+  padding-left: 2.5rem;
+  margin: 0 0.25rem 0 0;
+  border:none;
+  transition: all 0.2s;
+  background-image: var(--button-asphalt);
+}
+body .ui-dialog .button:before {
+  content: '';
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  left: 8px;
+  top: 8px;
+  background-color: var(--white);
+
+  mask-image: var(--icon-coffee);
+  -webkit-mask-image: var(--icon-coffee);
+  -webkit-mask-size: contain !important;
+  mask-size: contain !important;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+}
+
+body .ui-dialog .button:hover {
+  background-image: var(--button-asphalt-rev);
+}
+/* save */
+body .ui-dialog .button.button--primary:before{
+  mask-image: url(icons/thumbs-up.svg);
+  -webkit-mask-image: url(icons/thumbs-up.svg);
+}
+body .ui-dialog .button--primary{
+  background-image: var(--button-grass);
+}
+body .ui-dialog .button--primary:hover{
+  background-image: var(--button-grass-rev);
+}
+
+
+body .ui-dialog .button:before{
+  mask-image: url(icons/times.svg);
+  -webkit-mask-image: url(icons/times.svg);
+}

elevenfeat/templates/jquery_ui/dialog.css

@@ -4,14 +4,6 @@
 }
 
 /*UI dialog*/
-.ui-widget.ui-widget-content {
-  border: 0 solid var(--asphalt);
-}
-
-/* dialog */
-.ui-dialog .ui-dialog-buttonpane button{
-  margin: 0 0.25rem
-}
 
 .ui-dialog {
   position: absolute;
@@ -40,9 +32,6 @@
   width: 100%;
 }
 
-/* button
-TODO: this should be a standard button
-*/
 .ui-dialog a.button-action,
 .ui-dialog .dropbutton-single a {
   /*background-image: var(--icon-heart), var(--button-rasberry);

elevenfeat/templates/jquery_ui/icons/thumbs-up.svg

@@ -25,7 +25,11 @@ Quickedit
   border: 1px solid var(--asphalt-light);
 }
 
-.quickedit-candidate { }
+.quickedit-candidate:hover {
+  outline: 1px dashed var(--bluesky-light);
+  background-color: var(--bluesky-light-light);
+}
+
 
 
 /*This is the  active element */