ecomlab-components-next 0.1.159 → 0.1.162

package/dist/stories/ShortTileArticleBox/ShortTileArticleBox.scss

@@ -0,0 +1,827 @@
+@import url('../../styles/font.scss');
+@import url('../../styles/globals.scss');
+
+.tile-short {
+    max-width: 342px;
+    width: 100%;
+    min-width: 280px;
+
+    .link-blue {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        justify-content: flex-end;
+        gap: 8px;
+        color: #4285F4;
+        font-family: Inter;
+        font-size: 12px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 22px;
+    }
+
+    .article-min {
+        display: flex;
+        flex-direction: column;
+        flex-shrink: 1;
+        width: 100%;
+        border: 2px solid #F0F2F4;
+        //overflow: hidden;
+        // padding: 12px 12px 12px;
+        border-radius: 10px;
+        //aspect-ratio: 1/2;
+        min-height: 473px;
+        justify-content: space-between;
+
+        &:hover {
+            border: 2px solid #434C5B;
+
+            .content-box {
+                background-color: #F9FAFB;
+            }
+        }
+
+        .img-content {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 16px;
+            height: calc(230px);
+            min-height: calc(230px);
+            background: #F0F2F4;
+            width: 100%;
+            margin-left: auto;
+            margin-right: auto;
+            aspect-ratio: 1/0.53;
+            position: relative;
+            border-radius: 8px 8px 0 0;
+
+            .img-box {
+                width: 100%;
+                height: 100%;
+                border: 5px solid #fff;
+                background-color: #fff;
+                border-radius: 10px;
+                overflow: hidden;
+            }
+
+            //  border: 1px solid #AAAAAA;
+
+            .img-box {}
+
+
+
+            img {
+                display: inline-block;
+                max-width: 100%;
+                width: 100%;
+                height: 100%;
+                object-fit: contain;
+                border-radius: 8px;
+            }
+        }
+
+        .tag-box {
+            display: flex;
+            gap: 14px;
+            align-items: flex-start;
+            flex-wrap: nowrap;
+            min-height: 16px;
+            overflow: hidden;
+
+            .tag {
+                gap: 4px;
+                white-space: nowrap;
+                align-items: center;
+                font-size: 12px;
+                color: #9959FC;
+                font-family: "Golos Text";
+                font-size: 14px;
+                font-style: normal;
+                font-weight: 500;
+                line-height: 16px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+        }
+
+        .content-box {
+            padding: 16px;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            gap: 8px;
+            background-color: #fff;
+            border-radius: 8px;
+
+            .title {
+                color: #2B2B46;
+                font-family: "Golos Text";
+                font-size: 20px;
+                font-style: normal;
+                font-weight: 600;
+                line-height: 24px;
+                display: -webkit-box;
+                -webkit-line-clamp: 2; // количество строк
+                -webkit-box-orient: vertical;
+                overflow: hidden;
+                hyphens: auto;
+                min-height: 48px;
+
+                b {
+                    background-color: #fdfd78;
+                }
+            }
+
+            .description-content {
+                margin-top: 2px;
+
+                .text_description {
+                    color: #5D5D75;
+                    font-family: "Golos Text";
+                    font-size: 14px;
+                    font-style: normal;
+                    font-weight: 400;
+                    line-height: 22px;
+                    display: -webkit-box;
+                    -webkit-line-clamp: 3;
+                    -webkit-box-orient: vertical;
+                    overflow: hidden;
+                    hyphens: auto;
+                    min-height: 66px;
+
+                    b {
+                        background-color: #fdfd78;
+                    }
+
+                }
+
+                .btn-box {
+                    display: none;
+                    opacity: 0;
+                    visibility: hidden;
+                    //  transition: 0.3s;
+                }
+            }
+
+            .text_grey {
+           //     white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                font-size: 12px;
+                color: #AAAAAA;
+                overflow: hidden;
+            }
+
+            .top-box {
+                display: flex;
+                flex-direction: column;
+                gap: 12px;
+            }
+
+            .bottom-box {
+                display: flex;
+                flex-direction: column;
+                gap: 12px;
+            }
+
+
+        }
+
+        .text-and-info-box {
+            display: flex;
+            flex-direction: column;
+            gap: 17px;
+            width: 100%;
+
+            .top-info,
+            .bottom-info {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                width: 100%;
+
+                .author-box {
+                    display: flex;
+                    align-items: center;
+                    gap: 8px;
+                }
+
+                .author-avatar {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    width: 24px;
+                    height: 24px;
+                    min-width: 24px;
+                    background-color: #27BC62;
+                    color: #FFF;
+                    text-align: center;
+                    font-family: NunitoSans;
+                    border-radius: 50%;
+                    font-size: 10px;
+                    font-style: normal;
+                    font-weight: 700;
+                    line-height: 12px;
+                }
+
+                .text,
+                .text_grey {
+                    display: -webkit-box;
+                    -webkit-line-clamp: 2; // количество строк
+                    -webkit-box-orient: vertical;
+                    overflow: hidden;
+                    word-break: break-word;
+                    hyphens: auto;
+                    color: #2B2B46;
+                    font-family: "Golos Text";
+                    font-size: 14px;
+                    font-style: normal;
+                    font-weight: 500;
+                    line-height: 18px;
+                }
+            }
+
+            .top-info {
+
+                .text,
+                .text_grey {
+                    color: #5D5D75;
+                    font-family: "Golos Text";
+                    font-size: 12px;
+                    font-style: normal;
+                    font-weight: 500;
+                    line-height: 16px;
+
+                    .author-avatar {
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        width: 32px;
+                        height: 32px;
+                        min-width: 32px;
+                        background-color: #27BC62;
+                        color: #FFF;
+                        text-align: center;
+                        font-family: NunitoSans;
+                        border-radius: 50%;
+                        font-size: 12px;
+                        font-style: normal;
+                        font-weight: 700;
+                        line-height: 12px;
+                    }
+                }
+            }
+
+            .date-box,
+            .time-box,
+            .view-box {
+                display: flex;
+                align-items: center;
+                gap: 6px;
+
+                .icon-box {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    border-radius: 4px;
+                    // border: 1px solid #EAECEA;
+                    background-color: #fff;
+                }
+            }
+
+            .info-box {
+                display: flex;
+                align-items: end;
+                gap: 14px;
+
+
+
+                .text,
+                .text_grey {
+                    white-space: nowrap;
+                    color: #0B110B;
+                    text-align: right;
+                    font-family: NunitoSans;
+                    font-size: 14px;
+                    font-style: normal;
+                    font-weight: 700;
+                    line-height: 16px;
+
+                    span {
+                        color: #B4B8B4;
+                        font-family: NunitoSans;
+                        font-size: 14px;
+                        font-style: normal;
+                        font-weight: 300;
+                        line-height: 16px;
+                    }
+
+                    .info-box {
+                        display: flex;
+                        flex-direction: column;
+                        align-items: end;
+                        gap: 4px;
+
+                        .time-box,
+                        .view-box {
+                            display: flex;
+                            align-items: center;
+                            gap: 5px;
+
+                            .icon-box {
+                                display: flex;
+                                align-items: center;
+                                justify-content: center;
+                                border-radius: 4px;
+                                border: 1px solid #EAECEA;
+                                width: 24px;
+                                height: 24px;
+                            }
+
+
+                        }
+
+                    }
+
+
+                }
+            }
+        }
+
+        .toolbar-bottom {
+            display: flex;
+            gap: 16px;
+            align-items: start;
+
+            .author {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                color: #888888;
+                font-size: 12px;
+                height: 23px;
+                min-height: 23px;
+                max-height: 23px;
+                white-space: nowrap;
+            }
+        }
+    }
+}
+
+@media (max-width: 1000px) {
+    .tile-short {
+        width: calc(50% - 15px);
+        min-width: 150px;
+
+        .article-min {
+            min-height: auto;
+
+            .img-content {
+                min-height: 160px;
+                height: 160px;
+                padding: 8px;
+                aspect-ratio: auto;
+            }
+
+            .tag-box {
+                .tag {}
+            }
+
+            .content-box {
+                padding: 8px;
+
+                .title {
+                    font-size: 14px;
+                    line-height: 20px;
+                    -webkit-line-clamp: 2; // количество строк
+                    min-height: 40px;
+                }
+            }
+
+            .text-and-info-box {
+
+                .top-info,
+                .bottom-info {
+                    flex-direction: column;
+                    align-items: flex-start;
+                }
+
+                .top-info {
+                    gap: 4px;
+
+                    .text,
+                    .text_grey {
+                        color: #5D5D75;
+                        font-family: "Golos Text";
+                        font-size: 12px;
+                        font-style: normal;
+                        font-weight: 500;
+                        line-height: 16px;
+                    }
+                }
+
+                .date-box,
+                .time-box,
+                .view-box {
+                    display: flex;
+                    align-items: center;
+                    gap: 6px;
+
+                    img {
+                        width: 14px;
+                        height: 14px;
+                    }
+
+                    .icon-box {
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        border-radius: 4px;
+                        // border: 1px solid #EAECEA;
+                        background-color: #fff;
+                    }
+                }
+
+                .info-box {
+                    flex-direction: column;
+                    gap: 4px;
+                    width: 100%;
+                    align-items: flex-start;
+
+                    .text,
+                    .text_grey {
+                        white-space: nowrap;
+                        color: #5D5D75;
+                        font-family: "Golos Text";
+                        font-size: 11px;
+                        font-style: normal;
+                        font-weight: 500;
+                        line-height: 16px;
+
+                        span {
+                            color: #B4B8B4;
+                            font-family: NunitoSans;
+                            font-size: 14px;
+                            font-style: normal;
+                            font-weight: 300;
+                            line-height: 16px;
+                        }
+
+                        .info-box {
+                            display: flex;
+                            flex-direction: column;
+                            align-items: start;
+                            gap: 4px;
+
+                            .time-box,
+                            .view-box {
+                                display: flex;
+                                align-items: center;
+                                gap: 5px;
+
+                                .icon-box {
+                                    display: flex;
+                                    align-items: center;
+                                    justify-content: center;
+                                    border-radius: 4px;
+                                    border: 1px solid #EAECEA;
+                                    width: 24px;
+                                    height: 24px;
+                                }
+                            }
+                        }
+                    }
+                }
+
+                .bottom-info {
+                    .text_grey {
+                        color: #2B2B46;
+                        font-family: "Golos Text";
+                        font-size: 12px;
+                        font-style: normal;
+                        font-weight: 500;
+                        line-height: 16px;
+                        white-space: wrap;
+                        display: -webkit-box;
+                        -webkit-line-clamp: 1; // количество строк
+                        -webkit-box-orient: vertical;
+                        overflow: hidden;
+                        hyphens: auto;
+                    }
+                }
+            }
+        }
+
+    }
+}
+
+@media (max-width: 430px) {
+    .tile-short {
+        width: calc(50% - 3px);
+        min-width: 146px;
+
+        .article-min {
+            min-height: auto;
+
+            .img-content {
+                min-height: 160px;
+                height: 160px;
+                padding: 8px;
+                aspect-ratio: auto;
+            }
+
+            .tag-box {
+                .tag {}
+            }
+
+            .content-box {
+                padding: 8px;
+
+                .title {
+                    font-size: 14px;
+                    line-height: 20px;
+                    -webkit-line-clamp: 3; // количество строк
+                    min-height: 60px;
+                }
+
+                .description-content {
+                    display: none;
+
+                    .text_description {}
+
+                    .btn-box {}
+                }
+
+                .text_grey {}
+
+                .top-box {}
+            }
+
+            .text-and-info-box {
+
+                .top-info,
+                .bottom-info {
+                    flex-direction: column;
+                    align-items: flex-start;
+                }
+
+                .top-info {
+                    gap: 4px;
+
+                    .text,
+                    .text_grey {
+                        color: #5D5D75;
+                        font-family: "Golos Text";
+                        font-size: 12px;
+                        font-style: normal;
+                        font-weight: 500;
+                        line-height: 16px;
+                    }
+                }
+
+                .date-box,
+                .time-box,
+                .view-box {
+                    display: flex;
+                    align-items: center;
+                    gap: 6px;
+
+                    img {
+                        width: 14px;
+                        height: 14px;
+                    }
+
+                    .icon-box {
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        border-radius: 4px;
+                        // border: 1px solid #EAECEA;
+                        background-color: #fff;
+                    }
+                }
+
+                .info-box {
+                    flex-direction: column;
+                    gap: 4px;
+                    width: 100%;
+                    align-items: flex-start;
+
+                    .text,
+                    .text_grey {
+                        white-space: nowrap;
+                        color: #5D5D75;
+                        font-family: "Golos Text";
+                        font-size: 11px;
+                        font-style: normal;
+                        font-weight: 500;
+                        line-height: 16px;
+
+                        span {
+                            color: #B4B8B4;
+                            font-family: NunitoSans;
+                            font-size: 14px;
+                            font-style: normal;
+                            font-weight: 300;
+                            line-height: 16px;
+                        }
+
+                        .info-box {
+                            display: flex;
+                            flex-direction: column;
+                            align-items: start;
+                            gap: 4px;
+
+                            .time-box,
+                            .view-box {
+                                display: flex;
+                                align-items: center;
+                                gap: 5px;
+
+                                .icon-box {
+                                    display: flex;
+                                    align-items: center;
+                                    justify-content: center;
+                                    border-radius: 4px;
+                                    border: 1px solid #EAECEA;
+                                    width: 24px;
+                                    height: 24px;
+                                }
+                            }
+                        }
+                    }
+                }
+
+                .bottom-info {
+                    .text_grey {
+                        color: #2B2B46;
+                        font-family: "Golos Text";
+                        font-size: 12px;
+                        font-style: normal;
+                        font-weight: 500;
+                        line-height: 16px;
+                        white-space: wrap;
+                        display: -webkit-box;
+                        -webkit-line-clamp: 2; // количество строк
+                        -webkit-box-orient: vertical;
+                        overflow: hidden;
+                        hyphens: auto;
+                        min-height: 32px;
+                    }
+                }
+            }
+        }
+    }
+}
+
+// @media (max-width: 430px) {
+//     .tile-short {
+//         .article-min {
+//             .img-content {
+//                 aspect-ratio: auto;
+//             }
+
+//             .tag-box {
+//                 .tag {}
+//             }
+
+//             .content-box {
+//                 .title {
+//                     font-size: 18px;
+//                 }
+
+//                 .description-content {
+//                     margin-top: 2px;
+
+//                     .text_description {}
+
+//                     .btn-box {}
+//                 }
+
+//                 .text_grey {}
+
+//                 .top-box {}
+//             }
+
+//             .bottom-box {}
+//         }
+
+//         .text-and-info-box {
+//             display: flex;
+//             flex-direction: column;
+//             gap: 17px;
+//             width: 100%;
+
+//             .top-info,
+//             .bottom-info {
+//                 display: flex;
+//                 justify-content: space-between;
+//                 align-items: center;
+//                 width: 100%;
+
+//                 .text,
+//                 .text_grey {
+//                     white-space: nowrap;
+//                     color: #2B2B46;
+//                     font-family: "Golos Text";
+//                     font-size: 14px;
+//                     font-style: normal;
+//                     font-weight: 500;
+//                     line-height: 18px;
+//                 }
+//             }
+
+//             .top-info {
+
+//                 .text,
+//                 .text_grey {
+//                     color: #5D5D75;
+//                     font-family: "Golos Text";
+//                     font-size: 12px;
+//                     font-style: normal;
+//                     font-weight: 500;
+//                     line-height: 16px;
+//                 }
+//             }
+
+//             .date-box,
+//             .time-box,
+//             .view-box {
+//                 display: flex;
+//                 align-items: center;
+//                 gap: 6px;
+
+//                 .icon-box {
+//                     display: flex;
+//                     align-items: center;
+//                     justify-content: center;
+//                     border-radius: 4px;
+//                     // border: 1px solid #EAECEA;
+//                     background-color: #fff;
+//                 }
+//             }
+
+//             .info-box {
+//                 display: flex;
+//                 align-items: end;
+//                 gap: 14px;
+
+
+
+//                 .text,
+//                 .text_grey {
+//                     white-space: nowrap;
+//                     color: #0B110B;
+//                     text-align: right;
+//                     font-family: NunitoSans;
+//                     font-size: 14px;
+//                     font-style: normal;
+//                     font-weight: 700;
+//                     line-height: 16px;
+
+//                     span {
+//                         color: #B4B8B4;
+//                         font-family: NunitoSans;
+//                         font-size: 14px;
+//                         font-style: normal;
+//                         font-weight: 300;
+//                         line-height: 16px;
+//                     }
+
+//                     .info-box {
+//                         display: flex;
+//                         flex-direction: column;
+//                         align-items: end;
+//                         gap: 4px;
+
+//                         .time-box,
+//                         .view-box {
+//                             display: flex;
+//                             align-items: center;
+//                             gap: 5px;
+
+//                             .icon-box {
+//                                 display: flex;
+//                                 align-items: center;
+//                                 justify-content: center;
+//                                 border-radius: 4px;
+//                                 border: 1px solid #EAECEA;
+//                                 width: 24px;
+//                                 height: 24px;
+//                             }
+
+
+//                         }
+
+//                     }
+
+
+//                 }
+//             }
+//         }
+
+//     }
+// }