SAMui v1

ui komponenty by já

by Petr Haluza

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<html>
<head>
<meta name="color-scheme" content="light dark">
</head>
<body>


<main-container class="background-primary">

  <content-block>

    <section class"pt-d pb-d">

      <button class="large bordered colors-primary" >Large</button>

      <hr data-sy="0.5">

      <button-group class="large rounded">
        <button>jedna</button>
        <button>dvě</button>
        <button class="colors-primary">tři</button>
      </button-group>

      <hr data-sy="0.5">    

      <figure class="rounded" data-sy="2"><img src="https://i.pravatar.cc/150?u=a042581f4e29026024d"></figure>

    </section>

  </content-block>

</main-container>


</body>
</html>

CSS

/* napojeno normalize.css */
* { box-sizing: border-box}
/* muj css reset */
figure {margin:0}
hr {border:none}

:root {
  --primary-element-color: #1e90ff; /* barva primárních tlačítek */
  --primary-background-color: #f1f5f9; /* barva podkladů bloků */
  --container-padding: 15px; /* defaultní odsazení sekcí */
}

/* importy v produkci na sameserver */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@200;400;600;900&display=swap');

html, body {font-family: 'Noto Sans', sans-serif; font-size: 14px}

/* vlastní html tagy */
main-container,
content-block {display:block}

main-container { top:0; left:0; right:0; bottom:0}
content-block {max-width: 1600px; margin: 0 auto; padding-left: var(--container-padding); padding-right: var(--container-padding)}

/* barvy pozadí */
.background-primary {background-color: var(--primary-background-color)}
@media screen and (prefers-color-scheme: dark) {
    .background-primary {background-color: #222}
}

/* size v y ose */
[data-sy="0.5"] { height: .5em}
[data-sy="0.75"] { height: .75em}
[data-sy="2"] {  height: 2em}

/* padding, d jako default */
.pt-d {padding-top:var(--container-padding)}
.pb-d {padding-bottom:var(--container-padding)}

/* tlačítka */
button.large { font-size: 2em}
button.bordered {  border-width: 2px}
button.colors-primary { background-color: var(--primary-element-color)}

/* skupina tlačítek */

/* ikony a obrázky */
figure { display: inline-block}
figure img { height: 100%}
figure.rounded { border-radius: 50%; overflow: hidden}

/*
[class^="icon-"] - je to ikona //začíná na "icon"
[class*="-rounded-"] - zakulatit //obsahuje "rounded"
[class$="asterisk"] - je to ikona hvězdičky // končí na "asterisk"

JavaScript

/* nic zatim, děláme jen statickou komponentu zatim

vlastní html tagy musí mít náze malým písmenem a obsaovat "-"