too many color vars! get rid of some

This commit is contained in:
czmj 2017-09-22 13:22:45 +01:00
parent ee7453f1dc
commit 3d6de6fd33
4 changed files with 23 additions and 64 deletions

View File

@ -6,13 +6,5 @@
eget augue amet aliquet nisl cep donec</h2> eget augue amet aliquet nisl cep donec</h2>
<p>Aliquam ut ex ut augue consectetur interdum. Donec amet imperdiet eleifend<br /> fringilla tincidunt. Nullam dui leo Aenean mi ligula, rhoncus ullamcorper.</p> <p>Aliquam ut ex ut augue consectetur interdum. Donec amet imperdiet eleifend<br /> fringilla tincidunt. Nullam dui leo Aenean mi ligula, rhoncus ullamcorper.</p>
</header> </header>
<ul class="icons major">
<li><span class="icon fa-diamond major style1"><span class="label">Lorem</span></span>
</li>
<li><span class="icon fa-heart-o major style2"><span class="label">Ipsum</span></span>
</li>
<li><span class="icon fa-code major style3"><span class="label">Dolor</span></span>
</li>
</ul>
</div> </div>
</section> </section>

View File

@ -26,7 +26,7 @@
/* Form */ /* Form */
label { label {
color: _palette(accent7, fg-bold); color: _palette(accent2, fg-bold);
} }
input[type="text"], input[type="text"],
@ -34,7 +34,7 @@
input[type="email"], input[type="email"],
select, select,
textarea { textarea {
border: solid 1px _palette(accent7, border); border: solid 1px _palette(accent2, border);
} }
/* Button */ /* Button */
@ -44,7 +44,7 @@
input[type="button"], input[type="button"],
button, button,
.button { .button {
border: solid 2px _palette(accent7, border); border: solid 2px _palette(accent2, border);
&.special { &.special {
border: 0 !important; border: 0 !important;

View File

@ -50,41 +50,19 @@
border2: rgba(0,0,0,0.25), border2: rgba(0,0,0,0.25),
border2-bg: rgba(255,255,255,0.2) border2-bg: rgba(255,255,255,0.2)
), ),
accent2: ( accent2: (
bg: #00ffcc, bg: #ffffff,
fg-bold: #ffffff, fg-bold: #2E3842,
fg: mix(#00ffcc, #ffffff, 25%), fg: #4E4852,
fg-light: mix(#00ffcc, #ffffff, 40%), fg-light: #8E8892,
border: rgba(0,0,0,0.125), border: #dfdfdf,
border-bg: rgba(255,255,255,0.075), border-bg: rgba(0,0,0,0.0375),
border2: rgba(0,0,0,0.25), border2: #bfbfbf,
border2-bg: rgba(255,255,255,0.2) border2-bg: rgba(0,0,0,0.1)
), ),
accent3: ( accent3: (
bg: #00f0ff,
fg-bold: #ffffff,
fg: mix(#00f0ff, #ffffff, 25%),
fg-light: mix(#00f0ff, #ffffff, 40%),
border: rgba(0,0,0,0.125),
border-bg: rgba(255,255,255,0.075),
border2: rgba(0,0,0,0.25),
border2-bg: rgba(255,255,255,0.2)
),
accent4: (
bg: #76ddff,
fg-bold: #ffffff,
fg: mix(#76ddff, #ffffff, 25%),
fg-light: mix(#76ddff, #ffffff, 40%),
border: rgba(0,0,0,0.125),
border-bg: rgba(255,255,255,0.075),
border2: rgba(0,0,0,0.25),
border2-bg: rgba(255,255,255,0.2)
),
accent5: (
bg: #505393, bg: #505393,
fg-bold: #ffffff, fg-bold: #ffffff,
fg: mix(#505393, #ffffff, 25%), fg: mix(#505393, #ffffff, 25%),
@ -95,7 +73,7 @@
border2-bg: rgba(255,255,255,0.2) border2-bg: rgba(255,255,255,0.2)
), ),
accent6: ( accent4: (
bg: #ed4933, bg: #ed4933,
fg-bold: #ffffff, fg-bold: #ffffff,
fg: mix(#ed4933, #ffffff, 25%), fg: mix(#ed4933, #ffffff, 25%),
@ -104,16 +82,5 @@
border-bg: rgba(255,255,255,0.075), border-bg: rgba(255,255,255,0.075),
border2: rgba(0,0,0,0.25), border2: rgba(0,0,0,0.25),
border2-bg: rgba(255,255,255,0.2) border2-bg: rgba(255,255,255,0.2)
),
accent7: (
bg: #ffffff,
fg-bold: _palette(bg),
fg: #4E4852,
fg-light: #8E8892,
border: #dfdfdf,
border-bg: rgba(0,0,0,0.0375),
border2: #bfbfbf,
border2-bg: rgba(0,0,0,0.1)
) )
); );

View File

@ -485,15 +485,15 @@ input[type="radio"] {
} }
&.style1 { &.style1 {
color: _palette(accent2, bg); color: _palette(accent1, bg);
} }
&.style2 { &.style2 {
color: _palette(accent3, bg); color: _palette(accent2, bg);
} }
&.style3 { &.style3 {
color: _palette(accent4, bg); color: _palette(accent3, bg);
} }
} }
@ -852,16 +852,16 @@ button,
} }
&.special { &.special {
background-color: _palette(accent6, bg); background-color: _palette(accent4, bg);
box-shadow: none !important; box-shadow: none !important;
color: _palette(accent6, fg-bold) !important; color: _palette(accent4, fg-bold) !important;
&:hover { &:hover {
background-color: lighten(_palette(accent6, bg), 5) !important; background-color: lighten(_palette(accent4, bg), 5) !important;
} }
&:active { &:active {
background-color: darken(_palette(accent6, bg), 5) !important; background-color: darken(_palette(accent4, bg), 5) !important;
} }
} }
@ -904,7 +904,7 @@ button,
&:before { &:before {
display: block; display: block;
color: _palette(accent2, bg); color: _palette(accent1, bg);
position: absolute; position: absolute;
left: 1.75em; left: 1.75em;
top: 2.75em; top: 2.75em;
@ -1242,7 +1242,7 @@ button,
} }
&.style3 { &.style3 {
@include wrapper(accent5); @include wrapper(accent3);
} }
&.style4 { &.style4 {
@ -1250,7 +1250,7 @@ button,
} }
&.style5 { &.style5 {
@include wrapper(accent7); @include wrapper(accent2);
} }
@include breakpoint(medium) { @include breakpoint(medium) {