// // Base styles // .card { position: relative; display: flex; flex-direction: column; min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106 height: $card-height; word-wrap: break-word; background-color: $card-bg; background-clip: border-box; border: $card-border-width solid $card-border-color; @include border-radius($card-border-radius); >hr { margin-right: 0; margin-left: 0; } >.list-group { border-top: inherit; border-bottom: inherit; &:first-child { border-top-width: 0; @include border-top-radius($card-inner-border-radius); } &:last-child { border-bottom-width: 0; @include border-bottom-radius($card-inner-border-radius); } } // Due to specificity of the above selector (`.card > .list-group`), we must // use a child selector here to prevent double borders. >.card-header+.list-group, >.list-group+.card-footer { border-top: 0; } } .card-body { // Enable `flex-grow: 1` for decks and groups so that card blocks take up // as much space as possible, ensuring footers are aligned to the bottom. flex: 1 1 auto; // Workaround for the image size bug in IE // See: https://github.com/twbs/bootstrap/pull/28855 min-height: 1px; padding: $card-spacer-x; color: $card-color; } .card-title { margin-bottom: $card-spacer-y; } .card-subtitle { margin-top: -$card-spacer-y / 2; margin-bottom: 0; } .card-text:last-child { margin-bottom: 0; } .card-link { @include hover() { text-decoration: none; } +.card-link { margin-left: $card-spacer-x; } } // // Optional textual caps // .card-header { padding: $card-spacer-y $card-spacer-x; margin-bottom: 0; // Removes the default margin-bottom of color: $card-cap-color; background-color: $card-cap-bg; border-bottom: $card-border-width solid $card-border-color; &:first-child { @include border-radius($card-inner-border-radius $card-inner-border-radius 0 0); } } .card-footer { padding: $card-spacer-y $card-spacer-x; color: $card-cap-color; background-color: $card-cap-bg; border-top: $card-border-width solid $card-border-color; &:last-child { @include border-radius(0 0 $card-inner-border-radius $card-inner-border-radius ); } } // // Header navs // .card-header-tabs { margin-right: -$card-spacer-x / 2; margin-bottom: -$card-spacer-y; margin-left: -$card-spacer-x / 2; border-bottom: 0; } .card-header-pills { margin-right: -$card-spacer-x / 2; margin-left: -$card-spacer-x / 2; } // Card image .card-img-overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: $card-img-overlay-padding; @include border-radius($card-inner-border-radius); } .card-img, .card-img-top, .card-img-bottom { flex-shrink: 0; // For IE: https://github.com/twbs/bootstrap/issues/29396 width: 300px; height: 150px; position: relative; margin-left: auto; margin-right: auto; // width: 345.73px; // height: 185px; // Required because we use flexbox and this inherently applies align-self: stretch } .card-img, .card-img-top { @include border-top-radius($card-inner-border-radius); } .card-img, .card-img-bottom { @include border-bottom-radius($card-inner-border-radius); } // Card deck .card-deck { .card { margin-bottom: $card-deck-margin; } @include media-breakpoint-up(sm) { display: flex; flex-flow: row wrap; margin-right: -$card-deck-margin; margin-left: -$card-deck-margin; .card { // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4 flex: 1 0 0%; margin-right: $card-deck-margin; margin-bottom: 0; // Override the default margin-left: $card-deck-margin; } } } // // Card groups // .card-group { // The child selector allows nested `.card` within `.card-group` // to display properly. >.card { margin-bottom: $card-group-margin; } @include media-breakpoint-up(sm) { display: flex; flex-flow: row wrap; // The child selector allows nested `.card` within `.card-group` // to display properly. >.card { // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4 flex: 1 0 0%; margin-bottom: 0; +.card { margin-left: 0; border-left: 0; } // Handle rounded corners @if $enable-rounded { &:not(:last-child) { @include border-right-radius(0); .card-img-top, .card-header { // stylelint-disable-next-line property-disallowed-list border-top-right-radius: 0; } .card-img-bottom, .card-footer { // stylelint-disable-next-line property-disallowed-list border-bottom-right-radius: 0; } } &:not(:first-child) { @include border-left-radius(0); .card-img-top, .card-header { // stylelint-disable-next-line property-disallowed-list border-top-left-radius: 0; } .card-img-bottom, .card-footer { // stylelint-disable-next-line property-disallowed-list border-bottom-left-radius: 0; } } } } } } // // Columns // .card-columns { .card { margin-bottom: $card-columns-margin; } @include media-breakpoint-up(sm) { column-count: $card-columns-count; column-gap: $card-columns-gap; orphans: 1; widows: 1; .card { display: inline-block; // Don't let them vertically span multiple columns width: 100%; // Don't let their width change } } } // // Accordion // .accordion { overflow-anchor: none; >.card { overflow: hidden; &:not(:last-of-type) { border-bottom: 0; @include border-bottom-radius(0); } &:not(:first-of-type) { @include border-top-radius(0); } >.card-header { @include border-radius(0); margin-bottom: -$card-border-width; } } } .header-1 { background: #3e3a8e; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); border-radius: 5px; // width: 830px; margin-bottom: 30px; } .card-title-1 { margin-left: 10px; padding: 10px; font-size: 25px; text-align: left; color: rgba(255, 255, 255, 0.9); } .border-radius-login { border-radius: 5px; } .header-penjadwalan { background: #3e3a8e; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); border-radius: 5px; // width: 830px; height: 45px; margin: 20px; } .warna-penjadwalan-block { height: 35px; width: 60px; margin-left: auto; } .home-1 { margin-left: 20px; margin-right: 10px; margin-top: 20px; } .home-1-1 { margin-left: 20px; margin-right: 10px; margin-top: -40px; } .home-2 { margin-top: 10%; } @media screen and (max-width: 450px) { .txt-size { font-weight: 400; color: black; } .home-1 { margin: 0; } } .card-over { overflow: auto; } .f-size { margin-left: 10px; } .w-40 { width: 100px; } .margin-botton-20 { margin-bottom: 20px; } .text-tahun { font-size: 20px; text-align: center; } .font-color-white { color: #ffffff; } .font-color-black { color: black; } .border-2 { border-width: 0.5px; border-color: rgb(124, 122, 122); } .cd-home-1 { display: inline; position: relative; // background-color: red; // min-width: 300px; float: left; } .cd-home-2 { display: inline; // background-color: rgb(50, 0, 230); // min-width: 300px; float: right; } .dropzone-style-1 { // background-color: #9e9e9e; // width: 50px; padding-top: 10px; border: 1px solid #dde6e9; min-height: 70px; border-radius: 5px; cursor: pointer; } .center-ver-hor { display: flex; align-items: center; justify-content: center; height: 100%; } .invalid-mv:focus:invalid { border: solid 1px red; // background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-exclamation-triangle' viewBox='0 0 16 16'%3E%3Cpath d='M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.146.146 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.163.163 0 0 1-.054.06.116.116 0 0 1-.066.017H1.146a.115.115 0 0 1-.066-.017.163.163 0 0 1-.054-.06.176.176 0 0 1 .002-.183L7.884 2.073a.147.147 0 0 1 .054-.057zm1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z'/%3E%3Cpath d='M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995z'/%3E%3C/svg%3E") no-repeat 95% 50% ; } .invalid-mv:focus:valid { border: solid 1px green; } .getover { overflow: auto; font-size: 0.8rem; }