EN · DE · RU · FR · ES
← Index · ← Datei-Index · ← Vorherige · Nächste → · 📄 Quelle

#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 Zeilen · 115 Code · 0 Kommentare · 24 Leerzeichen
Zweck: React-Webanwendung: Popper.module.scss. Popper.module.scss ist Teil der Open-Source-Projektmanagement-Anwendung ProjectForge.

Quelltext (erste 100 Zeilen)

.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-Verlauf

bbcf4952d Korrektur des Stils der magischen Filterliste
84e49a936 Korrektur des Fokus-Managements für erweiterte Popper
16c498aea Korrektur des Stils der Löschaktion
7d6ea1f31 Korrektur einiger Abstände
d217c9aff Überarbeitung des Autovervollständigungs-Designs für neue Materialize-Eingaben

bbcf4952d

Korrektur des Stils der magischen Filterliste
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

Korrektur des Fokus-Managements für erweiterte Popper
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

Korrektur des Stils der Löschaktion
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

Korrektur einiger Abstände
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

Überarbeitung des Autovervollständigungs-Designs für neue Materialize-Eingaben
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;