remove base-css element

View/CoGrouperLiteWidgets/display.ctp

@@ -30,11 +30,8 @@
  */
 
 $this->extend('/GrouperGroups/base');
-//echo $this->element('GrouperLiteWidget.base-styles');
-
 
 // Figure out the widget ID so we can overwrite the dashboard's widget div
-
 $divid = $vv_config['CoGrouperLiteWidget']['co_dashboard_widget_id'];
 $plugin = filter_var($vv_codw['CoDashboardWidget']['plugin'], FILTER_SANITIZE_SPECIAL_CHARS);
 $pl = Inflector::underscore($plugin);

View/GrouperGroups/base.ctp

@@ -17,7 +17,7 @@ print $this->Html->meta(
 );
 
 print $this->Html->script('GrouperLiteWidget.autocomplete.grouperplugin') . PHP_EOL;
-print $this->element('GrouperLiteWidget.base-styles');
+print $this->Html->css('GrouperLiteWidget.co-grouper-base') . PHP_EOL;
 print $this->Html->css('GrouperLiteWidget.co-grouper-plugin') . PHP_EOL;
 
 $this->Html->addCrumb(_txt('pl.grouperlite.crumb.root'),

webroot/css/co-grouper-base.css

@@ -1,28 +1,138 @@
 :root {
-    --red: #CC3333;
+    --red: #B32D2D;
     --blue: #1D7AB4;
-    --green: #22AA22;
+    --green: #1D871D;
+    --orange: #faa732;
     --teal: #1c6070;
+    --darkteal: #003f59;
+    --link: #0076a5;
+    --link-hover: #003f59;
     --danger: var(--red);
     --success: var(--green);
     --primary: var(--teal);
+    --warning: var(--orange);
+    --secondary: var(--darkteal)
+}
+
+.text-grouper {
+    color: var(--primary);
+}
+
+.text-sml {
+    font-size: 0.8rem;
+}
+
+#content .material-icons.lg {
+    font-size: 1.2rem;
+}
+
+.grouper .btn:not(.btn-link) {
+    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
+    max-width: 220px;
+}
+
+.grouper .btn:not([disabled]):hover {
+    text-decoration: none !important;
+    filter: brightness(1.1);
 }
 
 .grouper .btn.btn-primary {
     background-color: var(--primary);
     border-color: var(--primary);
-    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
 }
 
-.grouper .btn.btn-success.btn-grouper {
+.grouper .btn.btn-success {
     background-color: var(--success);
     border-color: var(--success);
-    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
 }
 
-.grouper .btn.btn-danger.btn-grouper {
+.grouper .btn.btn-danger {
     background-color: var(--danger);
     border-color: var(--danger);
-    color: white;
-    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
+}
+
+.grouper .btn.btn-secondary {
+    background-color: var(--secondary);
+    border-color: var(--secondary);
+}
+
+.grouper .btn.btn-link,
+.grouper a:not(.btn) {
+    color: var(--link);
+}
+
+.grouper .btn.btn-link:hover,
+.grouper a:not(.btn):hover {
+    color: var(--link-hover);
+}
+
+#subscribers.loading .loader {
+    display: block;
+}
+
+#subscribers.loading .subs,
+#subscribers.error .subs {
+    display: none;
+}
+
+#subscribers.error .msg {
+    display: block;
+}
+
+#subscribers .loader,
+#subscribers .msg {
+    display: none;
+}
+
+.modal-open .ui-menu {
+    z-index: 2000;
+}
+
+#grouper-loader {
+    pointer-events: none;
+    width: 100px;
+    display: block;
+    margin: 0 auto;
+    overflow: visible;
+    padding: 15px;
+    max-width: 100%;
+}
+
+#grouper-loader circle {
+    transform-origin: center;
+    fill: var(--primary);
+    transition: ease;
+    animation-timing-function: ease-in-out !important;
+}
+
+#search {
+    background-color: #F6F6F6;
+}
+
+/* fade out half */
+
+#grouper-loader.fade-out-half circle:nth-child(1) {
+    animation: fadeInHalf 0.9s -2.3s infinite reverse;
+}
+
+#grouper-loader.fade-out-half circle:nth-child(2) {
+    animation: fadeInHalf 0.9s -1.3s infinite reverse;
+}
+
+#grouper-loader.fade-out-half circle:nth-child(3) {
+    animation: fadeInHalf 0.9s -0.3s infinite reverse;
+}
+
+.popover {
+    max-width: 400px;
+}
+
+@keyframes fadeInHalf {
+    from {
+        opacity: 0.5;
+    }
+
+    to {
+        opacity: 1;
+    }
 }