Commit e9849170 authored by Jan Blackquill's avatar Jan Blackquill 🌈

buttons and some other things

parent a9c688cc
......@@ -18,12 +18,12 @@
/* Aether base style */
@import 'includes/base';
@import 'includes/breeze';
@import 'includes/navbar';
@import 'includes/font';
@import 'includes/footer';
@import 'includes/kpatrons';
@import 'includes/carousel';
@import 'includes/breeze';
/* Mediawiki style */
@import 'includes/mediawiki.scss';
......
......@@ -19,6 +19,7 @@
/**
* Collection of Breeze like elements (e.g. Buttons)
*/
@import "functions";
.learn-more {
display: inline-block;
......@@ -34,18 +35,10 @@
}
a.button {
position: relative;
display: inline-block;
background-color: #54a3d8;
color: #fcfcfc;
padding: 5px 10px;
border-radius: 2px;
border: solid 1px rgba(0,0,0,.1);
transition: background-color .2s;
@include button();
}
a.button:hover {
background-color: #7cbcec;
a.button.noblefir {
@include button-simple(#a6cfb7, #27ae60, white);
}
a.button.expand {
......@@ -69,7 +62,7 @@ a.button.expand:after {
display: block;
padding-right: 20px;
}
a.button:after {
position: absolute;
top: 50%;
......@@ -77,4 +70,4 @@ a.button.expand:after {
margin-top: -.8ex;
}
}
}
\ No newline at end of file
$ButtonBackgroundAlternate:rgb(189, 195, 199);
$ButtonBackgroundNormal:rgb(239, 240, 241);
$ButtonDecorationFocus:rgb(61, 174, 233);
$ButtonDecorationHover:rgb(147, 206, 233);
$ButtonForegroundActive:rgb(61, 174, 233);
$ButtonForegroundInactive:rgb(127, 140, 141);
$ButtonForegroundLink:rgb(41, 128, 185);
$ButtonForegroundNegative:rgb(218, 68, 83);
$ButtonForegroundNeutral:rgb(246, 116, 0);
$ButtonForegroundNormal:rgb(35, 38, 39);
$ButtonForegroundPositive:rgb(39, 174, 96);
$ButtonForegroundVisited:rgb(127, 140, 141);
$DisabledColor:rgb(56, 56, 56);
$DisabledColorAmount:0;
$DisabledColorEffect:0;
$DisabledContrastAmount:0.65;
$DisabledContrastEffect:1;
$DisabledIntensityAmount:0.1;
$DisabledIntensityEffect:2;
$InactiveChangeSelectionColor:true;
$InactiveColor:rgb(112, 111, 110);
$InactiveColorAmount:0.025;
$InactiveColorEffect:2;
$InactiveContrastAmount:0.1;
$InactiveContrastEffect:2;
$InactiveEnable:false;
$InactiveIntensityAmount:0;
$InactiveIntensityEffect:0;
$SelectionBackgroundAlternate:rgb(29, 153, 243);
$SelectionBackgroundNormal:rgb(61, 174, 233);
$SelectionDecorationFocus:rgb(61, 174, 233);
$SelectionDecorationHover:rgb(147, 206, 233);
$SelectionForegroundActive:rgb(252, 252, 252);
$SelectionForegroundInactive: rgb(239,240, 241);
$SelectionForegroundLink:rgb(253, 188, 75);
$SelectionForegroundNegative:rgb(218, 68, 83);
$SelectionForegroundNeutral:rgb(246, 116, 0);
$SelectionForegroundNormal:rgb(252, 252, 252);
$SelectionForegroundPositive:rgb(39, 174, 96);
$SelectionForegroundVisited:rgb(189, 195, 199);
$TooltipBackgroundAlternate:rgb(77, 77, 77);
$TooltipBackgroundNormal:rgb(35, 38, 39);
$TooltipDecorationFocus:rgb(61, 174, 233);
$TooltipDecorationHover:rgb(147, 206, 233);
$TooltipForegroundActive:rgb(61, 174, 233);
$TooltipForegroundInactive:rgb(189, 195, 199);
$TooltipForegroundLink:rgb(41, 128, 185);
$TooltipForegroundNegative:rgb(218, 68, 83);
$TooltipForegroundNeutral:rgb(246, 116, 0);
$TooltipForegroundNormal:rgb(252, 252, 252);
$TooltipForegroundPositive:rgb(39, 174, 96);
$TooltipForegroundVisited:rgb(127, 140, 141);
$ViewBackgroundAlternate:rgb(239, 240, 241);
$ViewBackgroundNormal:rgb(252, 252, 252);
$ViewDecorationFocus:rgb(61, 174, 233);
$ViewDecorationHover:rgb(147, 206, 233);
$ViewForegroundActive:rgb(61, 174, 233);
$ViewForegroundInactive:rgb(127, 140, 141);
$ViewForegroundLink:rgb(41, 128, 185);
$ViewForegroundNegative:rgb(218, 68, 83);
$ViewForegroundNeutral:rgb(246, 116, 0);
$ViewForegroundNormal:rgb(35, 38, 39);
$ViewForegroundPositive:rgb(39, 174, 96);
$ViewForegroundVisited:rgb(127, 140, 141);
$WMactiveBackground:rgb(71, 80, 87);
$WMactiveBlend:rgb(252, 252, 252);
$WMactiveForeground:rgb(252, 252, 252);
$WMinactiveBackground:rgb(239, 240, 241);
$WMinactiveBlend:rgb(75, 71, 67);
$WMinactiveForeground:rgb(189, 195, 199);
$WindowBackgroundAlternate:rgb(189, 195, 199);
$WindowBackgroundNormal:rgb(239, 240, 241);
$WindowDecorationFocus:rgb(61, 174, 233);
$WindowDecorationHover:rgb(147, 206, 233);
$WindowForegroundActive:rgb(61, 174, 233);
$WindowForegroundInactive: rgb(127, 140, 141);
$WindowForegroundLink:rgb(41, 128, 185);
$WindowForegroundNegative:rgb(218, 68, 83);
$WindowForegroundNeutral:rgb(246, 116, 0);
$WindowForegroundNormal:rgb(35, 38, 39);
$WindowForegroundPositive:rgb(39, 174, 96);
$WindowForegroundVisited:rgb(127, 140, 141);
$border_color: mix($WindowBackgroundNormal,$WindowForegroundNormal, 75%);
\ No newline at end of file
@import "colors";
@function b_color($c: normal) {
@if $c==normal {
@return $ButtonBackgroundNormal;
}
@if $c==hover {
@return $ButtonDecorationHover;
}
@if $c==active {
@return $ButtonDecorationFocus;
}
@if $c==text {
@return $ButtonForegroundNormal;
}
@if $c==active-text {
@return $SelectionForegroundNormal;
}
}
// Selection Color
@function s_color($c: normal) {
@if $c==normal {
@return $SelectionBackgroundNormal;
}
@if $c==hover {
@return $SelectionDecorationHover;
}
@if $c==text {
@return $SelectionForegroundNormal;
}
@if $c==backdrop {
@return transparentize($SelectionBackgroundNormal, 0.5);
}
}
// View Color
@function v_color($c: normal) {
@if $c==normal {
@return $ViewBackgroundNormal;
}
@if $c==hover {
@return $ViewDecorationHover;
}
@if $c==active {
@return $ViewDecorationFocus;
}
@if $c==text {
@return $ViewForegroundNormal;
}
}
// Window Color
@function w_color($c: normal) {
@if $c==normal {
@return $WindowBackgroundNormal;
}
@if $c==text {
@return $WindowForegroundNormal;
}
}
// Titlebar color
@function t_color($c: text) {
@if $c==text {
@return $WMactiveForeground;
}
@if $c==background {
@return $WMactiveBackground;
}
@if $c==background-light {
@return $WindowBackgroundNormal;
}
@if $c==backdrop-text {
@return $WMinactiveForeground;
}
@if $c==backdrop-background {
@return $WMinactiveBackground;
}
}
@function tooltip($c: text) {
@if $c==text {
@return $TooltipForegroundNormal;
}
@if $c==background {
@return $TooltipBackgroundNormal;
}
@if $c==border {
@return mix($TooltipForegroundNormal, $TooltipBackgroundNormal, 25%);
}
}
$r: 3px;
$border_color: mix($WindowBackgroundNormal, $WindowForegroundNormal, 75%);
$menu_color: w_color(normal);
$link_color: $ViewForegroundLink;
$link_visited_color: $ViewForegroundVisited;
$warning_color: $ViewForegroundNeutral;
$error_color: $ViewForegroundNegative;
$success_color: $ViewForegroundPositive;
$destructive_color: $error_color;
$trough_color: mix(w_color(normal), w_color(text), 70%);
$scrollbar_color: mix($trough_color, v_color(text), 50%);
@function button_gradient($c, $state: normal) {
@if $state==normal {
@return linear-gradient(to bottom, change-color($c, $lightness: min(lightness($c)*1.01, 100%)), change-color($c, $lightness:min(lightness($c)/1.03, 100%)));
}
@else {
@return linear-gradient(to bottom, change-color($c, $lightness: min(lightness($c)*1.03, 100%)), change-color($c, $lightness:min(lightness($c)/1.10, 100%)));
}
}
$Color: (Disabled: $DisabledColor,
Inactive: $InactiveColor);
$ColorAmount: (Disabled: $DisabledColorAmount,
Inactive: $InactiveColorAmount);
$ColorEffect: (Disabled: $DisabledColorEffect,
Inactive: $InactiveColorEffect);
$ContrastAmount: (Disabled: $DisabledContrastAmount,
Inactive: $InactiveContrastAmount);
$ContrastEffect: (Disabled: $DisabledContrastEffect,
Inactive: $InactiveContrastEffect);
$IntensityAmount: (Disabled: $DisabledIntensityAmount,
Inactive: $InactiveIntensityAmount);
$IntensityEffect: (Disabled: $DisabledIntensityEffect,
Inactive: $InactiveIntensityEffect);
@function Contrast($c, $state) {
@if map-get($ContrastEffect, $state)==0 {
@return $c;
}
@if map-get($ContrastEffect, $state)==1 {
@if lightness(w_color())>lightness(w_color(text)) {
@if lightness($c) < lightness(w_color()) or ($c==t_color(text) and lightness(t_color(background)) <=lightness(t_color(text))) {
@return transparentize($c, map-get($ContrastAmount, $state));
}
@else {
@return $c;
}
}
@if lightness(w_color()) <=lightness(w_color(text)) {
@if lightness($c)>lightness(w_color()) or ($c==t_color(text) and lightness(t_color(background)) > lightness(t_color(text))) {
@return transparentize($c, map-get($ContrastAmount, $state));
}
@else {
@return $c;
}
}
}
@if map-get($ContrastEffect, $state)==2 {
@if lightness(w_color())>lightness(w_color(text)) {
// don't know what a reasonable lightness treshhold is for Contrast
@if lightness($c) < lightness(w_color()) or ($c==t_color(text) and lightness(t_color(background)) <=lightness(t_color(text))) {
@return transparentize($c, map-get($ContrastAmount, $state));
}
@else {
@return $c;
}
}
@if lightness(w_color()) <=lightness(w_color(text)) {
@if lightness($c)>lightness(w_color()) or ($c==t_color(text) and lightness(t_color(background)) > lightness(t_color(text))) {
@return transparentize($c, map-get($ContrastAmount, $state));
}
@else {
@return $c;
}
}
}
}
@function Color($c, $state) {
@if map-get($ColorEffect, $state)==0 {
@return $c;
}
@if map-get($ColorEffect, $state)==1 {
@if map-get($ColorAmount, $state)>=0 {
@return desaturate($c, percentage(map-get($ColorAmount, $state)));
}
@else {
@return saturate($c, percentage(abs(map-get($ColorAmount, $state))));
}
}
@if map-get($ColorEffect, $state)==2 or map-get($ColorEffect, $state)==3 {
// 2 and 3 seem to do the same
@return mix(map-get($Color, $state), $c, percentage(map-get($ColorAmount, $state)));
}
}
@function Intensity($c, $state) {
@if map-get($IntensityEffect, $state)==0 {
@return $c;
}
@if map-get($IntensityEffect, $state)==1 {
@if map-get($IntensityAmount, $state)>=0 {
@return mix(white, $c, percentage(map-get($IntensityAmount, $state)));
}
@else {
@return mix(black, $c, percentage(abs(map-get($IntensityAmount, $state))));
}
}
@if map-get($IntensityEffect, $state)==2 {
@if map-get($IntensityAmount, $state)==-1 {
@return change-color($c, $lightness: 100%);
}
@else {
@return change-color($c, $lightness: min(lightness($c)/(1+map-get($IntensityAmount, $state)), 100%));
}
}
@if map-get($IntensityEffect, $state)==3 {
@return change-color($c, $lightness: min(lightness($c)*(1+map-get($IntensityAmount, $state)), 100%));
}
}
@function insensitive($c) {
@return Color(Intensity(Contrast($c, Disabled), Disabled), Disabled);
}
@function backdrop($c) {
@if $InactiveEnable==true {
@return Color(Intensity(Contrast($c, Inactive), Inactive), Inactive);
}
@else {
@return $c;
}
}
@mixin button($text_color: b_color(text), $active_text_color: b_color(active-text),
$bborder_color: $border_color, $normal_color: b_color(normal),
$hover_color: b_color(hover), $active_color: b_color(active)) {
display: inline-block;
color: $text_color !important;
background-color: $normal_color;
background-image: button_gradient($normal_color);
box-shadow: 0.5px 0.5px 0.5px 0.5px rgba(35, 38, 39, .1);
border-color: $bborder_color !important;
border-radius: 3px;
border: 1px solid;
padding: 8px;
transition: all .1s linear;
&:visited {
color: initial;
}
&:hover {
border-color: $hover_color !important;
background-color: $normal_color !important;
}
&:active {
background-image: button_gradient($hover_color);
box-shadow: 0.5px 0.5px 0.5px 0.5px rgba(35, 38, 39, .1);
padding: 8px;
transform: translate(1px, 1px);
}
&:focus:not(:active) {
color: $active_text_color !important;
border-color: $active_color !important;
background-image: button_gradient($active_color);
}
}
@mixin button-simple($hover_color, $active_color, $active_text_color) {
@include button(b_color(text), $active_text_color, $border_color, b_color(normal), $hover_color, $active_color);
}
\ No newline at end of file
......@@ -6,5 +6,8 @@
"node-sass": "^4.12.0",
"popper.js": "^1.15.0",
"sass-loader": "^7.1.0"
},
"scripts": {
"encore-dev": "encore dev"
}
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment