EN · DE · RU · FR · ES
← Index · ← File index · ← Prev · Next → · 📄 source

#2676: Popper.module.scss

projectforge-webapp/src/components/design/popper/Popper.module.scss SCSS stylesheet, projectforge-webapp/src/components/design/popper/Popper.module.scss 139 lines · 115 code · 0 comments · 24 blank
Purpose: React webapp: Popper.module.scss. Popper.module.scss is part of the ProjectForge open-source project management application.

Source (first 100 lines)

.popper {
  z-index: 9999;
  background-color: #fff;
  border: 1px solid #dfdfdf;
  border-radius: .25em;
  padding: 10px;
}

.advancedPopperContainer {
  $baseShadow: 0 2px 3px rgba(0, 0, 0, 0.1);
  $transitionTime: .2s;

  position: relative;
  outline: none;

  &.isOpen {
    .content {
      box-shadow: $baseShadow, 0 3px 12px rgba(0, 0, 0, 0.1);
    }

    .additional {
      opacity: 1;
    }
  }

  .content {
    position: relative;
    border: 1px solid #ebebeb;
    border-radius: 5px;
    box-shadow: $baseShadow;
    transition: box-shadow $transitionTime;

    &:hover {
      box-shadow: $baseShadow, 0 3px 12px rgba(0, 0, 0, 0.1);
    }

    &.noBorder {
      border: none;
      box-shadow: none;

      .container {
        padding: 0;
      }
    }
  }

  .additional {
    background-color: #fff;
    opacity: 0;
    overflow: auto;
    border: 1px solid #EBEBEB;
    border-radius: 5px;
    box-shadow: 0 15px 46px -10px rgba(26, 26, 29, 0.3);
    z-index: 99;
    overflow-x: hidden;

    position: absolute;

    &.withInput {
      border-top-left-radius: 0;
      border-top-right-radius: 0;
      border-top: none;
    }

    .actions {
      padding: .8em 1rem;
      display: flex;

      .action {
        margin: 0;
        display: inline-block;
        text-align: center;
        width: auto;
        font-weight: 600;
        padding: .4em .6em;
        color: #333;
        outline: none;
        border: none;
        border-radius: 8px;

        &.delete {
          text-decoration: underline;
          padding: 0;
          border-radius: 0;
          background-color: transparent;

          &:hover {
            color: #000;
          }

          &:disabled {
            color: #ccc;
            cursor: not-allowed;
          }
        }

        &.success {
          margin-left: auto;
          background-color: #333;
          font-size: .9em;

Git History

bbcf4952d fix magic filter list style
84e49a936 fix advanced popper focus management
16c498aea fix delete action style
7d6ea1f31 fix some paddings
d217c9aff reworked autocompletion design to new materialize inputs

bbcf4952d

fix magic filter list style
bbcf4952d61dffad5d82bd0d11350e437ae9c6a0
diff --git a/projectforge-webapp/src/components/design/popper/Popper.module.scss b/projectforge-webapp/src/components/design/popper/Popper.module.scss
index 5fc15cea8..5a748bd29 100644
--- a/projectforge-webapp/src/components/design/popper/Popper.module.scss
+++ b/projectforge-webapp/src/components/design/popper/Popper.module.scss
@@ -120,17 +120,15 @@
     background-color: #333;
     color: #fff;
 
-    input {
+    svg {
       color: #fff;
-
-      &::placeholder {
-        color: #eee;
-      }
     }
 
-    &:hover {
-      input::placeholder {
-        color: #fff;
+    input, svg {
+      color: #fff;
+
+      &::placeholder {
+        color: #ddd;
       }
     }
   }

84e49a936

fix advanced popper focus management
84e49a936221feb91cb27cfa6ffc0ef9f09bc50e
diff --git a/projectforge-webapp/src/components/design/popper/Popper.module.scss b/projectforge-webapp/src/components/design/popper/Popper.module.scss
index f08796fc7..5fc15cea8 100644
--- a/projectforge-webapp/src/components/design/popper/Popper.module.scss
+++ b/projectforge-webapp/src/components/design/popper/Popper.module.scss
@@ -11,6 +11,7 @@
   $transitionTime: .2s;
 
   position: relative;
+  outline: none;
 
   &.isOpen {
     .content {
@@ -28,7 +29,6 @@
     border-radius: 5px;
     box-shadow: $baseShadow;
     transition: box-shadow $transitionTime;
-    outline: none;
 
     &:hover {
       box-shadow: $baseShadow, 0 3px 12px rgba(0, 0, 0, 0.1);

16c498aea

fix delete action style
16c498aeac799cba87a12a406265b2d8cdd8f8fd
diff --git a/projectforge-webapp/src/components/design/popper/Popper.module.scss b/projectforge-webapp/src/components/design/popper/Popper.module.scss
index 8d7a16ff2..f08796fc7 100644
--- a/projectforge-webapp/src/components/design/popper/Popper.module.scss
+++ b/projectforge-webapp/src/components/design/popper/Popper.module.scss
@@ -81,6 +81,8 @@
         &.delete {
           text-decoration: underline;
           padding: 0;
+          border-radius: 0;
+          background-color: transparent;
 
           &:hover {
             color: #000;
@@ -88,7 +90,6 @@
 
           &:disabled {
             color: #ccc;
-            background-color: transparent;
             cursor: not-allowed;
           }
         }

7d6ea1f31

fix some paddings
7d6ea1f31d822baf58a029fa7dfa52b84437956d
diff --git a/projectforge-webapp/src/components/design/popper/Popper.module.scss b/projectforge-webapp/src/components/design/popper/Popper.module.scss
index 3b9d9afe1..8d7a16ff2 100644
--- a/projectforge-webapp/src/components/design/popper/Popper.module.scss
+++ b/projectforge-webapp/src/components/design/popper/Popper.module.scss
@@ -63,7 +63,7 @@
     }
 
     .actions {
-      padding: .8em .9em;
+      padding: .8em 1rem;
       display: flex;
 
       .action {
@@ -80,10 +80,10 @@
 
         &.delete {
           text-decoration: underline;
+          padding: 0;
 
           &:hover {
             color: #000;
-            background-color: #f2f2f2;
           }
 
           &:disabled {

d217c9aff

reworked autocompletion design to new materialize inputs
d217c9aff5825ea28fc15f603f0bbc2f28eeeacd
diff --git a/projectforge-webapp/src/components/design/popper/Popper.module.scss b/projectforge-webapp/src/components/design/popper/Popper.module.scss
index 65a896bd3..3b9d9afe1 100644
--- a/projectforge-webapp/src/components/design/popper/Popper.module.scss
+++ b/projectforge-webapp/src/components/design/popper/Popper.module.scss
@@ -33,6 +33,15 @@
     &:hover {
       box-shadow: $baseShadow, 0 3px 12px rgba(0, 0, 0, 0.1);
     }
+
+    &.noBorder {
+      border: none;
+      box-shadow: none;
+
+      .container {
+        padding: 0;
+      }
+    }
   }
 
   .additional {
@@ -43,11 +52,16 @@
     border-radius: 5px;
     box-shadow: 0 15px 46px -10px rgba(26, 26, 29, 0.3);
     z-index: 99;
-    top: 10px;
     overflow-x: hidden;
 
     position: absolute;
 
+    &.withInput {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+      border-top: none;
+    }
+
     .actions {
       padding: .8em .9em;
       display: flex;