Revert "less/roojs-bootstrap/alert.less"
[roojs1] / less / roojs-bootstrap / masonary-squares.scss
diff --git a/less/roojs-bootstrap/masonary-squares.scss b/less/roojs-bootstrap/masonary-squares.scss
new file mode 100644 (file)
index 0000000..6d00ffb
--- /dev/null
@@ -0,0 +1,120 @@
+.masonary .masonry-bottom-title  {
+    background-color: transparent;
+}
+
+.masonry-brick-link,
+.roo-brick-link {
+    cursor: pointer;
+    text-decoration: none;
+    outline: 0;
+}
+
+.masonry-brick-paragraph,
+.roo-brick-paragraph {
+    overflow: hidden;
+}
+
+.masonry-brick .masonry-brick-paragraph {
+    padding: 9px;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-color: inherit;
+}
+
+.masonry-center-title .masonry-brick-paragraph,
+.masonry-bottom-title .masonry-brick-paragraph,
+.roo-brick-center-title .roo-brick-paragraph,
+.roo-brick-bottom-title .roo-brick-paragraph {
+    display: table;
+}
+
+.masonry-center-title .masonry-brick-paragraph .masonry-brick-title,
+.roo-brick-center-title .roo-brick-paragraph .roo-brick-title {
+    display:table-cell;
+    vertical-align:middle;
+    text-align:center;
+}
+
+.masonry-bottom-title .masonry-brick-paragraph .masonry-brick-title,
+.roo-brick-bottom-title .roo-brick-paragraph .roo-brick-title {
+    display:table-cell;
+    vertical-align:bottom;
+    text-align:right;
+}
+
+.masonry-brick-image .masonry-brick-paragraph,
+.roo-brick-image .roo-brick-paragraph {
+    opacity: 0;
+}
+
+.masonry-bottom-title .masonry-brick-paragraph {
+    opacity: 1;
+}
+
+
+.masonry-brick-image-view  {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.masonry-brick-paragraph .masonry-brick-title,
+.roo-brick-paragraph .roo-brick-title {
+    margin-top: 0;
+}
+
+.roo-brick .roo-brick-paragraph {
+    padding: 9px;
+    width: 100%;
+    height: 100%;
+    background-color: inherit;
+}
+
+.roo-brick-image-view  {
+    position: absolute;
+    top: 0;
+    object-fit: cover;
+}
+
+a.roo-brick-link:focus,
+a.roo-brick-link:hover {
+    text-decoration: none;
+    outline: 0;
+}
+
+.masonry-brick-split .masonry-brick-split-head,
+.masonry-brick-split .masonry-brick-split-head .masonry-brick-paragraph {
+    height: 75%;
+}
+
+.masonry-brick-split .masonry-brick-split-body {
+    height: 25%;
+    padding: 4px;
+    color: $gray-base;
+    font-size: 11px;
+}
+
+.enable-mask:hover .masonry-brick-mask {
+    width:100%;
+    height:100%;
+    position:absolute;
+    top: 0;
+    left: 0;
+    background-color:$gray-base;
+    opacity:0.2;
+}
+
+@media (min-width: 768px) {
+    .mask-inverse .masonry-brick-paragraph {
+        background: $black-opacity-50;
+    }
+
+    .mask-inverse:hover .masonry-brick-paragraph {
+        background: none;
+    }
+}
\ No newline at end of file