<main class="page-docs colors-palette">
<div class="container">
<header>
<h1 class="like-h1">Colores web: UCI / Hipotecas</h1>
<h2 class="like-h2">Índice</h2>
</header>
<section>
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col">
<div class="doc-block index">
<ul class="index-of-contents">
<li><a href="#block-1">
<span class="number"><span>1</span></span>
Variables de color compartidas entre plantillas de UCI e Hipotecas
</a>
</li>
<li><a href="#block-2">
<span class="number"><span>2</span></span>
Referencias de color según manual corporativo web en UCI
</a>
</li>
</ul>
</div>
<div id="block-1" class="doc-block card">
<div class="block-head">
<span class="number"><span>1</span></span>Variables de color compartidas entre plantillas de UCI e Hipotecas
<p><small>A la izquierda color UCI, a la derecha color correspondiente en Hipotecas</small></p>
</div>
<div class="block-body">
<div class="palletes">
<div class="row palette-header">
<h4>PAleta de Colores general</h4>
</div>
<div class="single-palette text-center" id="pallete-1">
<div class="color-group">
<div class="row">
<div class="col variable">
--color-primary
</div>
</div>
<div class="row color-pair">
<div class="col color-cell" style="background: #ffffff">
</div>
<div class="col color-cell" style="background: #ffffff">
</div>
</div>
<div class="row color-code">
<div class="col code-cell">
#ffffff
</div>
<div class="col code-cell">
#ffffff
</div>
</div>
</div>
<div class="color-group">
<div class="row">
<div class="col variable">
--color-secondary
</div>
</div>
<div class="row color-pair">
<div class="col color-cell" style="background: #191919">
</div>
<div class="col color-cell" style="background: #191919">
</div>
</div>
<div class="row color-code">
<div class="col code-cell">
#191919
</div>
<div class="col code-cell">
#191919
</div>
</div>
</div>
<div class="color-group">
<div class="row">
<div class="col variable">
--color-secondary-light
</div>
</div>
<div class="row color-pair">
<div class="col color-cell" style="background: #d8d8d8">
</div>
<div class="col color-cell" style="background: #26d07c">
</div>
</div>
<div class="row color-code">
<div class="col code-cell">
#d8d8d8
</div>
<div class="col code-cell">
#26d07c
</div>
</div>
</div>
<div class="color-group">
<div class="row">
<div class="col variable">
--color-tertiary
</div>
</div>
<div class="row color-pair">
<div class="col color-cell" style="background: #ffdc60">
</div>
<div class="col color-cell" style="background: #ce0f69">
</div>
</div>
<div class="row color-code">
<div class="col code-cell">
#ffdc60
</div>
<div class="col code-cell">
#ce0f69
</div>
</div>
</div>
<div class="color-group">
<div class="row">
<div class="col variable">
---color-tertiary-dark
</div>
</div>
<div class="row color-pair">
<div class="col color-cell" style="background: #f6c927">
</div>
<div class="col color-cell" style="background: #ae0b58">
</div>
</div>
<div class="row color-code">
<div class="col code-cell">
#f6c927
</div>
<div class="col code-cell">
#ae0b58
</div>
</div>
</div>
<div class="color-group">
<div class="row">
<div class="col variable">
--color-quaternary
</div>
</div>
<div class="row color-pair">
<div class="col color-cell" style="background: #f9f9f9">
</div>
<div class="col color-cell" style="background: #f9f9f9">
</div>
</div>
<div class="row color-code">
<div class="col code-cell">
#f9f9f9
</div>
<div class="col code-cell">
#f9f9f9
</div>
</div>
</div>
<div class="color-group">
<div class="row">
<div class="col variable">
---color-quinary
</div>
</div>
<div class="row color-pair">
<div class="col color-cell" style="background: #e2e2e2">
</div>
<div class="col color-cell" style="background: #e2e2e2">
</div>
</div>
<div class="row color-code">
<div class="col code-cell">
#e2e2e2
</div>
<div class="col code-cell">
#e2e2e2
</div>
</div>
</div>
<div class="color-group">
<div class="row">
<div class="col variable">
--color-accent
</div>
</div>
<div class="row color-pair">
<div class="col color-cell" style="background: #e4002b">
</div>
<div class="col color-cell" style="background: #00635b">
</div>
</div>
<div class="row color-code">
<div class="col code-cell">
#e4002b
</div>
<div class="col code-cell">
#00635b
</div>
</div>
</div>
<div class="color-group">
<div class="row">
<div class="col variable">
---color-accent-dark
</div>
</div>
<div class="row color-pair">
<div class="col color-cell" style="background: #910048">
</div>
<div class="col color-cell" style="background: #26d07c">
</div>
</div>
<div class="row color-code">
<div class="col code-cell">
#910048
</div>
<div class="col code-cell">
#26d07c
</div>
</div>
</div>
<div class="color-group">
<div class="row">
<div class="col variable">
--color-accent-dark-secondary
</div>
</div>
<div class="row color-pair">
<div class="col color-cell" style="background: #a81818">
</div>
<div class="col color-cell" style="background: #a81818">
</div>
</div>
<div class="row color-code">
<div class="col code-cell">
#a81818
</div>
<div class="col code-cell">
#a81818
</div>
</div>
</div>
<div class="color-group">
<div class="row">
<div class="col variable">
---color-accent-dark-tertiary
</div>
</div>
<div class="row color-pair">
<div class="col color-cell" style="background: #890f0f">
</div>
<div class="col color-cell" style="background: #00534c">
</div>
</div>
<div class="row color-code">
<div class="col code-cell">
#890f0f
</div>
<div class="col code-cell">
#00534c
</div>
</div>
</div>
<div class="color-group">
<div class="row">
<div class="col variable">
--color-accent-light
</div>
</div>
<div class="row color-pair">
<div class="col color-cell" style="background: #ffecdc">
</div>
<div class="col color-cell" style="background: #fae6ea">
</div>
</div>
<div class="row color-code">
<div class="col code-cell">
#ffecdc
</div>
<div class="col code-cell">
#fae6ea
</div>
</div>
</div>
</div>
<div class="row palette-header">
<h4>PAleta de Colores Texto</h4>
</div>
<div class="single-palette text-center" id="pallete-2">
<div class="color-group">
<div class="row">
<div class="col variable">
--color-text
</div>
</div>
<div class="row color-pair">
<div class="col color-cell" style="background: #191919">
</div>
<div class="col color-cell" style="background: #191919">
</div>
</div>
<div class="row color-code">
<div class="col code-cell">
#191919
</div>
<div class="col code-cell">
#191919
</div>
</div>
</div>
<div class="color-group">
<div class="row">
<div class="col variable">
--color-text-secondary
</div>
</div>
<div class="row color-pair">
<div class="col color-cell" style="background: #191919">
</div>
<div class="col color-cell" style="background: #191919">
</div>
</div>
<div class="row color-code">
<div class="col code-cell">
#191919
</div>
<div class="col code-cell">
#191919
</div>
</div>
</div>
<div class="color-group">
<div class="row">
<div class="col variable">
--color-text-light
</div>
</div>
<div class="row color-pair">
<div class="col color-cell" style="background: #d8d8d8">
</div>
<div class="col color-cell" style="background: #26d07c">
</div>
</div>
<div class="row color-code">
<div class="col code-cell">
#d8d8d8
</div>
<div class="col code-cell">
#26d07c
</div>
</div>
</div>
<div class="color-group">
<div class="row">
<div class="col variable">
--color-text-tertiary
</div>
</div>
<div class="row color-pair">
<div class="col color-cell" style="background: #ffdc60">
</div>
<div class="col color-cell" style="background: #ce0f69">
</div>
</div>
<div class="row color-code">
<div class="col code-cell">
#ffdc60
</div>
<div class="col code-cell">
#ce0f69
</div>
</div>
</div>
<div class="color-group">
<div class="row">
<div class="col variable">
--color-text-quaternary
</div>
</div>
<div class="row color-pair">
<div class="col color-cell" style="background: #ffecdc">
</div>
<div class="col color-cell" style="background: #fae6ea">
</div>
</div>
<div class="row color-code">
<div class="col code-cell">
#ffecdc
</div>
<div class="col code-cell">
#fae6ea
</div>
</div>
</div>
</div>
<div class="row palette-header">
<h4>PAleta de Colores de estado</h4>
</div>
<div class="single-palette text-center" id="pallete-3">
<div class="color-group">
<div class="row">
<div class="col variable">
--color-hover-accent-dark
</div>
</div>
<div class="row color-pair">
<div class="col color-cell" style="background: #6d0034">
</div>
<div class="col color-cell" style="background: #11af61">
</div>
</div>
<div class="row color-code">
<div class="col code-cell">
#6d0034
</div>
<div class="col code-cell">
#11af61
</div>
</div>
</div>
<div class="color-group">
<div class="row">
<div class="col variable">
--color-hover-accent-light
</div>
</div>
<div class="row color-pair">
<div class="col color-cell" style="background: #f9c6d1">
</div>
<div class="col color-cell" style="background: #eed8c7">
</div>
</div>
<div class="row color-code">
<div class="col code-cell">
#f9c6d1
</div>
<div class="col code-cell">
#eed8c7
</div>
</div>
</div>
<div class="color-group">
<div class="row">
<div class="col variable">
--color-disabled
</div>
</div>
<div class="row color-pair">
<div class="col color-cell" style="background: #cdcdcd">
</div>
<div class="col color-cell" style="background: #cdcdcd">
</div>
</div>
<div class="row color-code">
<div class="col code-cell">
#cdcdcd
</div>
<div class="col code-cell">
#cdcdcd
</div>
</div>
</div>
<div class="color-group">
<div class="row">
<div class="col variable">
--color-danger
</div>
</div>
<div class="row color-pair">
<div class="col color-cell" style="background: #e4002b">
</div>
<div class="col color-cell" style="background: #e4002b">
</div>
</div>
<div class="row color-code">
<div class="col code-cell">
#e4002b
</div>
<div class="col code-cell">
#e4002b
</div>
</div>
</div>
<div class="color-group">
<div class="row">
<div class="col variable">
--color-warning
</div>
</div>
<div class="row color-pair">
<div class="col color-cell" style="background: #f6c927">
</div>
<div class="col color-cell" style="background: #f6c927">
</div>
</div>
<div class="row color-code">
<div class="col code-cell">
#f6c927
</div>
<div class="col code-cell">
#f6c927
</div>
</div>
</div>
<div class="color-group">
<div class="row">
<div class="col variable">
--color-valid
</div>
</div>
<div class="row color-pair">
<div class="col color-cell" style="background: #2ec988">
</div>
<div class="col color-cell" style="background: #2ec988">
</div>
</div>
<div class="row color-code">
<div class="col code-cell">
#2ec988
</div>
<div class="col code-cell">
#2ec988
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="block-2" class="doc-block card">
<div class="block-head">
<span class="number"><span>2</span></span>Referencias de color según manual corporativo web en UCI
<p><small></small></p>
</div>
<div class="block-body">
<div class="palletes">
<div class="row palette-header">
<h4>Color Corporativo principal 1</h4>
</div>
<div class="single-palette text-center" id="pallete-1">
<div class="color-group">
<div class="row">
<div class="col variable">
</div>
</div>
<div class="row color-pair">
<div class="col color-cell" style="background: #E4032C">
</div>
<div class="col color-cell" style="background: #E4032C">
</div>
</div>
<div class="row color-code">
<div class="col code-cell">
#E4032C
</div>
<div class="col code-cell">
#E4032C
</div>
</div>
</div>
<div class="color-group">
<div class="row">
<div class="col variable">
</div>
</div>
<div class="row color-pair">
<div class="col color-cell" style="background: #e4032ccc">
</div>
<div class="col color-cell" style="background: #e4032c99">
</div>
</div>
<div class="row color-code">
<div class="col code-cell">
#e4032ccc
</div>
<div class="col code-cell">
#e4032c99
</div>
</div>
</div>
<div class="color-group">
<div class="row">
<div class="col variable">
</div>
</div>
<div class="row color-pair">
<div class="col color-cell" style="background: #f49aab">
</div>
<div class="col color-cell" style="background: #ffcdd5">
</div>
</div>
<div class="row color-code">
<div class="col code-cell">
#f49aab
</div>
<div class="col code-cell">
#ffcdd5
</div>
</div>
</div>
</div>
<div class="row palette-header">
<h4>Color Corporativo principal 2</h4>
</div>
<div class="single-palette text-center" id="pallete-2">
<div class="color-group">
<div class="row">
<div class="col variable">
</div>
</div>
<div class="row color-pair">
<div class="col color-cell" style="background: #910048">
</div>
<div class="col color-cell" style="background: #910048">
</div>
</div>
<div class="row color-code">
<div class="col code-cell">
#910048
</div>
<div class="col code-cell">
#910048
</div>
</div>
</div>
<div class="color-group">
<div class="row">
<div class="col variable">
</div>
</div>
<div class="row color-pair">
<div class="col color-cell" style="background: #a7336d">
</div>
<div class="col color-cell" style="background: #bd6691">
</div>
</div>
<div class="row color-code">
<div class="col code-cell">
#a7336d
</div>
<div class="col code-cell">
#bd6691
</div>
</div>
</div>
<div class="color-group">
<div class="row">
<div class="col variable">
</div>
</div>
<div class="row color-pair">
<div class="col color-cell" style="background: #d399b6">
</div>
<div class="col color-cell" style="background: #e9ccda">
</div>
</div>
<div class="row color-code">
<div class="col code-cell">
#d399b6
</div>
<div class="col code-cell">
#e9ccda
</div>
</div>
</div>
</div>
<div class="row palette-header">
<h4>Color Corporativo secundario</h4>
</div>
<div class="single-palette text-center" id="pallete-3">
<div class="color-group">
<div class="row">
<div class="col variable">
</div>
</div>
<div class="row color-pair">
<div class="col color-cell" style="background: #00635B">
</div>
<div class="col color-cell" style="background: #00635B">
</div>
</div>
<div class="row color-code">
<div class="col code-cell">
#00635B
</div>
<div class="col code-cell">
#00635B
</div>
</div>
</div>
<div class="color-group">
<div class="row">
<div class="col variable">
</div>
</div>
<div class="row color-pair">
<div class="col color-cell" style="background: #33827c">
</div>
<div class="col color-cell" style="background: #66a19d">
</div>
</div>
<div class="row color-code">
<div class="col code-cell">
#33827c
</div>
<div class="col code-cell">
#66a19d
</div>
</div>
</div>
<div class="color-group">
<div class="row">
<div class="col variable">
</div>
</div>
<div class="row color-pair">
<div class="col color-cell" style="background: #99c1bd">
</div>
<div class="col color-cell" style="background: #cce0de">
</div>
</div>
<div class="row color-code">
<div class="col code-cell">
#99c1bd
</div>
<div class="col code-cell">
#cce0de
</div>
</div>
</div>
</div>
<div class="row palette-header">
<h4>Color Corporativo de apoyo</h4>
</div>
<div class="single-palette text-center" id="pallete-4">
<div class="color-group">
<div class="row">
<div class="col variable">
</div>
</div>
<div class="row color-pair">
<div class="col color-cell" style="background: #F9E5D7">
</div>
<div class="col color-cell" style="background: #F9E5D7">
</div>
</div>
<div class="row color-code">
<div class="col code-cell">
#F9E5D7
</div>
<div class="col code-cell">
#F9E5D7
</div>
</div>
</div>
<div class="color-group">
<div class="row">
<div class="col variable">
</div>
</div>
<div class="row color-pair">
<div class="col color-cell" style="background: #faeadf">
</div>
<div class="col color-cell" style="background: #fbefe7">
</div>
</div>
<div class="row color-code">
<div class="col code-cell">
#faeadf
</div>
<div class="col code-cell">
#fbefe7
</div>
</div>
</div>
<div class="color-group">
<div class="row">
<div class="col variable">
</div>
</div>
<div class="row color-pair">
<div class="col color-cell" style="background: #fdf5ef">
</div>
<div class="col color-cell" style="background: #fefaf7">
</div>
</div>
<div class="row color-code">
<div class="col code-cell">
#fdf5ef
</div>
<div class="col code-cell">
#fefaf7
</div>
</div>
</div>
</div>
<div class="row palette-header">
<h4>Color CTA</h4>
</div>
<div class="single-palette text-center" id="pallete-5">
<div class="color-group">
<div class="row">
<div class="col variable">
</div>
</div>
<div class="row color-pair">
<div class="col color-cell" style="background: #FFDB62">
</div>
<div class="col color-cell" style="background: #FFDB62">
</div>
</div>
<div class="row color-code">
<div class="col code-cell">
#FFDB62
</div>
<div class="col code-cell">
#FFDB62
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</main>
<main class="page-docs colors-palette">
<div class="container">
<header>
<h1 class="like-h1">{{ page-title }}</h1>
<h2 class="like-h2">{{ page-sub-title }}</h2>
</header>
<section>
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col">
<div class="doc-block index">
<ul class="index-of-contents">
{{#each color-block}}
<li><a href="#block-{{math @index "+" 1}}">
<span class="number"><span>{{math @index "+" 1}}</span></span>
{{ this.name }}
</a>
</li>
{{/each}}
</ul>
</div>
{{#each color-block}}
<div id="block-{{math @index "+" 1}}" class="doc-block card">
<div class="block-head">
<span class="number"><span>{{math @index "+" 1}}</span></span>{{ this.name }}
<p><small>{{ this.intro }}</small></p>
</div>
<div class="block-body">
<div class="palletes">
{{#each palette}}
<div class="row palette-header">
<h4>{{title-2}}</h4>
</div>
<div class="single-palette text-center" id="pallete-{{math @index "+" 1}}">
{{#each color-group}}
<div class="color-group">
<div class="row">
<div class="col variable">
{{ variable }}
</div>
</div>
<div class="row color-pair">
<div class="col color-cell"
style="background: {{ color1 }}">
</div>
<div class="col color-cell"
style="background: {{ color2 }}">
</div>
</div>
<div class="row color-code">
<div class="col code-cell">
{{ color1 }}
</div>
<div class="col code-cell">
{{ color2 }}
</div>
</div>
</div>
{{/each}}
</div>
{{/each}}
</div>
</div>
</div>
{{/each}}
</div>
</div>
</section>
</div>
</main>
{
"page-title": "Colores web: UCI / Hipotecas",
"page-sub-title": "Índice",
"color-block": [
{
"name": "Variables de color compartidas entre plantillas de UCI e Hipotecas",
"intro": "A la izquierda color UCI, a la derecha color correspondiente en Hipotecas",
"palette": [
{
"title-2": "PAleta de Colores general",
"color-group": [
{
"color1": "#ffffff",
"color2": "#ffffff",
"variable": "--color-primary"
},
{
"color1": "#191919",
"color2": "#191919",
"variable": "--color-secondary"
},
{
"color1": "#d8d8d8",
"color2": "#26d07c",
"variable": "--color-secondary-light"
},
{
"color1": "#ffdc60",
"color2": "#ce0f69",
"variable": "--color-tertiary"
},
{
"color1": "#f6c927",
"color2": "#ae0b58",
"variable": "---color-tertiary-dark"
},
{
"color1": "#f9f9f9",
"color2": "#f9f9f9",
"variable": "--color-quaternary"
},
{
"color1": "#e2e2e2",
"color2": "#e2e2e2",
"variable": "---color-quinary"
},
{
"color1": "#e4002b",
"color2": "#00635b",
"variable": "--color-accent"
},
{
"color1": "#910048",
"color2": "#26d07c",
"variable": "---color-accent-dark"
},
{
"color1": "#a81818",
"color2": "#a81818",
"variable": "--color-accent-dark-secondary"
},
{
"color1": "#890f0f",
"color2": "#00534c",
"variable": "---color-accent-dark-tertiary"
},
{
"color1": "#ffecdc",
"color2": "#fae6ea",
"variable": "--color-accent-light"
}
]
},
{
"title-2": "PAleta de Colores Texto",
"color-group": [
{
"color1": "#191919",
"color2": "#191919",
"variable": "--color-text"
},
{
"color1": "#191919",
"color2": "#191919",
"variable": "--color-text-secondary"
},
{
"color1": "#d8d8d8",
"color2": "#26d07c",
"variable": "--color-text-light"
},
{
"color1": "#ffdc60",
"color2": "#ce0f69",
"variable": "--color-text-tertiary"
},
{
"color1": "#ffecdc",
"color2": "#fae6ea",
"variable": "--color-text-quaternary"
}
]
},
{
"title-2": "PAleta de Colores de estado",
"color-group": [
{
"color1": "#6d0034",
"color2": "#11af61",
"variable": "--color-hover-accent-dark"
},
{
"color1": "#f9c6d1",
"color2": "#eed8c7",
"variable": "--color-hover-accent-light"
},
{
"color1": "#cdcdcd",
"color2": "#cdcdcd",
"variable": "--color-disabled"
},
{
"color1": "#e4002b",
"color2": "#e4002b",
"variable": "--color-danger"
},
{
"color1": "#f6c927",
"color2": "#f6c927",
"variable": "--color-warning"
},
{
"color1": "#2ec988",
"color2": "#2ec988",
"variable": "--color-valid"
}
]
}
]
},
{
"name": "Referencias de color según manual corporativo web en UCI",
"palette": [
{
"title-2": "Color Corporativo principal 1",
"color-group": [
{
"color1": "#E4032C",
"color2": "#E4032C",
"variable": ""
},
{
"color1": "#e4032ccc",
"color2": "#e4032c99",
"variable": ""
},
{
"color1": "#f49aab",
"color2": "#ffcdd5",
"variable": ""
}
]
},
{
"title-2": "Color Corporativo principal 2",
"color-group": [
{
"color1": "#910048",
"color2": "#910048",
"variable": ""
},
{
"color1": "#a7336d",
"color2": "#bd6691",
"variable": ""
},
{
"color1": "#d399b6",
"color2": "#e9ccda",
"variable": ""
}
]
},
{
"title-2": "Color Corporativo secundario",
"color-group": [
{
"color1": "#00635B",
"color2": "#00635B",
"variable": ""
},
{
"color1": "#33827c",
"color2": "#66a19d",
"variable": ""
},
{
"color1": "#99c1bd",
"color2": "#cce0de",
"variable": ""
}
]
},
{
"title-2": "Color Corporativo de apoyo",
"color-group": [
{
"color1": "#F9E5D7",
"color2": "#F9E5D7",
"variable": ""
},
{
"color1": "#faeadf",
"color2": "#fbefe7",
"variable": ""
},
{
"color1": "#fdf5ef",
"color2": "#fefaf7",
"variable": ""
}
]
},
{
"title-2": "Color CTA",
"color-group": [
{
"color1": "#FFDB62",
"color2": "#FFDB62",
"variable": ""
}
]
}
]
}
]
}
.page-docs.colors-palette {
.number {
display: inline-block;
border-radius: 50%;
height: 25px;
width: 25px;
text-align: center;
background: #333;
position: relative;
top: 6px;
> span {
position: absolute;
top: 3px;
left: 9px;
}
}
.doc-block.index {
background: none;
margin-bottom: 30px;
border: none;
padding: 0 0 10px;
border-bottom: solid 1px #ddd;
ul.index-of-contents {
> li {
padding-left: 0;
&:first-of-type {
margin-top: 0px;
}
}
}
}
.like-h1 {
font-size: 26px
}
.like-h2 {
font-size: 20px
}
.doc-block {
background: white;
padding-top: 10px;
margin-left: 20px;
margin-bottom: 0px;
.block-head {
position: static;
font-weight: normal;
text-transform: unset;
margin-bottom: 20px;
margin-left: -35px;
padding-bottom: 10px;
p {
margin-top: 5px;
> small {
padding-left: 35px;
}
}
.number {
font-size: 13px;
background: white;
border: solid 1px #333;
color: #333;
> span {
position: absolute;
left: 8px;
}
}
}
}
.palletes {
margin: 20px 0;
.row {
margin: 0;
}
.palette-header h4 {
text-transform: uppercase;
font-size: 13px;
}
}
.single-palette {
color: #555;
font-size: 13px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
padding-bottom: 40px;
> .row .col {
flex:1;
width: 50%;
}
.color-group {
max-width: 240px;
border-radius: 10px;
margin: 10px 20px 20px 0;
box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.44) 0px 1px 2px;
> .row {
justify-content: space-evenly;
}
}
.color-cell {
height: 60px;
width: 100px;
}
.variable {
text-align: center;
padding: 5px 5px 3px;
}
.color-code {
padding: 6px 5px 4px;
}
.color-pair {
border-bottom: solid 1px #eeeeee;
border-top: solid 1px #eeeeee;
}
}
/* Segundo bloque de paletas */
#block-2 {
.palletes {
max-width: 780px;
}
.palette-header h4 {
margin-bottom: 10px;
}
.single-palette {
padding-bottom: 0;
margin-bottom: 40px;
border-radius: 10px;
box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 44%);
.color-group {
flex-grow: 1;
border-radius: 0;
box-shadow: none;
margin-right: 0;
max-width: unset;
margin-bottom: 0;
.variable {
display: none;
}
.color-cell {
flex-grow: 1;
}
}
.color-group:first-of-type .color-code .code-cell:nth-child(1) {
display: none;
}
}
}
}
No notes defined.