I have designed an input button in SCSS
.editButton /* button in edit window */
{
font-weight: bold;
font-size: 12px;
width: auto;
height: auto;
padding: 2px 5px 2px 5px;
border: 0.1em solid var(--edit-button-border-color);
color: var(--edit-button-text-color);
background: var(--edit-button-bg-color);
border-radius: 4px;
.fullWidth
{
width: 100% !important;
}
}
which is leading into css file
.editButton {
font-weight: bold;
font-size: 12px;
width: auto;
height: auto;
padding: 2px 5px 2px 5px;
border: 0.1em solid var(--edit-button-border-color);
color: var(--edit-button-text-color);
background: var(--edit-button-bg-color);
border-radius: 4px;
}
.editButton .fullWidth {
width: 100% !important;
}
My HTML
<input type = "button" id = "pmLettersEditFilterSend" class = "editButton fullWidth" value = "...">
But the fullWidth is not assigned to the element. Webdevelopers output:
<input type="button" id="pmLettersEditFilterSend" class="editButton fullWidth" value="Create Letter">
and the Filter styles:
element {
}
.editButton {
font-weight: bold;
font-size: 12px;
width: auto;
height: auto;
padding: 2px 5px 2px 5px;
border: 0.1em solid var(--edit-button-border-color);
color: var(--edit-button-text-color);
background: var(--edit-button-bg-color);
border-radius: 4px;
}
.pmLettersFilterFilterTitleDiv {
text-align: left;
font-weight: bold;
font-size: 12px;
color: var(--filter-accordeon-button-text-color);
}
#pmLettersEditTemplateDiv {
font-weight: bold;
font-size: 12px;
}
So what am I doing wrong?
It's because you are actually selecting a child element instead of the same element in your scss. It should be:
.editButton /* button in edit window */
{
font-weight: bold;
font-size: 12px;
width: auto;
height: auto;
padding: 2px 5px 2px 5px;
border: 0.1em solid var(--edit-button-border-color);
color: var(--edit-button-text-color);
background: var(--edit-button-bg-color);
border-radius: 4px;
&.fullWidth
{
width: 100% !important;
}
}
Related
I have a requirement of displaying the image/icon on top of the modal box in a semicircle. Though I have achieved it with the help of below code, but the only issue is whenever my form in the modal box goes for a validation check, displaying any error, my semicircle doesn't get adjusted accordingly, rather it stays at its position. Here, I have attached the screen shot of what exactly I am looking for and HTML/css code I have used to display the semicircle with image/icon at the top.
.modal {
font-family: Avenir-Medium;
font-size: 16px;
font-weight: 900;
font-style: normal;
font-stretch: normal;
display: block;
/*Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.3);
/* Black w/ opacity */
-webkit-animation-name: slideIn;
/* Fade in the background */
-webkit-animation-duration: 2.0s;
/* Fade in the background */
;
}
/* Modal Content */
.modal-content {
position: fixed;
bottom: 0;
background-color: #fefefe;
width: 92%;
left: 14px;
-webkit-animation-name: fadeIn;
-webkit-animation-duration: 0.5s;
border-radius: 16px 16px 0px 0px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border: none;
top: auto;
}
.modal-wrapper {
line-height: 45px;
border: 1px solid #e7e9ea;
border-radius: 6px 6px 0px 0px;
background-color: white;
margin: auto;
}
.modal-wrapper::after {
background: url("../../../../images/mobile/img-payment_38.png") no-repeat 22px 10px;
background-size: 50%;
background-color: #fff;
content: '';
width: 78px;
height: 45px;
position: absolute;
left: 0;
right: 0;
margin: auto;
border-radius: 78px 78px 0 0;
border-left: 1px solid #e7e9ea;
border-top: 1px solid #e7e9ea;
border-right: 1px solid #e7e9ea;
border-bottom: 3px solid white;
bottom: 300px;
}
.close-btn {
position: absolute;
vertical-align: top;
top: 4px;
left: 320px;
width: 18px;
height: 18px;
}
.container-div-creditCard {
margin: 12px 20px 0px 20px;
}
.container-div-creditCard>img {
position: absolute;
bottom: 154px;
right: 30px;
}
.credit-card-modal-label {
font-family: AvenirHeavy;
font-size: 13px;
color: #1d3444;
text-align: center;
font-weight: 200;
height: 24px;
margin-left: 31px;
}
.input-modal {
width: 100%;
height: 44px;
}
.input-spacing {
margin-top: 15px;
}
.credit-input-modal {
border: solid 1px #e7e9ea;
border-radius: 5px;
font-family: Avenir-Book;
font-size: 14px;
font-weight: normal;
color: #8589a1;
line-height: initial;
padding: 13px 42px 12px 15px;
}
.credit-expiry-input-modal {
padding: 13px 27px 12px 10px;
border: solid 1px #e7e9ea;
border-radius: 5px;
font-family: Avenir-Book;
font-size: 14px;
font-weight: normal;
color: #8589a1;
display: inline-block;
line-height: initial;
width: 65%;
height: 44px;
}
.credit-cvc-input-modal {
width: 30%;
padding: 17px 5px 12px 10px;
border: solid 1px #e7e9ea;
border-radius: 5px;
font-family: Avenir-Book;
font-size: 14px;
font-weight: normal;
color: #8589a1;
line-height: initial;
height: 44px;
}
.cvvDisc {
-webkit-text-security: disc;
}
.credit-submit-button {
width: 100%;
padding: 13px;
margin-top: 15px;
border: solid 1px #e7e9ea;
border-radius: 5px 5px 5px 5px;
background: linear-gradient(to right, #e32490, #ed1a3d);
color: white;
margin-bottom: 20px;
font-family: Avenir-Book;
font-weight: normal;
font-size: 14px;
line-height: initial;
}
.errorMsg {
font-family: Avenir-Book;
font-weight: normal;
color: #ED1A3D;
font-size: 12px;
}
<div id="modalCCDetails" class="modal">
<div class="modal-content modal-wrapper">
<div class="container-div-creditCard">
<label class="credit-card-modal-label">ENTER YOUR CREDIT CARD DETAILS</label>
<input name="cc_name" class="input-modal credit-input-modal" type="text" placeholder="Name printed on Credit Card" onChange={this.handleUserInput} />
<span class="errorMsg"></span>
<input name="cc_number" class="input-modal credit-input-modal input-spacing" type="tel" maxLength="16" onKeyPress={(e)=> this.handleCCOnKeyPress(e)} placeholder="16 digit credit card number" />
<span class="errorMsg"></span>
<input name="cc_expDate" class="credit-expiry-input-modal" type="text" placeholder="Expiry MM-YYYY" />
<div class="device-divider" />
<input name="cc_cvc" class="credit-cvc-input-modal cvvDisc" type="tel" placeholder="CVC" maxLength="3" />
<span class="errorMsg"></span>
</div>
<button class="credit-submit-button">Submit Payment</button>
</div>
</div>
</div>
NOTE: This is a mobile view screenshot
Just adjust your css code into something like this:
.modal-wrapper::after {
background: url("../../../../images/mobile/img-payment_38.png") no-repeat 22px 10px;
background-size: 50%;
background-color: #fff;
content: '';
width: 78px;
height: 45px;
position: absolute;
left: 0;
right: 0;
margin: auto;
border-radius: 78px 78px 0 0;
border: 1px solid #e7e9ea;
border-bottom: 3px`enter code here` solid white;
top: -48px;
}
Just remove the bottom: 300px; and replace with top: -48px; or any value that you want.
please add top:-15px; and removed bottom:300px; in class .modal-wrapper::after { top: -15px; }, u will see the image move up
This question already has answers here:
I want to add a border to my button on hover event without moving the button or anything [duplicate]
(7 answers)
Closed 6 years ago.
My idea is to add a colored border to the submit button when the user hovers it.
body div:first-child {
padding: 10px 20px;
background-color: #dedede;
margin-top: 50px;
margin-left: 300px;
width: 120px;
height: 80px;
border-radius: 8px;
}
button {
border-radius: 4px;
padding: 5px 10px;
}
button:hover {
border: 6px solid crimson;
font-weight: 800;
background-color: white;
color: crimson;
}
<div class="container">
<button>SUBMIT</button>
<div>Please notice that ...</div>
</div>
But the immediately following text then becomes shifted downwards.
How can I get rid of these "Jumping" text while simultaneously having the border?
You need to define transparent border by default on button and change border-color on hover. Further avoid changing font-weight property on hover as well as it will also expand the width and height of button and it will jump on hover.
body div:first-child {
padding: 10px 20px;
background-color: #dedede;
margin-top: 50px;
margin-left: 300px;
width: 120px;
height: 80px;
border-radius: 8px;
}
button {
border: 6px solid transparent;
font-weight: 800;
border-radius: 4px;
padding: 5px 10px;
}
button:hover {
border-color: crimson;
background-color: white;
color: crimson;
}
<div class="container">
<button>SUBMIT</button>
<div>Please notice that ...</div>
</div>
Add "margin" attributes to your "button" CSS like so:
button {
border-radius: 4px;
padding: 5px 10px;
margin: 4px 0;
}
button:hover {
border: 6px solid crimson;
font-weight: 800;
background-color: white;
color: crimson;
margin: 0;
}
From Stop an element moving with padding on hover.
Just to give an alternative you could use outline to set the "border" on hover.
body div:first-child {
padding: 10px 20px;
background-color: #dedede;
margin-top: 50px;
margin-left: 300px;
width: 120px;
height: 80px;
border-radius: 8px;
}
button {
border: 0;
border-radius: 4px;
padding: 5px 10px;
margin: 5px 0;
}
button:hover {
outline: 6px solid crimson;
font-weight: 800;
background-color: white;
color: crimson;
}
<div class="container">
<button>SUBMIT</button>
<div>Please notice that ...</div>
</div>
Another option:
body div:first-child {
padding: 10px 20px;
background-color: #dedede;
margin-top: 50px;
margin-left: 300px;
width: 120px;
height: 80px;
border-radius: 8px;
}
button {
border-radius: 4px;
padding: 5px 10px;
margin: 6px 0;
border-width: 2px;
border-style: outset;
border-color: buttonface;
}
button:hover {
border-width: 6px;
border-style: solid;
border-color: crimson;
font-weight: 800;
margin: 2px 0;
background-color: white;
color: crimson;
}
<div class="container">
<button>SUBMIT</button>
<div>Please notice that ...</div>
</div>
Here are some possibilities:
Style the button dimensions (padding/margin/border) with the same px/em values like it's :hover state
set the button position to absolute/fixed
Use a fix height in a parent div
check now
body div:first-child {
padding: 10px 20px;
background-color: #dedede;
margin-top: 50px;
margin-left: 300px;
width: 120px;
height: 80px;
border-radius: 8px;
}
button {
border-radius: 4px;
padding: 5px 10px;
border: 6px solid transparent;
}
button:hover {
border: 6px solid crimson;
font-weight: 800;
background-color: white;
color: crimson;
}
<div class="container">
<button>SUBMIT</button>
<div>Please notice that ...</div>
</div>
Try adding height to button
body div:first-child {
padding: 10px 20px;
background-color: #dedede;
margin-top: 50px;
margin-left: 300px;
width: 120px;
height: 80px;
border-radius: 8px;
}
button {
border-radius: 4px;
padding: 5px 10px;
height:40px
}
button:hover {
border: 6px solid crimson;
font-weight: 800;
background-color: white;
color: crimson;
}
<div class="container">
<button>SUBMIT</button>
<div>Please notice that ...</div>
</div>
Add padding of the same size as the border to the button, and remove it on hover.
Mention the width and height to the button and remove the font-weight to avoiding a shifting of the element when hover the elements. Check below code.
body div:first-child {
padding: 10px 20px;
background-color: #dedede;
margin-top: 50px;
margin-left: 300px;
width: 120px;
height: 80px;
border-radius: 8px;
}
button {
border-radius: 4px;
padding: 5px 10px;
height:50px;
width:100px;
}
button:hover {
/*font-weight: 800;
background-color: white;*/
border: 6px solid crimson;
color: crimson;
}
<div class="container">
<button>SUBMIT</button>
<div>Please notice that ...</div>
</div>
body div:first-child {
padding: 10px 20px;
background-color: #dedede;
margin-top: 50px;
margin-left: 300px;
width: 120px;
height: 80px;
border-radius: 8px;
}
button {
border-radius: 4px;
padding: 5px 10px;
height:50px;
width:100px;
}
button:hover {
border: 6px solid crimson;
background-color: white;
color: crimson;
}
<div class="container">
<button>SUBMIT</button>
<div>Please notice that ...</div>
</div>
I am trying to disable/remove the border or the blue glow in the text box.
.user {
width: 300px;
height: 50px;
background-color: rgba(222,222,222,.0);
border: 2px solid rgba(222,222,222,0);
padding-left: 5px;
padding-right: 5px;
font-family: arial;
margin-bottom: -8px;
color: #ffffff;
}
.user::-webkit-input-placeholder {
color: #ffffff;
}
.password {
width: 300px;
height: 50px;
border: #e9e9e9;
background-color: rgba(222,222,222,.0);
border: 2px solid rgba(222,222,222,0);
padding-left: 5px;
padding-right: 5px;
font-family: arial;
margin-top: -8px;
}
.password::-webkit-input-placeholder {
color: #ffffff;
}
The form part:
<form method="post" class="login_form">
<div style="font-size: 20px; font-family: bebasregular; text-align: right; color: #ffffff;">Login</div>
<input type="text" name="user" class="user" id="user" placeholder="Username or Email"/>
<hr/>
<input type="password" name="password" class="password" placeholder="Password"/><br/>
<input type="submit" name="login_btn" class="login_btn" value="Login"/>
</form>
Now, what I'm trying to make is that the two text boxes in the form will become transparent, even they're in focus.
i tried this code below, but it doesn't work.
.user{
width: 300px;
height: 50px;
background-color: rgba(222,222,222,.0);
border: 2px solid rgba(222,222,222,0);
padding-left: 5px;
padding-right: 5px;
font-family: arial;
margin-bottom: -8px;
color: #ffffff;
}
.user:focus{
width: 300px;
height: 50px;
background-color: rgba(222,222,222,.0);
border: 2px solid rgba(222,222,222,0);
padding-left: 5px;
padding-right: 5px;
font-family: arial;
margin-bottom: -8px;
color: #ffffff;
}
.user::-webkit-input-placeholder {
color: #ffffff;
}
.password {
width: 300px;
height: 50px;
border: #e9e9e9;
background-color: rgba(222,222,222,.0);
border: 2px solid rgba(222,222,222,0);
padding-left: 5px;
padding-right: 5px;
font-family: arial;
margin-top: -8px;
}
.password:focus {
width: 300px;
height: 50px;
border: #e9e9e9;
background-color: rgba(222,222,222,.0);
border: 2px solid rgba(222,222,222,0);
padding-left: 5px;
padding-right: 5px;
font-family: arial;
margin-top: -8px;
}
.password::-webkit-input-placeholder {
color: #ffffff;
}
You can remove this by adding: outline: none; to the .user class (or any element that may receive the outline):
JS Fiddle
Sidenote:
I think its worth noting that on your hover states, you only need to specify the properties that change on that that state. For instance, if the element text color is white initially, and you want it to still be white on hovered state, you can omit that on the hover state.
The bluish glow is coming from the default outline styles. To remove it try:
input {
outline: none;
}
This will remove it from the user, password, and when the button is pressed.
JS Fiddle
use
input {
outline: none;
}
or change
border: 2px solid rgba(222,222,222,0);
to
border: 0px;
I would like to move the circle down by 15px with CSS as an image below. I've attempted with padding-bottom or margin-bottom in the .circle class, yet it did work in another way as making the circle longer than itself.
HTML:
<table id="showRoom">
<tr class="box_shadow">
<td>
<div class="news_column1">
<a target="_blank" href="http://google.com">
<span class="circle">P1</span>
<span class="imgswap">Showroom 1</span>
<div class="news_img">
<div>
<p>Book Now!</p>
</div>
</div>
</a>
</div>
</td>
</tr>
</table>
CSS:
body {
background-color: #F6F6F6;
}
#showRoom {
margin-left: 10px;
margin-top: 20px;
width: auto;
border-collapse: collapse;
}
table td {
padding: 0;
}
table .box_shadow {
background-color: #FFF;
font-size: 18px;
line-height: 20px;
text-align: center;
font-weight: normal;
font-family: 'Scada', sans-serif;
display: block;
-webkit-box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.3);
-moz-box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.3);
box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.3);
}
table tr .text_plant_address {
background-color: #FFF;
width: 200px;
height: 200px;
line-height: 20px;
text-align: center;
font-weight: normal;
font-family: 'Scada', sans-serif;
margin: 0;
padding: 0;
}
table tr td span {
height: 195px;
width: auto;
}
table tr td div {
width: 200px;
height: 200px;
position: relative;
}
table tr td a {
text-decoration: none;
}
table tr td .text_plant {
border-bottom: 1px solid #D0D0D0;
font-family: ballpark_weiner, Arial;
font-size: 26px;
letter-spacing: 1px;
padding: 0 15px;
}
table tr td .text_address {
font-size: 10px;
font-family: Arial;
display: block;
position: relative;
height: auto;
margin-top: 5px;
}
.news_column1 {
background-color: #FF7F7F;
/*background-color: #FFF;*/
/*border-radius: 15px;*/
}
table tr td div:hover {
cursor: pointer;
}
.news_img {
width: 200px;
height: 70px;
text-align: center;
background-color: rgba(0, 0, 0, 0.4);
font-family: 'Times New Roman';
font-weight: bold;
letter-spacing: 0.5px;
display: none;
position: absolute;
bottom: 0;
left: 0;
opacity: 0.95;
/*border-radius: 0 0 15px 15px;*/
}
.news_img div {
width: 200px;
height: 10px;
margin: 0;
padding: 0;
display: table-cell;
vertical-align: middle;
}
.news_img div p {
display: block;
margin-top: 25px;
font-size: 17px;
color: #FFF;
transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
/* IE 9 */
-webkit-transform: rotate(-10deg);
/* Opera, Chrome, and Safari */
}
span.circle {
width: 100px;
height: 100px;
font-size: 30px;
color: #fff;
line-height: 100px;
text-align: center;
background-color: #111111;
opacity: 0.3;
display: block;
margin: 0 50px 0 50px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
}
span.imgswap {
display: block;
opacity: 0.5;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
font-family: sans-serif;
font-size: 20px;
padding-top: 10px;
font-family: Stark;
letter-spacing: 0.5px;
}
JSFIDDLE: http://jsfiddle.net/huydq91/rB5hX/7/
Just need to add padding to;
table tr td div {
width: 200px;
height: 200px;
position: relative;
padding-top:15px;
}
UPDATED JS FIDDLE
One solution is to add a padding-top:15px; to div.news_column1 as in this JFiddle snippet.
A question: are you stuck with the markup or do you have freedom to change it?
Make Changes in following class. It will come circle below
table tr td a {
text-decoration: none;
display: block;
padding: 40px 0 0 0;
}
and Reduce the height in following class
table tr td span
{
//height:''
}
I need to make a box using css containing arc as shown in image . I want to do this using pure CSS. I am able to make arcs but not able to draw line. Here is my html and css code.
<style type="text/css">
.left_arc{
border-bottom: 1px solid #D0BFA6;
border-radius: 0 0 360px 0;
border-right: 1px solid #D0BFA6;
float: left;
height: 11px;
padding-top: 1px;
width: 11px;
}
.right_arc{
border-bottom: 1px solid #D0BFA6;
border-left: 1px solid #D0BFA6;
border-radius: 0 0 0 360px;
float: left;
height: 11px;
padding-top: 1px;
width: 11px;
}
.text_arc {
background: none repeat scroll 0 0 #FEEEEA;
border-top: 1px solid;
color: #A29061;
float: left;
font-family: times new roman;
font-size: 16px;
font-style: italic;
letter-spacing: 1px;
padding-left: 18px;
padding-top: 6px;
text-transform: uppercase;
width: 88px;
}
</style>
<div class="main_style">
<div class="left_arc"></div>
<div class="text_arc">Canada</div>
<div class="right_arc"></div>
</div>
Here is the output of my code.
LIVE DEMO
Simplify your HTML markup
and create crazy things using the CSS pseudo :before and :after selectors
HTML
<div class="main_style">
<div class="text">Canada</div>
</div>
<div class="main_style">
<div class="text">USA</div>
</div>
CSS:
.main_style {
background: none repeat scroll 0 0 #FEEEEA;
font: italic normal normal 16px/1em Times, "Times New Roman", serif;
text-transform: uppercase;
text-align:center;
letter-spacing: 1px;
color: #A29061;
position:relative;
overflow:hidden;
float: left;
}
.text{
border: 1px solid #D0BFA6;
padding:8px 20px 4px;
}
.main_style:before, .main_style:after{
content:'';
position:absolute;
top:-13px;
width:24px;
height:24px;
background:#fff;
border: 1px solid #D0BFA6;
border-radius: 42px;
}
.main_style:before{
left:-13px;
}
.main_style:after{
right:-13px;
}
You can just create a border with negative radius for only the top corners. See this post for more info...
Add extra Corner class to your left_arc and right_arc divs.
That will be shown in this JSBin.
.text_arc {
background: none repeat scroll 0 0 #FEEEEA;
border-top: 1px solid;
color: #A29061;
float: left;
font-family: times new roman;
font-size: 16px;
font-style: italic;
letter-spacing: 1px;
padding-left: 18px;
padding-top: 6px;
text-transform: uppercase;
width: 100px;
}
.corner {
position: absolute;
height: 10px;
width: 10px;
border: 1px solid #333;
background-color: #fff;
}
.left_arc {
top: -1px;
left: -1px;
border-radius: 0 0 100% 0;
border-width: 0 1px 1px 0;
}
.right_arc {
top: -1px;
left: 110px;
border-radius: 0 0 0 100%;
border-width: 0 0 1px 1px;
}
.main_style {
position: relative;
margin: 30px;
width: 119px;
height: 28px;
background: #ccc;
border: 1px solid #333;
}