@scaleflex/widget-provider-views 4.0.7 → 4.1.0

package/lib/style/filerobot-ProviderBrowser-layoutType--grid.scss

@@ -1,233 +1,233 @@
-// ***
-// View type: grid
-// ***
-.filerobot-ProviderBrowser-layoutType--grid {
-  ul.filerobot-ProviderBrowser-list {
-    &::after {
-      content: '';
-      flex: auto;
-    }
-
-    &:focus {
-      outline: none;
-    }
-  }
-
-  .filerobot-Provider-ItemCategory {
-    &-header {
-      display: flex;
-      align-items: center;
-      font-weight: 400;
-      width: 100%;
-      max-width: 130px;
-      padding: 0 12px;
-      margin-top: 12px;
-      cursor: pointer;
-      font-size: 12px;
-    }
-
-    &-wrapper {
-      padding: 8px 24px 12px;
-
-      &-list {
-        list-style: none;
-        padding: 0;
-        width: 100%;
-        display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-      }
-    }
-  }
-
-  li.filerobot-ProviderBrowserItem {
-    min-width: 200px;
-    position: relative;
-    margin: 0;
-
-    &::before {
-      content: '';
-      padding-top: 88%;
-      display: block;
-    }
-
-    &--selected.item-folder,
-    &.item-folder:hover {
-      .filerobot-ProviderBrowserItem-folderSelectBox {
-        display: flex;
-      }
-    }
-
-    &:not(.filerobot-ProviderBrowserItem--beingRenamed):hover {
-      .filerobot-Explorer-dots-menu-icon {
-        display: block;
-      }
-    }
-
-    &:not(.item-folder) {
-      outline: none;
-      border: 4px solid transparent;
-
-      [data-filerobot-theme="dark"] & {
-        border: 4px solid $black;
-        background-color: $primary;
-
-        &:hover *,
-        &:focus * {
-          color: $black;
-        }
-      }
-
-      &.no-selection {
-        .filerobot-ProviderBrowserItem-inner {
-          cursor: auto;
-        }
-      }
-
-      &:not(.no-selection) {
-        .filerobot-ProviderBrowserItem-inner:hover {
-          background-color: $hover;
-        }
-      }
-    }
-  }
-
-  .filerobot-ProviderBrowserItem-videoDuration {
-    position: absolute;
-    bottom: 33%;
-    z-index: 2;
-    background: rgba(79, 98, 118, 0.7);
-    border-radius: 2px;
-    left: 16px;
-    padding: 2px 4px;
-    text-align: center;
-    font-weight: 500;
-    line-height: 12px;
-    font-size: 11px;
-    box-shadow: 0px 1px 2px 0px rgba(77, 78, 78, 0.15);
-    color: #fff !important;
-  }
-
-  li.filerobot-ProviderBrowserItem--selected {
-    .filerobot-ProviderBrowserItem-inner {
-      background-color: $active !important;
-
-      * {
-        fill: $white;
-        color: $white;
-      }
-    }
-
-    // As with-meta is related to the explorer only so that the styles would be applied to the explorer cards only.
-    &.with-meta {
-      input {
-        text-align: center;
-        color: #000 !important;
-        margin-top: 4px;
-        margin-bottom: -1px;
-      }
-
-      button.filerobot-ProviderBrowserItem-inner {
-        &:focus {
-          box-shadow: none !important;
-        }
-      }
-    }
-
-    .filerobot-Explorer-Item-fileInfoAndButtons {
-      background-color: inherit;
-    }
-  }
-
-  li.filerobot-ProviderBrowserItem--noPreview {
-    .filerobot-ProviderBrowserItem-inner {
-      background-color: rgba($gray-500, 0.2);
-
-      [data-filerobot-theme="dark"] & {
-        background-color: rgba($gray-200, 0.2);
-      }
-    }
-
-    svg {
-      fill: rgba($black, 0.7);
-      width: 30%;
-      height: 30%;
-
-      [data-filerobot-theme="dark"] & {
-        fill: rgba($white, 0.8);
-      }
-    }
-  }
-
-  // button with a large picture
-  button.filerobot-ProviderBrowserItem-inner {
-    overflow: hidden;
-    position: absolute;
-    text-align: center;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border-radius: 2px;
-    box-shadow: 0px 1px 2px 0px rgba(77, 78, 78, 0.15);
-    background-color: $hover;
-
-    &:focus {
-      outline: none;
-    }
-
-    &.with-meta {
-      display: flex;
-      flex-direction: column-reverse;
-      align-items: center;
-      justify-content: flex-end;
-
-      &:focus {
-        box-shadow: none;
-      }
-
-      img {
-        object-fit: contain;
-        width: 100%;
-        height: 100%;
-        max-width: 100%;
-        max-height: 100%;
-      }
-    }
-  }
-
-  // Checkbox
-  .filerobot-ProviderBrowserItem-fakeCheckbox {
-    display: none;
-    position: absolute;
-    z-index: 3;
-    top: 8px;
-    left: 8px;
-  }
-
-  .filerobot-ProviderBrowserItem-folderSelectBox {
-    top: 26px;
-    left: 14px;
-    position: absolute;
-    display: none;
-  }
-}
-
-.filerobot-ProviderBrowserItem--selected {
-  .filerobot-ProviderBrowserItem-fakeCheckbox {
-    display: block;
-  }
-}
-
-.filerobot-ProviderBrowserItem-fakeCheckbox {
-  *:hover>& {
-    display: block;
-  }
-}
-
-
-.filerobot-Dragging-folders,
-.filerobot-Dragging-files {
-  &>* {
-    pointer-events: none;
-  }
-}
+// ***
+// View type: grid
+// ***
+.filerobot-ProviderBrowser-layoutType--grid {
+  ul.filerobot-ProviderBrowser-list {
+    &::after {
+      content: '';
+      flex: auto;
+    }
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  .filerobot-Provider-ItemCategory {
+    &-header {
+      display: flex;
+      align-items: center;
+      font-weight: 400;
+      width: 100%;
+      max-width: 130px;
+      padding: 0 12px;
+      margin-top: 12px;
+      cursor: pointer;
+      font-size: 12px;
+    }
+
+    &-wrapper {
+      padding: 8px 24px 12px;
+
+      &-list {
+        list-style: none;
+        padding: 0;
+        width: 100%;
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+      }
+    }
+  }
+
+  li.filerobot-ProviderBrowserItem {
+    min-width: 200px;
+    position: relative;
+    margin: 0;
+
+    &::before {
+      content: '';
+      padding-top: 88%;
+      display: block;
+    }
+
+    &--selected.item-folder,
+    &.item-folder:hover {
+      .filerobot-ProviderBrowserItem-folderSelectBox {
+        display: flex;
+      }
+    }
+
+    &:not(.filerobot-ProviderBrowserItem--beingRenamed):hover {
+      .filerobot-Explorer-dots-menu-icon {
+        display: block;
+      }
+    }
+
+    &:not(.item-folder) {
+      outline: none;
+      border: 4px solid transparent;
+
+      [data-filerobot-theme="dark"] & {
+        border: 4px solid $black;
+        background-color: $primary;
+
+        &:hover *,
+        &:focus * {
+          color: $black;
+        }
+      }
+
+      &.no-selection {
+        .filerobot-ProviderBrowserItem-inner {
+          cursor: auto;
+        }
+      }
+
+      &:not(.no-selection) {
+        .filerobot-ProviderBrowserItem-inner:hover {
+          background-color: $hover;
+        }
+      }
+    }
+  }
+
+  .filerobot-ProviderBrowserItem-videoDuration {
+    position: absolute;
+    bottom: 33%;
+    z-index: 2;
+    background: rgba(79, 98, 118, 0.7);
+    border-radius: 2px;
+    left: 16px;
+    padding: 2px 4px;
+    text-align: center;
+    font-weight: 500;
+    line-height: 12px;
+    font-size: 11px;
+    box-shadow: 0px 1px 2px 0px rgba(77, 78, 78, 0.15);
+    color: #fff !important;
+  }
+
+  li.filerobot-ProviderBrowserItem--selected {
+    .filerobot-ProviderBrowserItem-inner {
+      background-color: $active !important;
+
+      * {
+        fill: $white;
+        color: $white;
+      }
+    }
+
+    // As with-meta is related to the explorer only so that the styles would be applied to the explorer cards only.
+    &.with-meta {
+      input {
+        text-align: center;
+        color: #000 !important;
+        margin-top: 4px;
+        margin-bottom: -1px;
+      }
+
+      button.filerobot-ProviderBrowserItem-inner {
+        &:focus {
+          box-shadow: none !important;
+        }
+      }
+    }
+
+    .filerobot-Explorer-Item-fileInfoAndButtons {
+      background-color: inherit;
+    }
+  }
+
+  li.filerobot-ProviderBrowserItem--noPreview {
+    .filerobot-ProviderBrowserItem-inner {
+      background-color: rgba($gray-500, 0.2);
+
+      [data-filerobot-theme="dark"] & {
+        background-color: rgba($gray-200, 0.2);
+      }
+    }
+
+    svg {
+      fill: rgba($black, 0.7);
+      width: 30%;
+      height: 30%;
+
+      [data-filerobot-theme="dark"] & {
+        fill: rgba($white, 0.8);
+      }
+    }
+  }
+
+  // button with a large picture
+  button.filerobot-ProviderBrowserItem-inner {
+    overflow: hidden;
+    position: absolute;
+    text-align: center;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 2px;
+    box-shadow: 0px 1px 2px 0px rgba(77, 78, 78, 0.15);
+    background-color: $hover;
+
+    &:focus {
+      outline: none;
+    }
+
+    &.with-meta {
+      display: flex;
+      flex-direction: column-reverse;
+      align-items: center;
+      justify-content: flex-end;
+
+      &:focus {
+        box-shadow: none;
+      }
+
+      img {
+        object-fit: contain;
+        width: 100%;
+        height: 100%;
+        max-width: 100%;
+        max-height: 100%;
+      }
+    }
+  }
+
+  // Checkbox
+  .filerobot-ProviderBrowserItem-fakeCheckbox {
+    display: none;
+    position: absolute;
+    z-index: 3;
+    top: 8px;
+    left: 8px;
+  }
+
+  .filerobot-ProviderBrowserItem-folderSelectBox {
+    top: 26px;
+    left: 14px;
+    position: absolute;
+    display: none;
+  }
+}
+
+.filerobot-ProviderBrowserItem--selected {
+  .filerobot-ProviderBrowserItem-fakeCheckbox {
+    display: block;
+  }
+}
+
+.filerobot-ProviderBrowserItem-fakeCheckbox {
+  *:hover>& {
+    display: block;
+  }
+}
+
+
+.filerobot-Dragging-folders,
+.filerobot-Dragging-files {
+  &>* {
+    pointer-events: none;
+  }
+}