FM / components

/home/techb158/dev.balacoffee.com/resources/src/assets/styles/sass/globals/components/

/home/techb158/dev.balacoffee.com/resources/src/assets/styles/sass/globals/components

Name	Size	Mode	Actions
_accordions.scss	229	0644	edit dl rm
_alerts.scss	1324	0644	edit dl rm
_avatar.scss	281	0644	edit dl rm
_badges.scss	4048	0644	edit dl rm
_borders.scss	254	0644	edit dl rm
_breadcrumb.scss	1492	0644	edit dl rm
_button.scss	5567	0644	edit dl rm
_calendar.scss	1336	0644	edit dl rm
_card.scss	4232	0644	edit dl rm
_carousel.scss	110	0644	edit dl rm
_components.scss	769	0644	edit dl rm
_customizer.scss	6699	0644	edit dl rm
_datatables.scss	172	0644	edit dl rm
_daterangepicker.scss	0	0644	edit dl rm
_dropdown.scss	2160	0644	edit dl rm
_echart.scss	294	0644	edit dl rm
_echarts.scss	53	0644	edit dl rm
_editor.scss	0	0644	edit dl rm
_feather-icon.scss	173	0644	edit dl rm
_form.scss	4998	0644	edit dl rm
_icon.scss	245	0644	edit dl rm
_lists.scss	0	0644	edit dl rm
_loader.scss	7258	0644	edit dl rm
_modals.scss	137	0644	edit dl rm
_nouislider.scss	3677	0644	edit dl rm
_pagination.scss	0	0644	edit dl rm
_popover.scss	328	0644	edit dl rm
_progress.scss	0	0644	edit dl rm
_search.scss	836	0644	edit dl rm
_select.scss	184	0644	edit dl rm
_sidebar.directive.scss	951	0644	edit dl rm
_tab.scss	684	0644	edit dl rm
_tabs.scss	517	0644	edit dl rm
_tag-input.scss	318	0644	edit dl rm
_tagging.scss	1015	0644	edit dl rm
_toastr.scss	241	0644	edit dl rm
_upload.scss	146	0644	edit dl rm
_vue-good-table.scss	3297	0644	edit dl rm
_vue2-clock-picker.scss	4703	0644	edit dl rm

Edit: /home/techb158/dev.balacoffee.com/resources/src/assets/styles/sass/globals/components/_badges.scss (4048B)

.badge {
    font-weight: 600;
}
@each $name, $value in $theme-colors {
    .badge-outline-#{$name} {
        background: unset;
        border: 1px solid $value;
        color: $value;
    }
}
.badge-top-container {
    position: relative;
    .badge {
        position: absolute;
        top: 2px;
        right: 4px;
        border-radius: 10px;
    }
}

// begin::badge-pill
@each $name, $value in $theme-colors {
    .ul-badge-pill-#{$name} {
        background: $value;
        border-radius: 50%;
        width: 25px;
        height: 18px;
        color: #fff;
        line-height: 20px;
        font-size: 0.8rem;
    }
}
// end-of-badge-pill

@each $name, $value in $theme-colors {
    .badge-round-#{$name} {
        background: $value;
        border-radius: 50%;
        width: 25px;
        height: 25px;
        color: #fff;
        line-height: 20px;
        justify-content: center;

&.lg{
            // large badge
            width:40px;
            height: 40px;
            line-height: 30px;
            font-size: 1.2rem;
    
        }
        &.xl{
            width:50px;
            height: 50px;
            line-height: 40px;
            font-size: 1.3rem;
            font-weight: bold;
        }
        &.sm{
            width: 18px;
            height:18px;
            line-height: 13px;
            justify-content: center;
            
        }
        &.pill{
            width: 45px;
            height:18px;
            line-height: 13px;
            border-radius:10px;
        }
    }
   
}

@each $name, $value in $theme-colors {
    .badge-dot-#{$name} {
        height: 4px;
        width: 4px;
        background-color: $value;
        border-radius: 50%;
        display: inline-block;
        vertical-align: middle;
    }
}

// begin::outline
@each $name, $value in $theme-colors {
    .outline-round-#{$name} {
        background: #fff;
        border-radius: 50%;
        width: 18px;
        height: 18px;
        border: 1px solid $value;
        color: $value;
        line-height: 13px;
        justify-content: center;
    }
}
// end of outline 
//ul badge square------------------------------//
@each $name, $value in $theme-colors {
    .badge-square-#{$name} {
        background: $value;
        border-radius: 20%;
        width: 25px;
        height: 25px;
        color: #fff;
        line-height: 20px;
        text-align: center;

//     &.lg {
//         // large badge
//         width:40px;
//         height: 40px;

//     }
//     .md{
//         // medium badge
//         width:25px;
//         height: 25px;
//     }
   
// }
// large

//opacity round
.badge-round {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    line-height: 30px;
    font-size: 1.2rem;

}
@each $name, $value in $theme-colors {
    .badge-round.badge-round-opacity-#{$name} {
        background: lighten($value, 40%);
        color:$value;
        
    }
}
// end-opacity-round

// begin square opacity

.badge-square{
    border-radius: 20%;
    width: 40px;
    height: 40px;
    line-height: 30px;
    font-size: 1.2rem;
}
@each $name, $value in $theme-colors {
    .badge-square.badge-square-opacity-#{$name} {
        background: lighten($value, 40%);
        color:$value;
        
    }
}
.w-badge{
    border-radius: 0;
    padding: 4px;
    color: #fff;
}
.r-badge{
    padding: 4px;
}

// end square opacity

cmd: