Server IP : 150.95.80.236 / Your IP : 3.133.119.157 Web Server : Apache System : Linux host-150-95-80-236 3.10.0-1160.105.1.el7.x86_64 #1 SMP Thu Dec 7 15:39:45 UTC 2023 x86_64 User : social-telecare ( 10000) PHP Version : 7.4.33 Disable Function : opcache_get_status MySQL : OFF | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : /var/www/vhosts/pcu.in.th/uat.pcu.in.th/demo15/src/sass/components/ |
Upload File : |
// // Ribbon // // Base .ribbon { position: relative; // Ribbon target .ribbon-label { display: flex; justify-content: center; align-items: center; padding: 5px 10px; position: absolute; z-index: 1; background-color: $primary; box-shadow: 0px -1px 5px 0px rgba(#000, 0.1); color: theme-inverse-color("primary"); top: 50%; right: 0; transform: translateX(5px) translateY(-50%); > .ribbon-inner { z-index: -1; position: absolute; padding: 0; width: 100%; height: 100%; top: 0; left: 0; } &:after { border-color: darken($primary, 30%); } } // Vertical aligment &-vertical { .ribbon-label { padding: 5px 10px; min-width: 36px; min-height: 46px; text-align: center; } } &.ribbon-top { .ribbon-label { top: 0; transform: translateX(-15px) translateY(-4px); border-bottom-right-radius: $border-radius; border-bottom-left-radius: $border-radius; } } &.ribbon-bottom { .ribbon-label { border-top-right-radius: $border-radius; border-top-left-radius: $border-radius; } } &.ribbon-start { .ribbon-label { top: 50%; left: 0; right: auto; transform: translateX(-5px) translateY(-50%); border-top-right-radius: $border-radius; border-bottom-right-radius: $border-radius; } } &.ribbon-end { .ribbon-label { border-top-left-radius: $border-radius; border-bottom-left-radius: $border-radius; } } } // Clip style .ribbon.ribbon-clip { &.ribbon-start { .ribbon-label { left: -5px; .ribbon-inner { border-top-right-radius: $border-radius; border-bottom-right-radius: $border-radius; &:before, &:after { content: ""; position: absolute; border-style: solid; border-color: transparent !important; bottom: -10px; } &:before { border-width: 0 10px 10px 0; border-right-color: if(isDarkMode(), $light, $dark) !important; left: 0; } } } } &.ribbon-end { .ribbon-label { right: -5px; .ribbon-inner { border-top-left-radius: $border-radius; border-bottom-left-radius: $border-radius; &:before, &:after { content: ""; position: absolute; border-style: solid; border-color: transparent !important; bottom: -10px; } &:before { border-width: 0 0 10px 10px; border-left-color: if(isDarkMode(), $light, $dark) !important; right: 0; } } } } } // Triangle style .ribbon.ribbon-triangle { position: absolute; z-index: 1; display: flex; align-items: flex-start; justify-content: flex-start; // Top start position &.ribbon-top-start { top: 0; left: 0; width: 4rem; height: 4rem; border-bottom: solid 2rem transparent !important; border-left: solid 2rem red; border-right: solid 2rem transparent !important; border-top: solid 2rem red; } // Top end position &.ribbon-top-end { top: 0; right: 0; width: 4rem; height: 4rem; border-bottom: solid 2rem transparent !important; border-left: solid 2rem transparent !important; border-right: solid 2rem red; border-top: solid 2rem red; } // Botton start position &.ribbon-bottom-start { bottom: 0; left: 0; width: 4rem; height: 4rem; border-bottom: solid 2rem red; border-left: solid 2rem red; border-right: solid 2rem transparent !important; border-top: solid 2rem transparent !important; } // Botton end position &.ribbon-bottom-end { bottom: 0; right: 0; width: 4rem; height: 4rem; border-bottom: solid 2rem red; border-right: solid 2rem red; border-left: solid 2rem transparent !important; border-top: solid 2rem transparent !important; } }