Stack:
Next.js
React-Bootstrap
styled-components
Problem
I've got this Bootstrap Button:
After clicking the button and minding my business it looks like this and I have no idea why, or how to change it. Any help is appreciated.
When overriding the :focus state with my default specs the button will look as its supposed to, but now the hover transition does not change.
Button Styling:
The button is styled like this:
import styled from 'styled-components';
import { Button } from 'react-bootstrap';
import { device } from '#/Components/styles';
export const LoginButton = styled(Button)`
border-radius: 5px;
border: solid 2px;
background: #e28215;
color: white;
border-color: white;
font-weight: 900;
font-size: 14px;
padding: 5px 10px;
${device.sm} {
font-size: 16px;
padding: 10px 20px;
}
${device.md} {
font-size: 18px;
padding: 10px 30px;
}
transition: all 0.2s ease-in-out;
-webkit-box-shadow: 0 24px 38px 3px #f7f7f72e, 0 9px 46px 8px #ffffff2b, 0 11px 15px -7px #000;
box-shadow: 0 24px 38px 3px #f7f7f72e, 0 9px 46px 8px #ffffff2b, 0 11px 15px -7px #000;
&:hover {
background: #ffffff;
color: #e28215;
border-color: #e28215;
-webkit-box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12),
0 11px 15px -7px rgba(0, 0, 0, 0.2);
box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12),
0 11px 15px -7px rgba(0, 0, 0, 0.2);
font-size: 16px;
padding: 5px 10px;
${device.sm} {
margin-top: -6px;
font-size: 18px;
padding: 12px 22px;
}
${device.md} {
margin-top: -6px;
font-size: 20px;
padding: 12px 34px;
}
}
`;
I've also put a bit of color customization into my bootstrap via theming like this in my custom.bootstrap.scss:
$theme-colors: (
'primary': #e28215,
'secondary': #83b8f3,
'tertiary': #1575e2,
...
);
Additional Info:
I've also looked into the states and when the button is in the stage state it seems like it is not active or anything:
Related
I have written the code for neumorphism power button and it is working perfectly fine but I'm not able to figure out how to display the status in the console using javascript, i.e., if the power button is on or off.
HTML code:
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<input type="checkbox">
</body>
CSS Code:
body{
background-color: black;
padding: 0;
margin:0;
}
input[type="checkbox"]{
height: 150px;
width: 150px;
-webkit-appearance: none;
box-shadow: -10px -10px 15px rgba(0, 0, 0, 0.5),
10px 10px 15px rgba(0, 0, 0, 0.5);;
position: absolute;
transform: translate(-70%,-70%);
top: 20%;
left: 80%;
border-radius: 50%;
border: 8px solid black;
outline: none ;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
input[type="checkbox"]::after{
font-family:FontAwesome;
content:'\f011';
color: grey;
font-size: 70px;
}
input[type="checkbox"]:checked{
box-shadow: -10px -10px 15px rgba(0, 0, 0, 0.5),
10px 10px 15px rgba(0, 0, 0, 0.5),
inset -10px -10px 15px rgba(0, 0, 0, 0.5),
inset 10px 10px 15px rgba(0, 0, 0, 0.5) ;
}
input[type="checkbox"]:checked::after{
color: green;
}
Add a change event listener to the power button, then check whether it is checked with the checked property:
document.querySelector('input').addEventListener('change', function() {
console.log(`Power button is${this.checked ? "" : " not"} checked`);
})
body {
background-color: black;
padding: 0;
margin: 0;
}
input[type="checkbox"] {
height: 150px;
width: 150px;
-webkit-appearance: none;
box-shadow: -10px -10px 15px rgba(0, 0, 0, 0.5), 10px 10px 15px rgba(0, 0, 0, 0.5);
;
position: absolute;
transform: translate(-70%, -70%);
top: 20%;
left: 80%;
border-radius: 50%;
border: 8px solid black;
outline: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
input[type="checkbox"]::after {
font-family: FontAwesome;
content: '\f011';
color: grey;
font-size: 70px;
}
input[type="checkbox"]:checked {
box-shadow: -10px -10px 15px rgba(0, 0, 0, 0.5), 10px 10px 15px rgba(0, 0, 0, 0.5), inset -10px -10px 15px rgba(0, 0, 0, 0.5), inset 10px 10px 15px rgba(0, 0, 0, 0.5);
}
input[type="checkbox"]:checked::after {
color: green;
}
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<input type="checkbox">
</body>
Instead of posting answer I will try to guide you:
Think how will the state change - only when your input is changing. Initially it will be off.
On document load, attach an event handler for onchange on the input. Display the value using : event.target.checked . Here event is your change event.
How do i translate tab 1 Neumorphic css to tab 2 when I click on tab 2 like the example below like sliding from tab 1 to tab 2?
https://dribbble.com/shots/10805627-Neumorphic-Tab
import styled from 'styled-components';
const PostsTabWrapper = styled.div`
.react-tabs {
width: 100%;
font-size: 20px;
font-weight: 500;
#media (max-width: 768px) {
font-size: 16px;
}
}
.react-tabs__tab-list {
margin: 0 25px 20px 25px;
background: 3af740;
border-radius: 10px;
padding: 10px;
box-shadow:
inset 0 0 15px rgba(55, 84, 170,0),
inset 0 0 20px rgba(255, 255, 255,0),
7px 7px 15px rgba(55, 84, 170,.15),
-7px -7px 20px rgba(255, 255, 255,1),
inset 0px 0px 4px rgba(255, 255, 255,.2);
}
.react-tabs__tab {
display: inline-block;
position: relative;
list-style: none;
padding: 16px 24px;
cursor: pointer;
}
.react-tabs__tab--selected {
border-radius: 10px;
box-shadow:
inset 7px 7px 15px rgba(55, 84, 170,.15),
inset -7px -7px 20px rgba(255, 255, 255,1),
0px 0px 4px rgba(255, 255, 255,.2);
transition: 0.4s ease-in-out;
}
.react-tabs__tab--disabled {
// color: GrayText;
cursor: default;
}
.react-tabs__tab:focus {
// box-shadow: 0 0 5px hsl(208, 99%, 50%);
// border-color: hsl(208, 99%, 50%);
// outline: none;
}
.react-tabs__tab:focus:after {
content: "";
position: absolute;
height: 5px;
left: -4px;
right: -4px;
bottom: -5px;
// background: #fff;
}
.react-tabs__tab-panel {
display: none;
}
.react-tabs__tab-panel--selected {
display: block;
}
`;
export default PostsTabWrapper
check when you click on the input then you do translateX(distance)
for exemple :
input{
&.active {
background: #7395D2;
color: #7395D2;
#swipe{
transform: translateX(120px);
background: #C6CEF6;
}
}
}
I am having trouble with an input of type file on IE11.
IE11 displays the input field as two tab-able pseudo elements (text/button).
I found the class ::-ms-browse which lets me set the button to display: none, but for some reason it is still tab-able.
To reproduce:
Click in text field
Tab into input type file (will only do two tabs in IE11)
The goal is to hide the input field and display a label as a button instead of the input field. For that it would be awkward to have to tab twice for one button.
input[type="file"]::-ms-browse {
display: none;
visibility: hidden;
}
input[type="file"]+label.fake-file-upload {
background: $white;
color: #999;
font-family: "Glober", sans-serif;
font-weight: 600;
font-size: 1.5rem;
padding: 0.75rem 4rem;
letter-spacing: 0.25rem;
cursor: pointer;
display: table;
}
input[type="file"]:focus+label.fake-file-upload {
outline: 2px dotted #444;
outline-offset: 5px;
border-spacing: 5px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
<input type="text" ><br><br>
<input type="file" id="upload-photo" name="photo" required>
<label for="upload-photo" class="fake-file-upload">DURCHSUCHEN</label>
After playing a bit with it I might have an idea :
If you want to be able to prevent the user from tabbing into the input, make the label tabbable and clickable, I would do this :
input[type="file"]::-ms-browse {
display: none;
visibility: hidden;
}
input[type="file"]+label.fake-file-upload {
background: $white;
color: #999;
font-family: "Glober", sans-serif;
font-weight: 600;
font-size: 1.5rem;
padding: 0.75rem 4rem;
letter-spacing: 0.25rem;
cursor: pointer;
display: table;
}
input[type="file"]:focus+label.fake-file-upload {
outline: 2px dotted #444;
outline-offset: 5px;
border-spacing: 5px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
<input type="text" ><br><br>
<input type="file" id="upload-photo" name="photo" required tabindex="-1">
<label for="upload-photo" class="fake-file-upload" tabindex="0">DURCHSUCHEN</label>
$('.fake-file-upload').keypress(function (e) {
var key = e.which;
if(key == 13) // the enter key code
{
$('.fake-file-upload').trigger("click");
return false;
}
});
Test case : https://jsfiddle.net/keystfjw/29/
So I have a script that uses the typeahead to pull up data from my database:
<script type="text/javascript">
$(document).ready(function() {
$("#navPersonSearch").typeahead({
name: 'people',
remote: 'name_autocomplete/?q=%QUERY'
})
.keydown(function(e) {
if (e.keyCode === 13) {
$("form").trigger('submit');
}
});
});
</script>
This is what my form looks like without the script
And this is what it looks like with the script:
This is the html on the page (using bootstrap 3):
<div class="jumbotron">
<div class="container">
<h1 align="center">Search</h1>
<div class="row">
<div class="col-lg-12">
<form id="search_form" align="center" action="/search/" class="form-inline" method ="get" role="form">
<input id="navPersonSearch" class="input form-control" type="text" name="q"
placeholder="Search for Actor/Actress"
autocomplete="off" >
</form>
</div> <!-- /.col -->
</div> <!-- /.row -->
</div> <!-- /.container -->
</div> <!-- /.jumbotron -->
I'm not sure why the script is messing with my form's layout.
After some research, it looks like this is a known issue with Bootstrap 3: https://github.com/twitter/typeahead.js/issues/378
People have made some fixes to it, but the fixes aren't completely universal, you'd have to tweak the properties yourself to actually get it to work properly. The fix that I'm starting off with is this: http://jsfiddle.net/ragulka/Dy9au/1/
.twitter-typeahead {
width: 100%;
position: relative;
}
.twitter-typeahead .tt-query,
.twitter-typeahead .tt-hint {
margin: 0;
width: 100%;
color: #555555;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #cccccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
.has-warning .twitter-typeahead .tt-query,
.has-warning .twitter-typeahead .tt-hint {
border-color: #c09853;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-error .twitter-typeahead .tt-query,
.has-error .twitter-typeahead .tt-hint {
border-color: #b94a48;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-success .twitter-typeahead .tt-query,
.has-success .twitter-typeahead .tt-hint {
border-color: #468847;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.twitter-typeahead .tt-query:focus,
.twitter-typeahead .tt-hint:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
.has-warning .twitter-typeahead .tt-query:focus,
.has-warning .twitter-typeahead .tt-hint:focus {
border-color: #a47e3c;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e;
}
.has-error .twitter-typeahead .tt-query:focus,
.has-error .twitter-typeahead .tt-hint:focus {
border-color: #953b39;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
}
.has-success .twitter-typeahead .tt-query:focus,
.has-success .twitter-typeahead .tt-hint:focus {
border-color: #356635;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
}
.twitter-typeahead .tt-hint {
color: #a1a1a1;
z-index: 1;
border: 1px solid transparent;
}
.twitter-typeahead .tt-query {
z-index: 2;
}
.twitter-typeahead .tt-query,
.twitter-typeahead .tt-hint {
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.428571429;
}
.twitter-typeahead .input-sm.tt-query,
.twitter-typeahead .hint-sm.tt-hint {
border-radius: 3px;
}
.twitter-typeahead .input-lg.tt-query,
.twitter-typeahead .hint-lg.tt-hint {
border-radius: 6px;
}
.input-group .twitter-typeahead:first-child .tt-query,
.input-group .twitter-typeahead:first-child .tt-hint {
border-radius: 4px 0 0 4px !important;
}
.input-group .twitter-typeahead:last-child .tt-query,
.input-group .twitter-typeahead:last-child .tt-hint {
border-radius: 0 4px 4px 0 !important;
}
.input-group.input-group-sm .twitter-typeahead:first-child .tt-query,
.input-group.input-group-sm .twitter-typeahead:first-child .tt-hint {
border-radius: 3px 0 0 3px !important;
}
.input-group.input-group-sm .twitter-typeahead:last-child .tt-query,
.input-group.input-group-sm .twitter-typeahead:last-child .tt-hint {
border-radius: 0 3px 3px 0 !important;
}
.input-sm.tt-query,
.hint-sm.tt-hint,
.input-group.input-group-sm .tt-query,
.input-group.input-group-sm .tt-hint {
height: 30px;
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
}
.input-group.input-group-lg .twitter-typeahead:first-child .tt-query,
.input-group.input-group-lg .twitter-typeahead:first-child .tt-hint {
border-radius: 6px 0 0 6px !important;
}
.input-group.input-group-lg .twitter-typeahead:last-child .tt-query,
.input-group.input-group-lg .twitter-typeahead:last-child .tt-hint {
border-radius: 0 6px 6px 0 !important;
}
.input-lg.tt-query,
.hint-lg.tt-hint,
.input-group.input-group-lg .tt-query,
.input-group.input-group-lg .tt-hint {
height: 45px;
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
}
.tt-dropdown-menu {
width: 100%;
min-width: 160px;
margin-top: 2px;
padding: 5px 0;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
*border-right-width: 2px;
*border-bottom-width: 2px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
.tt-suggestion {
display: block;
padding: 3px 20px;
}
.tt-suggestion.tt-is-under-cursor {
color: #fff;
background-color: #0081c2;
background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
background-image: -o-linear-gradient(top, #0088cc, #0077b3);
background-image: linear-gradient(to bottom, #0088cc, #0077b3);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
}
.tt-suggestion.tt-is-under-cursor a {
color: #fff;
}
.tt-suggestion p {
margin: 0;
}
I've made a navigation bar/menu for my website, and I have customised the colors in the CSS. It works fine on IE, Chrome and Firefox. But when it comes to Safari, the navigation bar shows in its default colors! If anyone can help me with this, I would appreciate it greatly.
Internet Explorer, Firefox, Chrome:
http://tinypic.com/view.php?pic=2gtygrc&s=5
Safari:
http://i39.tinypic.com/2eltloi.png
The HTML:
<li>Hjem</li>
<li>Portfolio</li>
<li>Om</li>
<li>Andet</li>
<li>Kontakt</li>
The CSS:
nav ul {
margin: 80px 0 20px 0;
padding: 0em;
float: left;
list-style: none;
background: #1A1A1A;
background: rgba(26,26,26,.2);
-moz-border-radius: .5em;
-webkit-border-radius: .5em;
border-radius: .5em;
-moz-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.8) inset;
-webkit-box-shadow: 0 1px 0 rgba(26,26,26,.2), 0 2px 1px rgba(0,0,0,.8) inset;
box-shadow: 0 1px 0 rgba(26,26,26,.2), 0 2px 1px rgba(0,0,0,.8) inset;
}
nav li {
float:left;
}
nav a {
float:left;
padding: .8em 1.5em;
text-decoration: none;
color: #ffffff;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
font: bold 1.1em/1 'trebuchet MS', Arial, Helvetica;
letter-spacing: 1px;
text-transform: uppercase;
border-width: 1px;
border-style: solid;
border-color: #d6d6d6 #d6d6d6 #d6d6d6 #d6d6d6;
background: #000000;
background: -moz-linear-gradient(#f5f5f5, #c1c1c1);
background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#c1c1c1));
background: -webkit-linear-gradient(#f5f5f5, #c1c1c1);
background: -o-linear-gradient(#f5f5f5, #c1c1c1);
background: -ms-linear-gradient(#f5f5f5, #c1c1c1);
background: linear-gradient(#484747, #2c2c2c);
}
nav a:hover, nav a:focus {
outline: 0;
color: #fff;
text-shadow: 0 1px 0 rgba(0,0,0,.2);
background: #000000;
background: -moz-linear-gradient(#fac754, #f8ac00);
background: -webkit-gradient(linear, left top, left bottom, from(#fac754), to(#f8ac00));
background: -webkit-linear-gradient(#fac754, #f8ac00);
background: -o-linear-gradient(#f5f5f5, #f5f5f5);
background: -ms-linear-gradient(#f5f5f5, #ff0000);
background: linear-gradient(#e20000, #720000);
}
nav a:active {
-moz-box-shadow: 0 0 5px 5px rgba(0,0,0,.3) inset;
-webkit-box-shadow: 0 0 5px 5px rgba(0,0,0,.3) inset;
box-shadow: 0 0 5px 5px rgba(0,0,0,.3) inset;
}
nav li:first-child a {
border-left: 0;
-moz-border-radius: 4px 0 0 4px;
-webkit-border-radius: 4px 0 0 4px;
border-radius: 4px 0 0 4px;
}
nav li:last-child a {
border-right: 0;
-moz-border-radius: 0 4px 4px 0;
-webkit-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0;
}
}
nav ul {
margin: 80px 0 20px 0;
padding: 0em;
float: left;
list-style: none;
background: #1A1A1A;
background: rgba(26,26,26,.2);
-moz-border-radius: .5em;
-webkit-border-radius: .5em;
border-radius: .5em;
-moz-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.8) inset;
-webkit-box-shadow: 0 1px 0 rgba(26,26,26,.2), 0 2px 1px rgba(0,0,0,.8) inset;
box-shadow: 0 1px 0 rgba(26,26,26,.2), 0 2px 1px rgba(0,0,0,.8) inset;
}
You've got background twice once as hex the other as rgba, I think you only need one.