Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Move all Button CSS from theme_base.css to cs-defaults.css #68

Open
TheWebTech opened this issue May 14, 2019 · 0 comments
Open

Move all Button CSS from theme_base.css to cs-defaults.css #68

TheWebTech opened this issue May 14, 2019 · 0 comments
Labels
enhancement New feature or request good first issue Good for newcomers

Comments

@TheWebTech
Copy link
Owner

TheWebTech commented May 14, 2019

Someone previously contributed this CSS for Flat buttons. Let's move it into Crankshaft itself. (cs-defaults.css)
We likely will need to make some changes to this but lets get this moved over first.

Delete the reference to these buttons in theme_base.css that will help us know we've stripped that part out.

/* Flat UI Buttons
========================================================================== */
.btn {
border-radius: 5px;
padding: 15px 25px;
font-size: 22px;
text-decoration: none;
margin: 20px;
color: #fff;
position: relative;
display: inline-block;
}
.btn:active {
transform: translate(0px, 5px);
-webkit-transform: translate(0px, 5px);
box-shadow: 0px 1px 0px 0px;
}
.blue {
background-color: #55acee;
box-shadow: 0px 5px 0px 0px #3C93D5;
}
.blue:hover {
background-color: #6FC6FF;
}
.green {
background-color: #2ecc71;
box-shadow: 0px 5px 0px 0px #15B358;
}
.green:hover {
background-color: #48E68B;
}
.red {
background-color: #e74c3c;
box-shadow: 0px 5px 0px 0px #CE3323;
}
.red:hover {
background-color: #FF6656;
}
.purple {
background-color: #9b59b6;
box-shadow: 0px 5px 0px 0px #82409D;
}
.purple:hover {
background-color: #B573D0;
}
.orange {
background-color: #e67e22;
box-shadow: 0px 5px 0px 0px #CD6509;
}
.orange:hover {
background-color: #FF983C;
}
.yellow {
background-color: #f1c40f;
box-shadow: 0px 5px 0px 0px #D8AB00;
}
.yellow:hover {
background-color: #FFDE29;
}

Kinda related to #9

and is a sub-task of #35

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request good first issue Good for newcomers
Projects
None yet
Development

No branches or pull requests

1 participant