BETA Hej! Denna webbplats är under utveckling. Bidra gärna med feedback!
Stilguide
Bidra

Search 

<h2 class="rh-search-letter">
    A</h2>
<div class="rh-search">

    <h5 class="rh-search-title"> Lorem ipsum dolor sit amet </h5>
    <p class="rh-search-text-inline"> 24 maj 2018</p>
    <p class="rh-search-text-inline">|</p>
    <p class="rh-search-text-inline">Webbsida</p>

    <div class="rh-search-accordion">
        <p class="rh-search-descpription">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </p>
        <span class="rh-search-icon"></span>
    </div>
    <div class="rh-search-card">
        <p><strong>Gäller för:</strong> Urologikliniken Hallands sjukhus</p>
        <p><strong>Fastställd av:</strong> Verksamhetschef</p>
        <p><strong>Publicerad:</strong> 3 maj 2016 (Utgåva 6)</p>
        <p><strong>Huvudförfattare:</strong> Kleist Jakob HS URO</p>
        <p><strong>Redaktör:</strong> Arnell Ulrika HS URO</p>
    </div>

    <h5 class="rh-search-title">Phasellus tellus neque</h5>
    <p class="rh-search-text-inline"> 14 april 2018</p>
    <p class="rh-search-text-inline">|</p>
    <p class="rh-search-text-inline">Webbsida</p>

    <div class="rh-search-accordion">
        <p class="rh-search-descpription">
            Fusce laoreet sapien sit amet eros aliquet, a consequat metus porta. Curabitur eu risus lacinia, tincidunt justo vel, iaculis eros. Etiam porttitor maximus elementum. Morbi ac tellus maximus, dictum nisi accumsan, molestie metus. Fusce non molestie nisi.
            Duis ligula est, luctus vel tempor tempor, eleifend vel metus. Mauris facilisis purus quis convallis aliquam. Phasellus tellus neque, feugiat vitae semper nec, convallis eget enim.
        </p>
        <span class="rh-search-icon"></span>
    </div>
    <div class="rh-search-card">
        <p><strong>Gäller för:</strong> Urologikliniken Hallands sjukhus</p>
        <p><strong>Fastställd av:</strong> Verksamhetschef</p>
        <p><strong>Publicerad:</strong> 4 maj 2016 (Utgåva 6)</p>
        <p><strong>Huvudförfattare:</strong> Kleist Jakob HS URO</p>
        <p><strong>Redaktör:</strong> Arnell Ulrika HS URO</p>
    </div>

</div>
 
<h2 class="rh-search-letter">A</h2>
<div class="rh-search">

	<h5 class="rh-search-title"> Lorem ipsum dolor sit amet </h5>
	<p class="rh-search-text-inline"> 24 maj 2018</p> <p class="rh-search-text-inline">|</p> <p class="rh-search-text-inline">Webbsida</p>
	
	<div class="rh-search-accordion">
		<p class="rh-search-descpription">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
laboris nisi ut aliquip ex ea commodo consequat. 
		</p>
		<span class="rh-search-icon"></span>
	</div>
	<div class="rh-search-card">
		<p><strong>Gäller för:</strong> Urologikliniken Hallands sjukhus</p> 
		<p><strong>Fastställd av:</strong> Verksamhetschef</p> 
		<p><strong>Publicerad:</strong> 3 maj 2016 (Utgåva 6)</p> 
		<p><strong>Huvudförfattare:</strong> Kleist Jakob HS URO</p> 
		<p><strong>Redaktör:</strong> Arnell Ulrika HS URO</p> 
	</div>



	<h5 class="rh-search-title">Phasellus tellus neque</h5>
	<p class="rh-search-text-inline"> 14 april 2018</p> <p class="rh-search-text-inline">|</p> <p class="rh-search-text-inline">Webbsida</p>
	
	<div class="rh-search-accordion">
		<p class="rh-search-descpription">
			Fusce laoreet sapien sit amet eros aliquet, a consequat metus porta. Curabitur eu risus lacinia, tincidunt justo vel, iaculis eros. Etiam porttitor maximus elementum. Morbi ac tellus maximus, dictum nisi accumsan, molestie metus. Fusce non molestie nisi. Duis ligula est, luctus vel tempor tempor, eleifend vel metus. Mauris facilisis purus quis convallis aliquam. Phasellus tellus neque, feugiat vitae semper nec, convallis eget enim.  
		</p>
		<span class="rh-search-icon"></span>
	</div>
	<div class="rh-search-card">
		<p><strong>Gäller för:</strong> Urologikliniken Hallands sjukhus</p> 
		<p><strong>Fastställd av:</strong> Verksamhetschef</p> 
		<p><strong>Publicerad:</strong> 4 maj 2016 (Utgåva 6)</p> 
		<p><strong>Huvudförfattare:</strong> Kleist Jakob HS URO</p> 
		<p><strong>Redaktör:</strong> Arnell Ulrika HS URO</p> 
	</div>

</div>
 
{
  "caption": "",
  "name": ""
}
  • Content: 
    .rh-search{
	padding: $space-4; //em(15);
	border-left: $border-thin--xl $color-primary;

	&-letter{
		font-weight: bold;
		color: $color-primary;
	}

	&-title{
		margin-top: $space-5; //em(20);

		&:first-child{
			margin-top: 0;
		}
	}

	&-text-inline{
		display: inline-block;
		font-size: $p-small;
		color: $grey-darkest;
	}

	&-accordion{
		display: flex;
		align-items: flex-start;
	}

	&-descpription{
		margin-right: $space-5; //em(20);
	}

	&-icon {
        margin-left: auto;
        margin-top: $space-2; //em(8);
		&:after {
        	padding: $space-2; //em(8);
			border-radius: 50%;
			background-color: $color-primary;
			font-family: $icon--font-family;
			content: "\e8b1";
			color: $white;
			font-size: $space-3; //em(14);
		}

	}
	&-active {
		.rh-search-icon:after {
			font-family: $icon--font-family;
			content: "\e897";
		}
	}
}

.rh-search-card {
	overflow: hidden;
  	max-height: 0;
  	margin-top: $space-3; //em(10);
	transition: max-height 0.2s ease-out;
}
  • URL: /components/raw/search/_search.scss
  • Filesystem Path: components/Organisms/search/_search.scss
  • Size: 987 Bytes
  • Content: 
    {
    "name": "regionhalland/search",
    "description": "Search",
    "type": "styleguide-organism",
    "license": "GPL-3.0",
    "authors": [
        {
            "name": "Region Halland",
            "email": "webbplatser@regionhalland.se"
        }
    ],
    "require": {}
}
  • URL: /components/raw/search/composer.json
  • Filesystem Path: components/Organisms/search/composer.json
  • Size: 282 Bytes
  • Content: 
    var acc = document.getElementsByClassName("rh-search-accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("rh-search-active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + 100 + "px";
    } 
  });
}
  • URL: /components/raw/search/search.js
  • Filesystem Path: components/Organisms/search/search.js
  • Size: 403 Bytes

Organismen “Search”

Versionshistorik

  • 1.0.0.20200204 Globala variabler används
  • 1.0.0.20191123 Flyttat till gitrepo