richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Fixes disabled style of colored buttons

pull/291/head
jlukic 11 years ago
parent
2903c65d46
commit
61cc40a4bb
2 changed files with 56 additions and 22 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      server/documents/project/development.html.eco
  2. 74
      src/elements/button.less

4
server/documents/project/development.html.eco
View File

@ -2,7 +2,7 @@
layout : 'default'
css : 'guide'
title : 'Stack Set-up'
title : 'Set-up'
description : 'A guide to developing locally'
type : 'Semantic Project'
---
@ -94,7 +94,7 @@ type : 'Semantic Project'
<h3 class="ui header"></h3>
<div class="ui divider"></div>
<a class="ui large right floated labeled teal icon button" href="/introduction.html">
<a class="ui large right labeled teal icon button" href="/introduction.html">
Next: Library Introduction
<i class="right arrow icon"></i>
</a>

74
src/elements/button.less
View File

@ -187,9 +187,9 @@
.ui.disabled.button,
.ui.disabled.button:hover,
.ui.disabled.button.active {
background-color: #DDDDDD;
background-color: #DDDDDD !important;
cursor: default;
color: rgba(0, 0, 0, 0.5);
color: rgba(0, 0, 0, 0.5) !important;
opacity: 0.3 !important;
background-image: none !important;
-webkit-box-shadow: none !important;
@ -303,17 +303,19 @@
.ui.primary.buttons .button,
.ui.primary.button {
background-color: #D95C5C;
color: #FFFFFF !important;
color: #FFFFFF;
}
.ui.primary.buttons .button:hover,
.ui.primary.button:hover,
.ui.primary.buttons .active.button,
.ui.primary.button.active {
background-color: #E75859;
color: #FFFFFF;
}
.ui.primary.buttons .button:active,
.ui.primary.button:active {
background-color: #D24B4C;
color: #FFFFFF;
}
/*-------------------
@ -323,17 +325,19 @@
.ui.secondary.buttons .button,
.ui.secondary.button {
background-color: #00B5AD;
color: #FFFFFF !important;
color: #FFFFFF;
}
.ui.secondary.buttons .button:hover,
.ui.secondary.button:hover,
.ui.secondary.buttons .active.button,
.ui.secondary.button.active {
background-color: #009A93;
color: #FFFFFF;
}
.ui.secondary.buttons .button:active,
.ui.secondary.button:active {
background-color: #00847E;
color: #FFFFFF;
}
/*-------------------
@ -343,86 +347,100 @@
/* Facebook */
.ui.facebook.button {
background-color: #3B579D;
color: #FFFFFF !important;
color: #FFFFFF;
}
.ui.facebook.button:hover {
background-color: #3A59A9;
color: #FFFFFF;
}
.ui.facebook.button:active {
background-color: #334F95;
color: #FFFFFF;
}
/* Twitter */
.ui.twitter.button {
background-color: #4092CC;
color: #FFFFFF !important;
color: #FFFFFF;
}
.ui.twitter.button:hover {
background-color: #399ADE;
color: #FFFFFF;
}
.ui.twitter.button:active {
background-color: #3283BC;
color: #FFFFFF;
}
/* Google Plus */
.ui.google.plus.button {
background-color: #D34836;
color: #FFFFFF !important;
color: #FFFFFF;
}
.ui.google.plus.button:hover {
background-color: #E3432E;
color: #FFFFFF;
}
.ui.google.plus.button:active {
background-color: #CA3A27;
color: #FFFFFF;
}
/* Linked In */
.ui.linkedin.button {
background-color: #1F88BE;
color: #FFFFFF !important;
color: #FFFFFF;
}
.ui.linkedin.button:hover {
background-color: #1394D6;
color: #FFFFFF;
}
.ui.linkedin.button:active {
background-color: #1179AE;
color: #FFFFFF;
}
/* YouTube */
.ui.youtube.button {
background-color: #CC181E;
color: #FFFFFF !important;
color: #FFFFFF;
}
.ui.youtube.button:hover {
background-color: #DF0209;
color: #FFFFFF;
}
.ui.youtube.button:active {
background-color: #A50006;
color: #FFFFFF;
}
/* Instagram */
.ui.instagram.button {
background-color: #49769C;
color: #FFFFFF !important;
color: #FFFFFF;
}
.ui.instagram.button:hover {
background-color: #4781B1;
color: #FFFFFF;
}
.ui.instagram.button:active {
background-color: #38658A;
color: #FFFFFF;
}
/* Pinterest */
.ui.pinterest.button {
background-color: #00ACED;
color: #FFFFFF !important;
color: #FFFFFF;
}
.ui.pinterest.button:hover {
background-color: #00B9FF;
color: #FFFFFF;
}
.ui.pinterest.button:active {
background-color: #009EDA;
color: #FFFFFF;
}
/*--------------
@ -1104,7 +1122,7 @@
.ui.black.buttons .button,
.ui.black.button {
background-color: #5C6166;
color: #FFFFFF !important;
color: #FFFFFF;
}
.ui.black.buttons .button:hover,
.ui.black.button:hover {
@ -1119,102 +1137,114 @@
.ui.green.buttons .button,
.ui.green.button {
background-color: #5BBD72;
color: #FFFFFF !important;
color: #FFFFFF;
}
.ui.green.buttons .button:hover,
.ui.green.button:hover,
.ui.green.buttons .active.button,
.ui.green.button.active {
background-color: #58cb73;
color: #FFFFFF;
}
.ui.green.buttons .button:active,
.ui.green.button:active {
background-color: #4CB164;
color: #FFFFFF;
}
/*--- Red ---*/
.ui.red.buttons .button,
.ui.red.button {
background-color: #D95C5C;
color: #FFFFFF !important;
color: #FFFFFF;
}
.ui.red.buttons .button:hover,
.ui.red.button:hover,
.ui.red.buttons .active.button,
.ui.red.button.active {
background-color: #E75859;
color: #FFFFFF;
}
.ui.red.buttons .button:active,
.ui.red.button:active {
background-color: #D24B4C;
color: #FFFFFF;
}
/*--- Orange ---*/
.ui.orange.buttons .button,
.ui.orange.button {
background-color: #E96633;
color: #FFFFFF !important;
color: #FFFFFF;
}
.ui.orange.buttons .button:hover,
.ui.orange.button:hover,
.ui.orange.buttons .active.button,
.ui.orange.button.active {
background-color: #FF7038;
color: #FFFFFF;
}
.ui.orange.buttons .button:active,
.ui.orange.button:active {
background-color: #DA683B;
color: #FFFFFF;
}
/*--- Blue ---*/
.ui.blue.buttons .button,
.ui.blue.button {
background-color: #6ECFF5;
color: #FFFFFF !important;
color: #FFFFFF;
}
.ui.blue.buttons .button:hover,
.ui.blue.button:hover,
.ui.blue.buttons .active.button,
.ui.blue.button.active {
background-color: #1AB8F3;
color: #FFFFFF;
}
.ui.blue.buttons .button:active,
.ui.blue.button:active {
background-color: #0AA5DF;
color: #FFFFFF;
}
/*--- Purple ---*/
.ui.purple.buttons .button,
.ui.purple.button {
background-color: #564F8A;
color: #FFFFFF !important;
color: #FFFFFF;
}
.ui.purple.buttons .button:hover,
.ui.purple.button:hover,
.ui.purple.buttons .active.button,
.ui.purple.button.active {
background-color: #3E3773;
color: #FFFFFF;
}
.ui.purple.buttons .button:active,
.ui.purple.button:active {
background-color: #2E2860;
color: #FFFFFF;
}
/*--- Teal ---*/
.ui.teal.buttons .button,
.ui.teal.button {
background-color: #00B5AD;
color: #FFFFFF !important;
color: #FFFFFF;
}
.ui.teal.buttons .button:hover,
.ui.teal.button:hover,
.ui.teal.buttons .active.button,
.ui.teal.button.active {
background-color: #009A93;
color: #FFFFFF;
}
.ui.teal.buttons .button:active,
.ui.teal.button:active {
background-color: #00847E;
color: #FFFFFF;
}
/*---------------
@ -1224,17 +1254,19 @@
.ui.positive.buttons .button,
.ui.positive.button {
background-color: #5BBD72 !important;
color: #FFFFFF !important;
color: #FFFFFF;
}
.ui.positive.buttons .button:hover,
.ui.positive.button:hover,
.ui.positive.buttons .active.button,
.ui.positive.button.active {
background-color: #58CB73 !important;
color: #FFFFFF;
}
.ui.positive.buttons .button:active,
.ui.positive.button:active {
background-color: #4CB164 !important;
color: #FFFFFF;
}
@ -1244,17 +1276,19 @@
.ui.negative.buttons .button,
.ui.negative.button {
background-color: #D95C5C !important;
color: #FFFFFF !important;
color: #FFFFFF;
}
.ui.negative.buttons .button:hover,
.ui.negative.button:hover,
.ui.negative.buttons .active.button,
.ui.negative.button.active {
background-color: #E75859 !important;
color: #FFFFFF;
}
.ui.negative.buttons .button:active,
.ui.negative.button:active {
background-color: #D24B4C !important;
color: #FFFFFF;
}

Write Preview
Loading…
Cancel
Save