MIUN - Design Library

Example 

<div class="container">
    <div class="row breadcrumbs">
        <div class="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
            <div class="breadcrumbs-container row">
                <div class="col-12 col-lg-8 breadcrumb-col">
                    <nav aria-label="Breadcrumbs" class="mr-auto">
                        <ol class="breadcrumb ">
                            <li class="breadcrumb-item"><a href="/">Hem</a></li>
                            <li class="breadcrumb-item"><a href="/utbildning">Utbildning</a></li>
                            <li class="breadcrumb-item"><a href="/utbildning">Utbildning</a></li>
                            <li class="breadcrumb-item active" aria-current="page">En sjukt lång text som egentligen inte borde vara här. Men så blir det när man behöver testa vissa saker. :)</li>
                        </ol>
                    </nav>
                </div>
                <div class="col-12 col-lg-4 breadcrumb-col enablevue">
                    <nav class="breadcrumbs-actions float-md-left float-lg-right" aria-label="Page functions" id="breadcrumbs">
                        <ul class="page-functions-list list-unstyled">
                            <li v-if="isSetAsFavourite" id='remove-bookmark-container' class="page-functions-list-item">
                                <a href="javascript:void(0)" id="bookmarkremove" class="small-font" v-on:click="removeFavourite()">
                                    <i class="material-icons blue">favorite</i>
                                    <span>Ta bort favorit</span>
                                </a>
                            </li>
                            <li v-else id="save-bookmark-container" class="page-functions-list-item">
                                <a href="javascript:void(0)" id="bookmarksave" class="small-font" v-on:click="addFavourite()">
                                    <i class="material-icons">favorite_border</i>
                                    <span>Spara</span>
                                </a>
                            </li>
                            <li class="page-functions-list-item">
                                <div id="readspeaker_button1" class="rs_skip rsbtn rs_preserve">
                                    <a rel="nofollow" class="rsbtn_play" accesskey="L" title="webReader" href="//app-eu.readspeaker.com/cgi-bin/rsent?customerid=5305&amp;lang=sv_se&amp;readid=maincontent;url=">
                                        <span class="rsbtn_left rsimg rspart"><span
                                                class="rsbtn_text"><span>Lyssna</span></span></span>
                                        <span class="rsbtn_right rsimg rsplay rspart"></span>
                                    </a>
                                </div>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="container">
    <div class="row breadcrumbs">
        <div class="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
            <div class="breadcrumbs-container row">
                <div class="col-12 col-lg-8 breadcrumb-col">
                    <nav aria-label="Breadcrumbs" class="mr-auto">
                        <ol class="breadcrumb {{#if noActive}}no-active{{/if}}">
                            {{#each breadcrumbItems}}
                            {{#if this.url}}
                            <li class="breadcrumb-item"><a href="{{this.url}}">{{this.title}}</a></li>
                            {{else}}
                            <li class="breadcrumb-item active" aria-current="page">{{this.title}}</li>
                            {{/if}}
                            {{/each}}
                        </ol>
                    </nav>
                </div>
                <div class="col-12 col-lg-4 breadcrumb-col enablevue">
                    <nav class="breadcrumbs-actions float-md-left float-lg-right" aria-label="Page functions"
                        id="breadcrumbs">
                        <ul class="page-functions-list list-unstyled">
                            <li v-if="isSetAsFavourite" id='remove-bookmark-container' class="page-functions-list-item">
                                <a href="javascript:void(0)" id="bookmarkremove" class="small-font" v-on:click="removeFavourite()">
                                    <i class="material-icons blue">favorite</i>
                                    <span>{{ removeBookmarkText }}</span>
                                </a>
                            </li>
                            <li v-else id="save-bookmark-container" class="page-functions-list-item">
                                <a href="javascript:void(0)" id="bookmarksave" class="small-font" v-on:click="addFavourite()">
                                    <i class="material-icons">favorite_border</i>
                                    <span>{{ saveBookmarkText }}</span>
                                </a>
                            </li>
                            <li class="page-functions-list-item">
                                <div id="readspeaker_button1" class="rs_skip rsbtn rs_preserve">
                                    <a rel="nofollow" class="rsbtn_play" accesskey="L" title="webReader"
                                        href="//app-eu.readspeaker.com/cgi-bin/rsent?customerid=5305&amp;lang=sv_se&amp;readid=maincontent;url={{pageUrl}}">
                                        <span class="rsbtn_left rsimg rspart"><span
                                                class="rsbtn_text"><span>{{readSpeaker}}</span></span></span>
                                        <span class="rsbtn_right rsimg rsplay rspart"></span>
                                    </a>
                                </div>
                            </li>
                            {{#if edit.canEdit}}
                                <li id="edit-container" class="page-functions-list-item">
                                    <a href="{{edit.editUrl}}" class="small-font">
                                        <i class="material-icons">edit</i>
                                        <span>{{ edit.text }}</span>
                                    </a>
                                </li>
                            {{/if}}
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</div>
 
{
  "isBookmark": false,
  "saveBookmarkText": "Spara",
  "removeBookmarkText": "Ta bort favorit",
  "readSpeaker": "Lyssna",
  "breadcrumbItems": [
    {
      "title": "Hem",
      "url": "/"
    },
    {
      "title": "Utbildning",
      "url": "/utbildning"
    },
    {
      "title": "Utbildning",
      "url": "/utbildning"
    },
    {
      "title": "En sjukt lång text som egentligen inte borde vara här. Men så blir det när man behöver testa vissa saker. :)",
      "url": null
    }
  ]
}
  • Content: 
    .rsbtn_floatskin {
	position: relative;
	height: 26px;
	margin-bottom: 10px;
	z-index: 100;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}

.rsfloating {
	display: none;
}

.rsbtn_floatskin.rsfloating {
	display: block;
}

.rsbtn_floatskin span, .rsbtn_floatskin a {
	position: relative;
	display: block;
	margin: 0;
	padding: 0;
	text-decoration: none;
}
.rsbtn_floatskin span, .rsbtn_floatskin a:focus {
	border: none;
}

.rsbtn_floatskin .rsbtn_play {
	text-decoration: none;
	/*font-family: "Lucida Grande", "Lucida Sans", "Lucida", sans-serif;
	font-size: 12px;
	font-weight: normal;
	font-style: normal;
	line-height: 16px;
	color: #333;*/
	position: static;
	display: inline;
	margin: auto;
	/*padding: inherit;*/
	float: left;
}

.rsbtn_floatskin .rsimg, #rslightbox_logo.rsimg, .rsbtn_floatskin a.rsimg {
	background: transparent url(img/rs_button.png) no-repeat scroll 0 0;	
}

.rsbtn_floatskin .rspart {
	position: relative;	
	float: left;
	height: 26px;
}

/**
 * Listen button
 */
.rsbtn_floatskin .rsbtn_left .rsbtn_text {
	/*font-family: "Lucida Grande", "Lucida Sans", "Lucida", sans-serif;
	font-size: 12px;
	font-weight: normal;
	font-style: normal;
	line-height: 16px;*/
	/*margin: 5px 10px;
	padding-left: 20px;*/
	background: transparent url(//media.readspeaker.com/images/buttons/listen_icons/icon_16px.gif) no-repeat scroll 0 0;
}

.rsdeferred .rsbtn_left .rsbtn_text span {
	padding-right: 20px;
	background: transparent url(img/rs_loader_anim.gif) no-repeat scroll top right;
}

/**
 * Play part of listen button
 */
.rsbtn_floatskin .rsbtn_right.rsimg, .rsbtn_floatskin .rsbtn_pause {
	width: 42px;
	background-position: 0 -26px;
}

.rsbtn_floatskin a:hover .rsbtn_right, .rsbtn_floatskin.rsfocus .rsbtn_right.rsimg {
	background-position: -42px -26px;
}

.rsbtn_floatskin .rsbtn_right.rsimg.rsanim {
	background: transparent url(img/play-anim.gif) no-repeat scroll 0 0;
}

.rsbtn_floatskin .rsbtn_pause .rsbtn_btnlabel,
.rsbtn_floatskin .rsbtn_stop .rsbtn_btnlabel,
.rsbtn_floatskin .rsbtn_volume .rsbtn_btnlabel,
.rsbtn_floatskin .rsbtn_settings .rsbtn_btnlabel,
.rsbtn_floatskin .rsbtn_dl .rsbtn_btnlabel,
.rsbtn_floatskin .rsbtn_closer .rsbtn_btnlabel,
.rsbtn_floatskin .rsbtn_powered .rsbtn_btnlabel {
	display: none;
}


/**
 * Pause button
 * #compactskin
 */
.rsbtn_floatskin.rsplaying .rsbtn_pause {
	display: none;
	background-position: 0 -412px;
}

/* Floating player */
.rsbtn_floatskin.rsfloating .rsbtn_pause {
	background-position: 0 -412px;
}

.rsbtn_floatskin.rsexpanded .rsbtn_pause,
.rsbtn_floatskin.rsexpanded.rsplaying .rsbtn_pause {
	display: block;
}
/* #compactskin */
.rsbtn_floatskin.rsexpanded.rs-no-touch .rsbtn_pause.rsimg:hover, 
.rsbtn_floatskin.rsexpanded.rs-no-touch .rsbtn_pause.rsimg.rsfocus {
	background-position: -42px -412px;
}

/* Floating player */

.rsbtn_floatskin.rsexpanded.rsfloating.rs-no-touch .rsbtn_pause.rsimg:hover, 
.rsbtn_floatskin.rsexpanded.rsfloating.rs-no-touch .rsbtn_pause.rsimg.rsfocus {
	background-position: -42px -412px;
}

/* #compactskin */
.rsbtn_floatskin.rsexpanded.rsstopped .rsbtn_pause,
.rsbtn_floatskin.rsexpanded.rspaused .rsbtn_pause {
	background-position: 0 -386px;
}

/* #compactskin */
.rsbtn_floatskin.rsexpanded.rsstopped.rs-no-touch .rsbtn_pause:hover,
.rsbtn_floatskin.rsexpanded.rspaused.rs-no-touch .rsbtn_pause:hover,
.rsbtn_floatskin.rsexpanded.rsstopped.rs-no-touch .rsbtn_pause.rsfocus,
.rsbtn_floatskin.rsexpanded.rspaused.rs-no-touch .rsbtn_pause.rsfocus {
	background-position: -42px -386px;
}

/* Floating player */
.rsbtn_floatskin.rsexpanded.rsfloating.rsstopped .rsbtn_pause,
.rsbtn_floatskin.rsexpanded.rsfloating.rspaused .rsbtn_pause {
	background-position: 0 -386px;
}

.rsbtn_floatskin.rsexpanded.rsfloating.rsstopped.rs-no-touch .rsbtn_pause:hover,
.rsbtn_floatskin.rsexpanded.rsfloating.rspaused.rs-no-touch .rsbtn_pause:hover,
.rsbtn_floatskin.rsexpanded.rsfloating.rspaused.rs-no-touch .rsbtn_pause.rsfocus {
	background-position: -42px -386px;
}



.rsbtn_floatskin .rsbtn_exp.rsimg {
	display: none;
	background: none;
}

.rsbtn_floatskin.rsexpanded .rsbtn_exp {
	display: block;
}

/**
 * Stop button
 */
.rsbtn_floatskin .rsbtn_stop.rsimg {
	/*left: -5px; #compactskin
	margin-right: -5px; */
	width: 42px;
	background-position: 0 -104px;	
}

.rsbtn_floatskin.rsexpanded.rs-no-touch .rsbtn_stop.rsimg:hover,
.rsbtn_floatskin.rsexpanded.rs-no-touch .rsbtn_stop.rsimg.rsfocus {
	background-position: -42px -104px;	
}

.rsbtn_floatskin .rsbtn_player.rsimg {
	position: relative;
	z-index: 120;
	background-position: 0 -130px;
	background-repeat: repeat-x;
}

.rsbtn_floatskin .rsbtn_player .rsplaypart {
	float: left;
}

.rsbtn_floatskin .rsbtn_progress_container.rsimg {
	position: relative;
	width: 50px;
	height: 10px;
	border: 1px solid #555;
	background-repeat: repeat-x;
	background-position: 0 -376px;
	margin: 8px 5px 0 3px;
}

.rsbtn_floatskin .rsbtn_progress_container .rsbtn_progress_loaded {
	position: relative;
	width: 1%;
	height: 100%;
	background-color: #ccc;
}

.rsbtn_floatskin .rsbtn_progress_container .rsbtn_progress_played.rsimg {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 1%;
	background-position: 0 -208px;
}

.rsbtn_floatskin .rsbtn_progress_container .rsbtn_progress_handle.rsimg {
	position: absolute;
	left: -11px;
	top: -7px;
	width: 20px;
	height: 24px;
	background-position: 0 -183px;
}

.rsbtn_floatskin.rs-no-touch .rsbtn_progress_container .rsbtn_progress_handle.rsimg:hover,
.rsbtn_floatskin.rs-no-touch .rsbtn_progress_container .rsbtn_progress_handle.rsimg.rsfocus {
	background-position: -20px -183px;
}

/* Stopped player */
.rsbtn_floatskin.rsstopped .rsbtn_progress_container .rsbtn_progress_handle.rsimg,
.rsbtn_floatskin.rsstopped.rs-no-touch .rsbtn_progress_container .rsbtn_progress_handle.rsimg:hover {
	opacity: 0.6;
	background-position: 0 -183px;
	cursor: default;
}

.rsbtn_floatskin .rsbtn_progress_container.rsloading {
	background: transparent url(img/timeline-anim.gif) repeat-x scroll 0 0;
}

.rsbtn_floatskin .rsbtn_volume.rsimg {
	position: relative;
	width: 20px;
	height: 20px;
	background-position: 0 -218px;
	margin-top: 3px;
	margin-right: 2px;
}

.rsbtn_floatskin.rs-no-touch .rsbtn_volume.rsimg:hover,
.rsbtn_floatskin.rs-no-touch .rsbtn_volume.rsimg.rsfocus {
	background-position: -20px -218px;
}

.rsbtn_floatskin .rsbtn_volume_container.rsimg {
	position: absolute;
	height: 70px;
	width: 26px;
	bottom: -65px;
	left: 0px;
	border: none;
	background-position: 0 -306px;
	display: none;
	z-index: 120;
}

.rsbtn_floatskin .rsbtn_volume_container.rsimg .rsbtn_volume_slider {
	border: none;
	position: absolute;
	top: 15px;
	left: 3px;
	width: 22px;
	height: 40px;
}

.rsbtn_floatskin .rsbtn_volume_slider .rsbtn_volume_handle.rsimg {
	position: absolute;
	top: -7px;
	left: 0;
	width: 20px;
	height: 14px;
	background-position: -41px -184px
}

.rsbtn_floatskin.rs-no-touch .rsbtn_volume_slider .rsbtn_volume_handle.rsimg:hover,
.rsbtn_floatskin.rs-no-touch .rsbtn_volume_slider .rsbtn_volume_handle.rsimg.rsfocus {
	background-position: -62px -184px;
}

.rsbtn_floatskin .rsbtn_settings.rsimg,
.rsbtn_floatskin .rsbtn_dl.rsimg {
	width: 20px;
	height: 20px;
	background-position: 0 -238px;
	margin-top: 3px;
}

.rsbtn_floatskin.rs-no-touch .rsbtn_settings.rsimg:hover,
.rsbtn_floatskin.rs-no-touch .rsbtn_settings.rsimg.rsfocus {
	background-position: -20px -238px;
}

.rsbtn_floatskin .rsbtn_dl.rsimg {
	background-position: 0 -258px;
}

.rsbtn_floatskin.rs-no-touch .rsbtn_dl.rsimg:hover,
.rsbtn_floatskin.rs-no-touch .rsbtn_dl.rsimg.rsfocus {
	background-position: -20px -258px;
}

.rsbtn_floatskin .rsbtn_closer.rsimg {
	width: 27px;
	background-position: 0 -156px;
}

.rsbtn_floatskin.rs-no-touch .rsbtn_closer.rsimg:hover,
.rsbtn_floatskin.rs-no-touch .rsbtn_closer.rsimg.rsfocus {
	background-position: -27px -156px;
}

.rsbtn_floatskin.rsfloating .rsbtn_closer.rsimg {
	width: 27px;
	background-position: -104px -156px;
}

.rsbtn_floatskin.rsfloating.rs-no-touch .rsbtn_closer.rsimg:hover,
.rsbtn_floatskin.rsfloating.rs-no-touch .rsbtn_closer.rsimg.rsfocus {
	background-position: -131px -156px;
}

.rsbtn_floatskin .rsbtn_powered {
	position: absolute;
	right: 7px;
	top: 27px;
	height: 10px;
	z-index: 110;
	color: #999;
	font-family: "Lucida Grande", "Lucida Sans", "Lucida", sans-serif;
	font-weight: normal;
	font-style: normal;
	line-height: 10px;
	font-size: 10px;
	background: none;
	cursor: pointer;
}

/* #compactskin */
.rsbtn_floatskin .rsbtn_powered a, .rsbtn_floatskin .rsbtn_powered span {
	font-family: "Lucida Grande", "Lucida Sans", "Lucida", sans-serif;
	font-weight: normal;
	font-style: normal;
	line-height: 10px;
	font-size: 9px;	
	display: inline;
}

.rsbtn_floatskin .rsbtn_powered .rsbtn_btnlabel {
	display: inline;
}

.rsbtn_floatskin .rsbtn_powered .rsbtn_btnlabel a span.rsbtn_label_read {
	color: #e60;
}

.rsbtn_floatskin .rsbtn_powered .rsbtn_btnlabel a span.rsbtn_label_speaker {
	color: #33a;
}

.rsbtn_floatskin .rsbtn_powered .rsbtn_btnlabel a span.rsbtn_label_icon.rsimg {
	position: relative;
	top: 1px;
	width: 11px;
	height: 9px;
	margin-left: 2px;
	padding-right: 11px;
	background-position: -137px -490px;
}

.rsbtn_floatskin.rs_whitelogo .rsbtn_powered,
.rsbtn_floatskin.rs_whitelogo .rsbtn_powered .rsbtn_btnlabel a span.rsbtn_label_read,
.rsbtn_floatskin.rs_whitelogo .rsbtn_powered .rsbtn_btnlabel a span.rsbtn_label_speaker {
	color: #fff;
}

.rsbtn_floatskin.rs_whitelogo .rsbtn_powered .rsbtn_btnlabel a span.rsbtn_label_icon.rsimg {
	background-position: -285px -490px;
}

.rsbtn_floatskin.rs_blacklogo .rsbtn_powered,
.rsbtn_floatskin.rs_blacklogo .rsbtn_powered .rsbtn_btnlabel a span.rsbtn_label_read,
.rsbtn_floatskin.rs_blacklogo .rsbtn_powered .rsbtn_btnlabel a span.rsbtn_label_speaker {
	color: #000;
}

.rsbtn_floatskin.rs_blacklogo .rsbtn_powered .rsbtn_btnlabel a span.rsbtn_label_icon.rsimg {
	background-position: -433px -490px;
}

/* FALLBACK UI */

.rsbtn_exp span.rsbtn_status_overlay {
	position: absolute;
	z-index: 140;
	top: 1px;
	left: 0px;
	width: 92%;
	height: 93%;
	background: #eee;
	opacity: 0.9;
	 /* IE 8 */
  	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";

  	/* IE 5-7 */
  	filter: alpha(opacity=90);
}

.rsbtn_exp .rsbtn_status_overlay span.rsbtn_status {
	position: relative;
	color: #000;
	text-align: center;
	font-size: 11px;
	font-family: Verdana;
	margin-top: 4px;
}

.rsbtn_exp .rsbtn_status_overlay a.rsbtn_nosound {
	text-decoration: none;
	cursor: pointer;	
}

.rsbtn_exp .rsbtn_status_overlay a.rsbtn_nosound:hover,
.rsbtn_exp .rsbtn_status_overlay a.rsbtn_nosound.rsfocus {
	text-decoration: underline;
}

/* LIGHTBOX */
#rslightbox_contentcontainer {
	text-align: left;
}

#rslightbox_closer {
	display: block;
	position: absolute;
	top: -21px;
	right: -21px;
	width: 42px;
	height: 42px;
	background: transparent url(img/rs_button.png) no-repeat scroll 0 -599px;
	z-index: 1002;
}

#rslightbox_closer:hover,
#rslightbox_closer.rsfocus {
	background-position: -42px -599px;
}

#rslightbox_closer .rsbtn_btnlabel {
	display: none;
}

#rslightbox_content {
	position: relative;
	margin: 0px 10px 10px;
	border: 1px solid #ccc;
	top: 30px;
}

#rslightbox_content iframe {
	width: 100%;
	height: 99%;
	border: 0;
}

#rslightbox_content fieldset {
	border: none;
	border-top: 1px solid #999;
	margin-top: 10px;
}

#rslightbox_logo.rsimg {
	position: absolute;
	top: 3px;
	left: 10px;
	width: 134px;
	height: 22px;
	background-position: 0 -499px;
}

#rslightbox_closer {
	font-family: 'Lucida Sans', 'Lucida Grande', Lucida, Sans-Serif;
	font-size: 12px;
	line-height: 1.3em;
}

#rslightbox_content, #rslightbox_buttons {
	font-family: 'Lucida Grande', 'Lucida Sans', Lucida, Sans-Serif;
	font-size: 12px;
	line-height: 1.3em;
	color: #000;
	background: #fff;
}

#rslightbox_contentcontainer #rslightbox_content form {
	width: auto;
	text-align: left;
}

#rslightbox_content .rsform-row {
	padding: 10px;
	margin-top: 10px;
	background: #eee;
	border: 1px dotted #fff;
}
#rslightbox_content .rsform-row.rsfocus {
	border: 1px dotted #000;
}

#rslightbox_content .rsform-row:first-child,
#rslightbox_content .rsform-row-nospace {
	margin-top: 0px;
}

#rslightbox_content label {
	margin-right: 20px;
	display: inline;
}

#rslightbox_content input[type=radio] {
	margin: 0 5px 0 0;
	width: auto;
	display: inline;
	-webkit-appearance: radio;
}


#rslightbox_content .rsform-row select {
	width: auto;
}

/* SETTINGS - Color picker */
#rslightbox_content ul.rsform-colorlist {
	list-style: none;
	padding: 0;
	margin: 0;
}

#rslightbox_content ul.rsform-colorlist li {
	float: left;
	margin-left: 5px;
	padding: 1px;
}

#rslightbox_content ul.rsform-colorlist li:first-child {
	margin-left: 0px;
}

#rslightbox_content ul.rsform-colorlist li a {
	position: relative;
	display: block;
	text-decoration: none;
	color: #000;
	padding: 5px;	
}

#rslightbox_content ul.rsform-colorlist li:hover {
	border: 1px solid #ccc;
	padding: 0;
}

#rslightbox_content .dimmed ul.rsform-colorlist li:hover {
	border-color: #fff;
}

#rslightbox_content .dimmed ul.rsform-colorlist li a {
	cursor: default;
}

#rslightbox_content ul.rsform-colorlist li.rsform-colorlist-active,
#rslightbox_content .dimmed ul.rsform-colorlist li.rsform-colorlist-active {
	border: 1px solid #33a;
	padding: 0;
}

#rslightbox_content ul.rsform-colorlist li a span.rsform-colorlist-box {
	display: block;
	position: relative;
	width: 16px;
	height: 16px;
	border: 1px solid #000;
}

#rslightbox_content ul.rsform-colorlist li a.rsform-colorlist-style-underline span.rsform-colorlist-box,
#rslightbox_content ul.rsform-colorlist li a.rsform-colorlist-style-none span.rsform-colorlist-box {
	display: none;
}

#rslightbox_content ul.rsform-colorlist li a span.rsform-colorlist-label {
	margin-left: 4px;
}

#rslightbox_content ul.rsform-colorlist li a.rsform-colorlist-style-underline span.rsform-colorlist-label,
#rslightbox_content ul.rsform-colorlist li a.rsform-colorlist-style-none span.rsform-colorlist-label {
	margin-left: 0;
	font-size: 12px;
	line-height: 1.3em;
}

#rslightbox_content ul.rsform-colorlist li a span.rsform-colorlist-label.rsform-colorlist-style-color {
	position: absolute;
	display: none;
}

#rslightbox_content div.rsform-colorlist-label,
#rslightbox_content .rsform-radio-label {
	margin-bottom: 5px;
}


/* SETTINGS - General */
#rslightbox_content #rsform_wrapper {
	margin: 10px;
}

/* SETTINGS - Help */
#rslightbox_content .rsform-info-toggle {
	background: transparent url(img/help.png) no-repeat scroll 0 0;
	padding-left: 16px;
	padding-bottom: 1px;
	margin-left: 10px;
	cursor: pointer;
	text-decoration: none;
}

#rslightbox_content .rsform-row.dimmed .rsform-info-toggle {
	cursor: default;
}

#rslightbox_content .rsform-info-container {
	display: none;
	padding: 5px;
	margin-top: 5px;
	background: #ffd;
	color: #333;
	border: 1px dotted #777;
}

/* SETTINGS - Slider */

#rslightbox_content .rsform-slider {
	position: relative;
	width: 80%;
	height: 5px;
	border: 1px solid #555;
	background-repeat: repeat-x;
	background-position: 0 -521px;
	margin: 10px 20px 20px;
}

#rslightbox_content .rsform-slider-handle {
	position: absolute;
	left: -11px;
	top: -10px;
	width: 22px;
	height: 26px;
	background-position: -54px -156px;
	border: none;
}

#rslightbox_content .rsform-slider-handle a {
	text-decoration: none;
}

#rslightbox_content .slider-label-start, #rslightbox_content .slider-label-end {
	position: absolute;
	top: 12px;
	left: -5%;
}

#rslightbox_content .slider-label-end {
	left: auto;
	right: -5%;
}

#rslightbox_buttons {
	margin: 0 10px;
	padding-top: 5px;
}

/**
 * Download dialog
 */
#rsdl_container {
	background: #fff;
}

#rsdl_container .rsdl_textwrapper {
	padding: 20px;
}

/* POP-UP BUTTON */
.rspopup {
	z-index: 1000;
}

/**
 * ReadSpeaker dialog button
 */
#rslightbox_buttons {
	background: #eee;
	position: absolute;
	bottom: 20px;
}

#rslightbox_buttons a.rsdialog-button {
	position: relative;
	padding: 5px;
	border: 1px solid #777;
	border-radius: 3px;
	color: #000;
	text-decoration: none;
	background: #ccc;
	background: -moz-linear-gradient(top,  #eeeeee 0%, #cccccc 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc));
	background: -webkit-linear-gradient(top,  #eeeeee 0%,#cccccc 100%);
	background: -o-linear-gradient(top,  #eeeeee 0%,#cccccc 100%);
	background: -ms-linear-gradient(top,  #eeeeee 0%,#cccccc 100%);
	background: linear-gradient(to bottom,  #eeeeee 0%,#cccccc 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 );
}

#rslightbox_buttons a.rsdialog-button:hover,
#rslightbox_buttons a.rsdialog-button:focus {
	background: #eee;
	background: -moz-linear-gradient(top,  #ffffff 0%, #dddddd 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#dddddd));
	background: -webkit-linear-gradient(top,  #ffffff 0%,#dddddd 100%);
	background: -o-linear-gradient(top,  #ffffff 0%,#dddddd 100%);
	background: -ms-linear-gradient(top,  #ffffff 0%,#dddddd 100%);
	background: linear-gradient(to bottom,  #ffffff 0%,#dddddd 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dddddd',GradientType=0 );
}

.rsbtn_floatskin.rspopup {
	position: absolute;
	background: transparent;
	height: 36px; /* We need to add height for the drop shadow */
	display: none;
}

.rsbtn_floatskin.rspopup .rspart {
	height: 36px;
}

.rsbtn_floatskin.rspopup .rsbtn_left {
	background-position: 0 -527px;
}

.rsbtn_floatskin.rspopup.rscompact .rsbtn_left {
	width: 34px;
}

.rsbtn_floatskin.rspopup.rscompact .rsbtn_left .rsbtn_text {
	width: 0;
	overflow: hidden;
	padding-left: 16px;
	margin-right: 0;
}

.rsbtn_floatskin.rspopup .rsbtn_left .rsbtn_text {
	margin-top: 10px;
	margin-left: 15px;
	padding-left: 20px;
}

.rsbtn_floatskin.rspopup .rsbtn_right {
	width: 47px;
	background-position: -99px -26px;
}

.rsbtn_floatskin.rspopup a:hover .rsbtn_right {
	background-position: -171px -26px; /* Changed the offset to fix #131 */
}

.rsbtn_floatskin.rspopup.rscompact .rsbtn_right,
.rsbtn_floatskin.rspopup.rscompact a:hover .rsbtn_right {
	width: 14px;
	background-position: -132px -26px;
}

.rsbtn_floatskin.rspopup.rsexpanded .rsbtn_pause {
	background-position: -99px -73px;
}

.rsbtn_floatskin.rspopup.rsexpanded.rs-no-touch .rsbtn_pause.rsimg:hover,
.rsbtn_floatskin.rspopup.rsexpanded.rs-no-touch .rsbtn_pause.rsimg.rsfocus {
	background-position: -171px -73px;
}

.rsbtn_floatskin.rspopup.rsexpanded.rsstopped .rsbtn_pause,
.rsbtn_floatskin.rspopup.rsexpanded.rspaused .rsbtn_pause {
	background-position: -397px -26px;
}

.rsbtn_floatskin.rspopup.rsexpanded.rsstopped.rs-no-touch .rsbtn_pause:hover,
.rsbtn_floatskin.rspopup.rsexpanded.rspaused.rs-no-touch .rsbtn_pause:hover,
.rsbtn_floatskin.rspopup.rsexpanded.rsstopped.rs-no-touch .rsbtn_pause.rsfocus,
.rsbtn_floatskin.rspopup.rsexpanded.rspaused.rs-no-touch .rsbtn_pause.rsfocus {
	background-position: -397px -73px;
}

.rsbtn_floatskin.rspopup .rsbtn_stop {
	background-position: -243px -73px;
}

.rsbtn_floatskin.rspopup.rs-no-touch .rsbtn_stop.rsimg:hover,
.rsbtn_floatskin.rspopup.rs-no-touch .rsbtn_stop.rsimg.rsfocus {
	background-position: -318px -73px;
}

.rsbtn_floatskin.rspopup .rsbtn_player {
	background-position: 0 -563px;
}

.rsbtn_floatskin.rspopup .rsbtn_progress_container {
	margin-top: 13px;
}

.rsbtn_floatskin.rspopup .rsbtn_volume,
.rsbtn_floatskin.rspopup .rsbtn_settings,
.rsbtn_floatskin.rspopup .rsbtn_dl {
	margin-top: 8px;
}

.rsbtn_floatskin.rspopup .rsbtn_volume_container {
	bottom: -55px;
}

.rsbtn_floatskin.rspopup .rsbtn_closer {
	background-position: -173px -156px;
	width: 32px;
}

.rsbtn_floatskin.rspopup .rsbtn_closer,
.rsbtn_floatskin.rsfloating .rsbtn_closer {
	background-position: -173px -156px;
	width: 32px;
}

.rsbtn_floatskin.rspopup .rsbtn_closer.rsimg:hover,
.rsbtn_floatskin.rspopup .rsbtn_closer.rsimg.rsfocus {
	background-position: -220px -156px;
}

.rsbtn_floatskin.rspopup .rsbtn_powered {
	display: none;
}

/* Dim and hide */
.dimmed {
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=50);
	opacity: 0.5;
}

.hidden {
	display: none;
}

/* #compactskin */
.rsbtn_floatskin.rspopup.rsexpanded .rsbtn_left {
	display: inline;
}

/* #compactskin */
.rsbtn_floatskin .rsbtn_pause {
	width: 37px;
}

.rsbtn_floatskin .rsbtn_exp.rspart {
	position: absolute;
	top: 40px;
	left: 0px;
	width: 230px;
}

/* Fix the popup */
.rsbtn_floatskin.rsexpanded.rspopup .rsbtn_right {
	display: none;
}

.rsbtn_floatskin.rsexpanded.rspopup .rsbtn_exp.rspart {
	position: relative;
	top: 0px;
	width: auto;
}

.rsbtn_floatskin.rsexpanded.rspopup .rsbtn_pause {
	width: 42px;
}

.rsbtn_floatskin.rsexpanded.rspopup .rsbtn_stop {
	margin-left: -5px;
}

/* Fix the small margin on the right that moves when expanding */
.rsbtn_floatskin.rsexpanded {
	width: auto !important;
}

/* About-page link */
.rsbtn_floatskin a.rsbtn_abouthelp {
	background: url(img/rs_button.png) no-repeat scroll -84px -386px transparent;
	height: 26px;
	width: 30px;
	float: left;
	margin-right: -5px;
	z-index: 101;
}
.rsbtn_floatskin a.rsbtn_abouthelp:hover {
	background-position: -115px -386px;
}
.rsbtn_floatskin a.rsbtn_abouthelp span {
	display: none;  
}
.breadcrumbs {
  #bookmarksave ,#bookmarkremove{
    span{
      line-height: 24px;
    }
  }
  padding-top: 24px;
  padding-bottom: 48px;
  @include media-breakpoint-down(md) {
    padding-top: 16px;
    padding-bottom: 13px;
	}
	.heading-level-1 + .container{
		margin-bottom: 50px;
	}
  .breadcrumbs-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    transition: all 0.1s ease-in;
  
    .breadcrumbs-actions {
      @include media-breakpoint-down(md) {
        margin-top: 14px;
      }

      .page-functions-list-item {
        .rsbtn_exp_inner {
          position: absolute;
          right: 5px;
          top: 30px;
          display: flex;
          flex-direction: row;
          @include media-breakpoint-down(md) {
            right: inherit;
            left: -75px;
          }
        }
        .rsbtn {
          padding: 0;
        }
        .rsbtn_label{
          color: $dark-grey;
          span{
            font-size: 16px;
            line-height: 24px;
            font-family: "Lato";
            font-weight: normal;
            @include media-breakpoint-down(sm) {
              font-size: 14px;
              line-height: 24px;
            }
          }
        }
        .rsbtn_text {
          color: $dark-grey;
          span{
            font-size: 16px;
            line-height: 24px;
            font-family: "Lato";
			font-weight: normal;
			padding-right: 0px;
            @include media-breakpoint-down(sm) {
              font-size: 16px;
              line-height: 24px;
            }
          }
          &::before {
            color: $dark-grey;
            font-family: "Material Icons";
            content: "\e050";
            font-size: 18px;
            line-height: 18px;
            display: flex;
            align-items: center;
            @include media-breakpoint-down(sm) {
              font-size: 14px !important;
              line-height: 14px !important;
            }
          }
        }
       
        .rsbtn_play {
          padding-right: 0px;
        }
      }

      ul {
        display: flex;
        flex-direction: row;
        margin-bottom: 0px;
        li {
          margin-left: 18px;
          &:first-child {
            margin: 0;
          }
          a {
            display: flex;
            flex-direction: row;
            align-items: center;
            text-decoration: none;
            i {
              margin-right: 6px;
              font-size: 18px;
              @include media-breakpoint-down(sm) {
                font-size: 14px !important;
                line-height: 14px !important;
              }
            }
            &:hover {
              span {
                text-decoration: underline;
              }
            }
          }
        }
      }
      .rsbtn_tooltoggle {
        display: none !important;
      }
      .rsbtn_right {
        display: none;
      }
      .rsbtn_play {
        border: none;
        background: none;
      }
      .rsbtn_left {
        margin-left: 10px;
      }
      
    }
  }
  ol {
    padding: 0;
    margin: 0;
    background-color: transparent;
    &.no-active {
      li {
        &.breadcrumb-item {
         
          &:nth-last-child(2) {
            &::after {
              display: none;
            }
          }
        }
      }
    }
    li {
      &.breadcrumb-item {
				a{
					@include media-breakpoint-down(sm) {
						font-size: 14px;
						line-height: 21px;
          }
				}
        &:not(:first-child) {
          &::before {
            color: $dark-grey;
            font-family: "Material Icons";
            content: "\e315";
            font-size: 16px;
            line-height: 16px;
            vertical-align: middle;
          }
        }
        &:nth-child(2):nth-last-child(n + 3) {
          max-width: 71px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        &:nth-last-child(2) {
          &::after {
            color: $dark-grey;
            font-family: "Material Icons";
            content: "\e315";
            font-size: 16px;
            line-height: 16px;
            vertical-align: middle;
            padding-left: 0.5rem;
            padding-right: 0.5rem;
          }
        }
        &.active {
          color: $dark-grey;
          width: 120px;
          white-space: nowrap;
          overflow: hidden;
          padding-left: 0px;
          text-overflow: ellipsis;
          @include media-breakpoint-down(md) {
            width: 288px;
          }
          @include media-breakpoint-down(sm) {
            width: 138px;
          }
          &::before {
            display: none;
					}
					@include media-breakpoint-down(sm) {
						font-size: 14px;
						line-height: 21px;
					}
					
					a{
						@include media-breakpoint-down(sm) {
							font-size: 14px;
							line-height: 21px;
						}
					}
        }
        a {
		  color: $blue;
			font-size: 16px;
				@include media-breakpoint-down(sm) {
					font-size: 14px;
					line-height: 21px;
				}
        }
      }
    }
  }
}
  • URL: /components/raw/breadcrumbs/breadcrumbs.scss
  • Filesystem Path: src\components\01-global_components\breadcrumbs\breadcrumbs.scss
  • Size: 27.8 KB

Design Element - Breadcrumbs

Renders the breadcrumbs component