Current Path : C:/xampp/htdocs/moodle/theme/moove/scss/moove/ |
Current File : C:/xampp/htdocs/moodle/theme/moove/scss/moove/_breadcrumb.scss |
#page-navbar { .page-header-headings h1 { font-size: 1.34375rem; } .breadcrumb { padding: 0.5em 1em; background-color: $body-bg; border-radius: .25em; &:after { content: ""; display: table; clear: both; } li { display: inline-block; float: left; margin: 0.5em 0; &:after { /* this is the separator between items */ display: inline-block; content: '\00bb'; margin: 0 .6em; color: #959fa5; } &:before { content: ''; padding: 0; } .no-link { background-color: #f7f7f7; border-color: #f7f7f7; } } } .breadcrumb li:last-of-type::after { /* hide separator after the last item */ display: none; } .breadcrumb li > * { /* single step */ display: inline-block; color: #2c3f4c; } .breadcrumb li.current > * { /* selected step */ color: #96c03d; } .no-touch .breadcrumb a:hover { /* steps already visited */ color: #96c03d; } .breadcrumb { padding: 0; background-color: transparent; } .breadcrumb li { position: relative; padding: 0; margin: 4px 4px 4px 0; } .breadcrumb li::after { margin: 0 1em; } .breadcrumb li > * { position: relative; padding: .4em .8em .4em 1.5em; color: #2c3f4c; background-color: $body-bg; /* the border color is used to style its ::after pseudo-element */ border-color: $body-bg; } .breadcrumb li:last-of-type { margin-right: 0; } .breadcrumb li.current > * { /* selected step */ color: #fff; background-color: #96c03d; border-color: #96c03d; } .breadcrumb li:first-of-type > * { padding-left: 1.6em; border-radius: .25em 0 0 .25em; } .breadcrumb li:last-of-type > * { padding-right: 1.6em; border-radius: 0 .25em .25em 0; } .no-touch .breadcrumb a:hover { /* steps already visited */ color: #fff; background-color: #2c3f4c; border-color: #2c3f4c; } .breadcrumb li::after, .breadcrumb li > *::after { content: ''; position: absolute; top: 0; left: 100%; height: 0; width: 0; border: 17px solid transparent; border-right-width: 0; border-left-width: 10px; } .breadcrumb li::after { /* this is the white separator between two items */ z-index: 1; -webkit-transform: translateX(4px); -moz-transform: translateX(4px); -ms-transform: translateX(4px); -o-transform: translateX(4px); transform: translateX(4px); border-left-color: #fff; margin: 0; } .breadcrumb li > *::after { /* this is the colored triangle after each element */ z-index: 2; border-left-color: inherit; } .breadcrumb li:last-of-type::after, .breadcrumb li:last-of-type > *::after { /* hide the triangle after the last step */ display: none; } @-moz-document url-prefix() { .breadcrumb li::after, .breadcrumb li > *::after { /* fix a bug on Firefix - tooth edge on css triangle */ border-left-style: dashed; } } } .dir-rtl #page-navbar .breadcrumb li::after { -webkit-transform: translateX(-4px); -moz-transform: translateX(-4px); -ms-transform: translateX(-4px); -o-transform: translateX(-4px); transform: translateX(-4px); border-right-color: #fff; } .dir-rtl #page-navbar .breadcrumb li::after, .dir-rtl #page-navbar .breadcrumb li>*::after { left: 95%; border-right-width: 12px; border-left-width: 0px; }