[FEATURE] add theme variables for button styles (#362)

Different button styles depending on default colors * btn-default * btn-default--inverted * btn-bordered * btn-bordered--inverted
t3kit · Dec 7, 2017 · 1c7ba14 · 1c7ba14
1 parent 1697082
commit 1c7ba14
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 4 deletions.
diff --git a/Configuration/TypoScript/Library/plugin.dyncss.setupts b/Configuration/TypoScript/Library/plugin.dyncss.setupts
@@ -336,4 +336,16 @@ plugin.tx_dyncss.overrides {
         if.isTrue = {$themes.configuration.less.var.footerLinkHoverColor}
     }
 
+    # BUTTONS
+    btn-default-color = TEXT
+    btn-default-color {
+       value = {$themes.configuration.less.var.buttonTextColor}
+        if.isTrue = {$themes.configuration.less.var.buttonTextColor}
+    }
+
+    btn-default-bg = TEXT
+    btn-default-bg {
+           value = {$themes.configuration.less.var.buttonBgColor}
+            if.isTrue = {$themes.configuration.less.var.buttonBgColor}
+    }
 }
diff --git a/Configuration/TypoScript/Library/themes.less.constantsts b/Configuration/TypoScript/Library/themes.less.constantsts
@@ -30,6 +30,14 @@ themes.configuration.less.var.mainLinkColor =
 themes.configuration.less.var.mainLinkHoverColor =
 
 
+# Buttons
+#############################################
+# customsubcategory=button_colors=Button Colors
+# cat=colors,basic/button_colors/; type=color; label= Button Text Color
+themes.configuration.less.var.buttonTextColor =
+# cat=colors,basic/button_colors/; type=color; label= Button Background Color
+themes.configuration.less.var.buttonBgColor =
+
 
 
 #############################################

diff --git a/felayout_t3kit/dev/styles/customVariables.less b/felayout_t3kit/dev/styles/customVariables.less
@@ -128,12 +128,11 @@
 //== Buttons BOOTSTRAP
 //
 //## For each of Bootstrap's buttons, define text, background and border color.
-
 @btn-font-weight:               normal;
-@btn-default-color:             @main-color;
-@btn-default-bg:                transparent;
-@btn-default-border:            tint(@main-color, 70%);
 @btn-border-radius-base:        none;
+@btn-default-color:             @main-body-bg;
+@btn-default-bg:                @main-color;
+@btn-default-border:            @main-color;
 
 @padding-base-vertical:     8px;
 @padding-base-horizontal:   14px;

diff --git a/felayout_t3kit/dev/styles/main/general.less b/felayout_t3kit/dev/styles/main/general.less
@@ -110,5 +110,25 @@ h1,
 h2 {
     font-family: @font-family-serif;
 }
+
 // -----------------------------------------------------------------------------
 // -----------------------------------------------------------------------------
+
+// ============================
+// ======== Button styles  ====
+// ============================
+.btn-default {
+    .btn-style--t3kit(@btn-default-color, @btn-default-bg, transparent);
+}
+
+.btn-default--inverted {
+    .btn-style--t3kit(@btn-default-bg, @btn-default-color, transparent);
+}
+
+.btn-bordered {
+    .btn-style--t3kit(@btn-default-bg, transparent, @btn-default-bg);
+}
+
+.btn-bordered--inverted {
+    .btn-style--t3kit(@btn-default-color, transparent, @btn-default-color);
+}
diff --git a/felayout_t3kit/dev/styles/main/mixins.less b/felayout_t3kit/dev/styles/main/mixins.less
@@ -42,3 +42,19 @@
         opacity: 0.6;
     }
 }
+
+// =================================
+// === Set style for buttons =======
+// =================================
+.btn-style--t3kit(@color; @background; @border) {
+    color: @color;
+    background-color: @background;
+    border-color: @border;
+
+    &:focus,
+    &:hover {
+        color: @color;
+        background-color: darken(@background, 10%);
+        border-color: darken(@border, 10%);
+    }
+}