diff --git a/resources/frontend_client/app/components/buttons/buttons.css b/resources/frontend_client/app/components/buttons/buttons.css
index b91e184013889f4133f77484d1fb2bf548f1d4fc..151944e765d9b4b06e44fd30d2af3870e9d46d29 100644
--- a/resources/frontend_client/app/components/buttons/buttons.css
+++ b/resources/frontend_client/app/components/buttons/buttons.css
@@ -10,32 +10,32 @@
}
.Button {
+ text-decoration: none;
+ padding: 0.5em 0.75em;
+ background: #FBFCFD;
+ border: 1px solid #ddd;
+ color: #444;
+ border-radius: var(--default-button-border-radius);
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
+ cursor: pointer;
padding: 0.6rem 0.8rem;
text-decoration: none;
font-size: 0.8rem;
- color: #777;
-
display: inline-block;
box-sizing: border-box;
-
- border: 1px solid var(--default-button-border-color);
- background-color: var(--default-button-background-color);
- border-radius: var(--default-button-border-radius);
}
.Button:hover {
- cursor: pointer;
- color: #777;
- border-color: color(var(--default-button-border-color) shade(30%));
- transition: border .3s linear;
- background-color: color(var(--default-button-background-color) shade(2%));
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
+ transition: border .3s linear, box-shadow .3s linear;
}
.Button--primary {
color: #fff;
- border-color: var(--primary-button-border-color);
- background-color: var(--primary-button-bg-color);
+ background: #4A90E2;
+ border: 1px solid #3282DF;
+ transition: background .3s linear, border .3s linear, color .3s linear;
}
.Button--primary:hover {
diff --git a/resources/frontend_client/app/css/query_builder.css b/resources/frontend_client/app/css/query_builder.css
index a0a534f489d63e8296b186289ac446639cb26d4b..1957e6ada666e53cafc1b9cfba88fca4df3860ae 100644
--- a/resources/frontend_client/app/css/query_builder.css
+++ b/resources/frontend_client/app/css/query_builder.css
@@ -188,7 +188,7 @@ body {
color: #B9A2CD;
}
-.QueryBar .ActionButton {
+.QueryBar .Button {
padding: 0.75em 1.25em;
border: 1px dotted #ddd;
box-shadow: none;
@@ -244,82 +244,10 @@ body {
z-index: 100;
}
-.ActionButton {
- text-decoration: none;
- padding: 0.5em 0.75em;
- background: #FBFCFD;
- border: 1px solid #ddd;
- color: #444;
- border-radius: 4px;
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
- cursor: pointer;
-}
-
-.ActionButton:hover {
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
- transition: border .3s linear, box-shadow .3s linear;
-}
-
-.ActionButton--primary {
- color: #fff;
- background: #4A90E2;
- border: 1px solid #3282DF;
- transition: background .3s linear, border .3s linear, color .3s linear;
-}
-
.ActionBar .SettingsButtons {
float: right;
}
-.ActionButton-enter {
- opacity: 0.01;
- tansition: opacity .3s linear;
-}
-.ActionButton-enter-active {
- opacity: 1;
-}
-
-.DimensionButton-enter {
- opacity: 0.01
- transition: opacity .3s linear;
-}
-
-.DimensionButton-enter-active {
- opacity: 1;
-}
-
-.DimensionButton-leave {
- opacity: 1;
- transition: opacity .3s linear;
-}
-
-.DimensionButton-leave-active {
- opacity: 0.01
-}
-
-.ActionBar .SaveModal,
-.ActionBar .SettingsButtons .ActionButton {
- display: inline-block;
-}
-
-.ActionButton-enter {
- margin-top: 100px;
-}
-
-.ActionButton-enter-active {
- margin-top: 0;
- transition: margin .3s linear;
-}
-
-.VisualisationOptions-enter {
- margin-top: 120px;
-}
-
-.VisualisationOptions-enter-active {
- margin-top: 0;
- transition: margin .3s linear .3s;
-}
-
.FilterGroupWrapper {
position: relative;
display: inline-block;
@@ -334,7 +262,7 @@ body {
background: #fff;
}
-.QueryBar .ActionButton {
+.QueryBar .Button {
font-size: 0.85em;
}
@@ -421,8 +349,8 @@ body {
body {
font-size: 1em;
}
- .ActionButton,
- .QueryBar .ActionButton {
+ .Button,
+ .QueryBar .Button {
padding: 1em 2em;
}
.Table-wrapper {
@@ -482,7 +410,7 @@ body {
margin: 1em 0;
}
-.TypeControls .ActionButton {
+.TypeControls .Button {
display: inline-block;
font-size: 0.85em;
margin: 0 0.5em;
diff --git a/resources/frontend_client/app/query_builder/query_builder.js b/resources/frontend_client/app/query_builder/query_builder.js
index e246705ba1e126fffbfd3a4254497aec8b30d587..175e1070233fd8d9f577eb1e983b30151a2d2c47 100644
--- a/resources/frontend_client/app/query_builder/query_builder.js
+++ b/resources/frontend_client/app/query_builder/query_builder.js
@@ -95,12 +95,12 @@ var QueryBuilder = React.createClass({
runButtonText = "Find out!"
}
runButton = (
- <a className="ActionButton ActionButton--primary float-right"onClick={this.props.model.run.bind(this.props.model)}>{runButtonText}</a>
+ <a className="Button Button--primary float-right"onClick={this.props.model.run.bind(this.props.model)}>{runButtonText}</a>
)
filterHtml = (
<div className="clearfix">
- <a className="FilterTrigger float-left ActionButton inline-block mr4" onClick={this.props.model.addFilter.bind(this.props.model)}>
+ <a className="FilterTrigger float-left Button inline-block mr4" onClick={this.props.model.addFilter.bind(this.props.model)}>
<svg className="icon" width="16px" height="16px" viewBox="0 0 16 16" fill="currentColor">
<path d="M6.57883011,7.57952565 L1.18660637e-12,-4.86721774e-13 L16,-4.92050845e-13 L9.42116989,7.57952565 L9.42116989,13.5542169 L6.57883011,15 L6.57883011,7.57952565 Z"></path>
</svg>
@@ -136,7 +136,7 @@ var QueryBuilder = React.createClass({
/>
);
download = (
- <a className="ActionButton inline-block mr1" href={this.props.model.getDownloadLink()} target="_blank">Download data</a>
+ <a className="Button inline-block mr1" href={this.props.model.getDownloadLink()} target="_blank">Download data</a>
);
}
diff --git a/resources/frontend_client/app/query_builder/query_picker.react.js b/resources/frontend_client/app/query_builder/query_picker.react.js
index 30ca549cfe3ecff294f19814e3f57281817f4c9d..cc21dcc58e27a1edf8e1e3917d706648c797a2e9 100644
--- a/resources/frontend_client/app/query_builder/query_picker.react.js
+++ b/resources/frontend_client/app/query_builder/query_picker.react.js
@@ -47,7 +47,7 @@ var QueryPicker = React.createClass({
if(this.props.query.breakout.length < 2) {
addDimensionButton = (
- <a className="ActionButton" onClick={this.props.addDimension}>{addDimensionButtonText}</a>
+ <a className="Button" onClick={this.props.addDimension}>{addDimensionButtonText}</a>
);
}
diff --git a/resources/frontend_client/app/query_builder/saver.react.js b/resources/frontend_client/app/query_builder/saver.react.js
index ccc034162f4e21ccea12d975981c5d3842171d46..e62b0fab055950dc7e0c5118d9c70884513c93f0 100644
--- a/resources/frontend_client/app/query_builder/saver.react.js
+++ b/resources/frontend_client/app/query_builder/saver.react.js
@@ -44,9 +44,9 @@ var Saver = React.createClass({
render: function () {
var buttonClasses = cx({
'SaveButton': true,
- 'ActionButton': true,
+ 'Button': true,
'block': true,
- 'ActionButton--primary': this.state.modalOpen
+ 'Button--primary': this.state.modalOpen
})
var modalClasses = cx({
'SaveModal': true,
diff --git a/resources/frontend_client/app/query_builder/visualization.react.js b/resources/frontend_client/app/query_builder/visualization.react.js
index 1e9300c5a99c7150c06fe0918f357da70af74d92..609cda9872ffb900dac564564d4a876cd36d6cdb 100644
--- a/resources/frontend_client/app/query_builder/visualization.react.js
+++ b/resources/frontend_client/app/query_builder/visualization.react.js
@@ -96,8 +96,8 @@ var QueryVisualization = React.createClass({
], typeControls = types.map(function (type) {
if(this.props.result) {
var buttonClasses = cx({
- 'ActionButton': true,
- 'ActionButton--primary' : (type == this.state.type)
+ 'Button': true,
+ 'Button--primary' : (type == this.state.type)
})
return (
<a className={buttonClasses} href="#" onClick={this._changeType.bind(null, type)}>{type}</a>