I have the following styles in figma:
display: flex;
flex-direction: row;
align-items: center;
padding: 10px 16px;
position: absolute;
width: 227px;
height: 40px;
/* Button/Red */
background: #E30513;
/* RedBtn */
box-shadow: 0px 4px 12px rgba(157, 84, 81, 0.44);
border-radius: 10px;
I tried to rewrite these styles on tailwind for the buttion:
<button type="submit" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-xl shadow-sm text-white bg-red-600 hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-offset-2">Make request</button>
But I have faced with problems:
There is no tailwind border-radius: 10px only rounded-lg or rounded-xl.
There is no padding: 10px 16px; only this
No the same shadow
No color #E30513
Could you explain me, how to use tailwind in my case?
Here is how you can do it directly from tailwind classes using Arbitrary values
<script src="https://cdn.tailwindcss.com"></script>
<button
type="submit"
class="flex flex-row items-center py-[10px] px-[16px]
absolute w-[227px] h-[40px] bg-[#E30513]
shadow-[0px_4px_12px_rgba(157,84,81,0.44)]
rounded-[10px]
">
Make request
</button>
There are basically two ways to solve this problem.
Tailwind CSS v3 actually supports setting arbitrary values.
border-radius: 10px can be represented as rounded-[10px]
padding: 10px 16px can be represented as py-[10px] px-[16px]
box-shadow: 0px 4px 12px rgba(157, 84, 81, 0.44) can be represented as shadow-[0px_4px_12px_rgba(157,84,81,0.44)]
background: #E30513 can be represented as bg-[#E30513]
Here's an example of your button: https://play.tailwindcss.com/9K23furBKo
Alternatively, if you plan to use these values more than once, you could also easily extend your Tailwind CSS configuration.
Here are the links to the relevant documentation pages:
https://tailwindcss.com/docs/border-radius#using-custom-values
https://tailwindcss.com/docs/padding#using-custom-values
https://tailwindcss.com/docs/box-shadow#using-custom-values
https://tailwindcss.com/docs/background-color#using-custom-values
Related
I have a code that changes another div's backgroundImage when it it is hovered over. To do this, I use onMouseOver={() => setCurrentIndex(i)} and it does the job fine for laptops. However, onMouseOver does not seem to be working on phones until I have already clicked on the image/link, making it redundant.
<Link key={post.node.title} href={`/posts/${post.node.slug}`}>
<a
onMouseOver={() => setCurrentIndex(i)}
className={`p-2 border-r-2 h-full md:p-6 lg:p-8 ${currentIndex !== i ? 'opacity-70' : 'opacity-100'}`}
>
<div className="flex flex-col items-start h-full justify-end hover:-translate-y-4 ease-in-out duration-100 ">
{post.node.categories.map((category) => (
<Link passHref key={category.name} href={`/categories/${category.name}`}>
<span className="hidden md:inline-block bg-gray-200 hover:bg-blue-100 ease-in duration-150 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">
#{category.name}
</span>
</Link>
))}
<h1 className="text-xs text-gray-200 font-bold md:text-3xl">{post.node.title}</h1>
</div>
</a>
</Link>
You can't use hover effects on mobile since there's no cursor.
If you want visual feedback for pressing a button do a click event with a ripple effect.
Something like this Pure css ripple with minimal effort
/* Ripple effect */
.ripple {
background-position: center;
transition: background 0.8s;
}
.ripple:hover {
background: #47a7f5 radial-gradient(circle, transparent 1%, #47a7f5 1%) center/15000%;
}
.ripple:active {
background-color: #6eb9f7;
background-size: 100%;
transition: background 0s;
}
/* Button style */
button {
border: none;
border-radius: 2px;
padding: 12px 18px;
font-size: 16px;
text-transform: uppercase;
cursor: pointer;
color: white;
background-color: #2196f3;
box-shadow: 0 0 4px #999;
outline: none;
}
Firstly, I am still learning and fairly new to this profession so feel free to correct the code I have that is wrong.
The issue I have is that on my localhost solution, my css grid code is working the way I want it to (see 1st pic below). When it's uploaded, it is not (see 2nd pic below). I have used a method found on another website (https://css-tricks.com/new-year-new-job-lets-make-a-grid-powered-resume/) and it works on my CV, but it's not working on my portfolio post.
Should look like this!
picture 1
But looks like this...
picture 2
In specifics, the css file (index.css) is getting called for an id on the parent div that contains all the sections of a grid, but the index.css is not getting called for the class in the parent div, nor is index.css being applied to any of the classes on the sections of the grid. In the localhost, index.css is working correctly across these sections. When I check index.css on the server side, it is up to date and has all the classes that I need which is what is making me scratch my head so much...
What I have tried is a 'hard refresh' (ctrl+f5, shift+f5, etc.), turned my Cloudflare into developer mode, and I have also allowed some time to see if it was just a slow upload on the server side.
HTML code;
<div id="banner">
<!--Title-->
<div class="container py-2">
<div class="col-12 py-0 px-2">
<h3><u>KPI Management Dashboard</u></h3>
</div>
</div>
</div>
<div class="portfolio-sections" id="content">
<section class="grid-area-portfolio portfolio-overview" style="margin-left: 15px;">
<div class="p-3">
<p style="color: #545454;"><b>OVERVIEW</b></p>
<p>
text here
</p>
<p>
text here
</p>
</div>
</section>
<section class="grid-area-portfolio portfolio-role" style="margin-left: 15px;">
<div class="p-3">
<p style="color: #545454;"><b>MY ROLE</b></p>
<p>
<b>Graduate Software Developer</b> for Nant Ltd
</p>
<p>
UI Design, Prototyping, HTML, CSS, JavaScript, PHP, MySQL
</p>
<p>May 2020 - July 2020</p>
Go to the Dashboard Page
</div>
</section>
CSS code (index.css);
#banner {
margin-top: 100px;
width: 100%;
background-color: #ffffff;
/*color: #545454;*/
/*border-top: 2px solid rgba(82,82,82,0.4);
border-bottom: 2px solid rgba(82,82,82,0.4);*/
box-shadow: rgba(0, 0, 0, 0.3) 0 5px 10px 0;
}
#banner h3 {
color: #545454;
border-top: 4px solid rgba(255,255,255, .95);
transition: border-top ease-in-out 0.25s;
border-radius: 3px;
display: inline-block;
}
#banner h3:hover {
border-top: 4px solid #AFFC41;
border-radius: 3px;
}
#content {
margin: 0 auto;
margin-top: 20px;
width: 75%;
padding-bottom: 40px;
background-color: #ffffff;
box-shadow: rgba(0, 0, 0, 0.3) 0 5px 10px 0;
display: grid;
}
.portfolio-sections {
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
grid-template-areas:
"portfolio-overview portfolio-overview portfolio-role"
"portfolio-background portfolio-background portfolio-background"
"portfolio-problem portfolio-problem portfolio-problem"
"portfolio-users portfolio-users portfolio-users"
"portfolio-solution portfolio-solution portfolio-solution"
"portfolio-results portfolio-results portfolio-results";
}
.grid-area-portfolio {
padding: 0;
margin: 15px 15px 0px 0px;
position: relative;
}
.portfolio-overview {
grid-area: portfolio-overview;
}
.portfolio-role {
grid-area: portfolio-role;
}
A link to this codepen shows it works there - https://codepen.io/gileswking/pen/abdgOVo
But a link to my actual site shows it doesn't work there - https://www.code-grey.co.uk/portfolio/dashboard_case_study.php
I would appreciate any help, and many thanks in advance.
So it turns out if I click Development Mode on my Cloudflare CDN, it works for 24 hours, then disables itself which implies it's an improper setup on Cloudflare. After going through the setup with a friend, it is now working.
I am creating a web application using React and Ruby on Rails but my style components are not showing up. It worked fine when I had the first two style components but after making the third nothing works even when I removed the third component. After running rails my screen is now completely blank.
This is my code
import styled from 'styled-components'
const Section = styled.section`
background-color: #d74234
min-height: 550px;
padding: 100px 0;
color: #fff;
`;
const Header = styled.h1`
color: #fff;
font-weight: 700;
font-size: 40px;
line-height: 52px
`;
const Subhead = styled.p`
font-size: 18px;
font-weight: 500;
`;
const Button = styled.a`
display: inline-block;
text-decoration: none;
font-weight: bold;
cursor: pointer;
border-radius: 0;
background: #fff;
color: #333 !important;
padding: 10px 20px;
font-size: 18px;
width: 100%;
box-shadow: 0px 0px 0px 3px #473228,
-6px 6px #ef5f17,
-6px 6px 0px 3px #473228;
`;
const Jumbotron = () => {
return (
<Section className="home-section--1">
<div className="container">
<div className="row">
<div className="col col-sm-12 col-md-5">
<div className="pt-4 mt-4">
<Header>Curiosity Voyage!</Header>
<Subhead>Where all your random questions are answered</Subhead>
<div className = "cta-wrapper">
<Button className= "btn fancy-btn">Explore</Button>
</div>
</div>
</div>
<div className="col col-sm-12 col-md-7">
<div className="pt-4 mt-4 text-center">
</div>
</div>
</div>
</div>
</Section>
)
}
export default Jumbotron
I tried two solutions and neither worked, I included a backtick just before the semi-colons and also tried adding curly braces just before the styling.
I took a look at some info on Visual Studio and the styled-components within the section tag and got this message
const Button: 'StyledComponent<"a", any, {}, never>
and all of the tags have the same message, so it seems like it's not reading the styled-components within the Jumbtron. Can anyone help me with this please?
Could you provide more information, add code of your components, show how you added styles.
Also do you have any errors in browser console? maybe you can check some error logs
I use several menus for my app and I use angular material mat-menu component for this. I can change the style of all menus by writing css code in my global css file for menu original classes. but when I want to add some specific styles to one of them using .custom-class-name .original-material-class-name{} it doesn't apply those styles to that one menu.
here's the whole app in stackblitz: app
header.component.html:
<div>
<a mat-button class="theme-menu-toggle-button" *ngIf="!menuAvailable"
(click)="changeSidenavMode(!mode)">
<mat-icon>menu</mat-icon>
</a>
<a href="#" fxHide.lt-md fxShow.gt-sm class="theme-user" mat-button
[matMenuTriggerFor]="menu">
<img src="assets/images/user.png" class="theme-profile-image rounded-circle">
<span class="theme-profile-title">نام نامخانوادگی</span>
</a>
<mat-menu #menu="matMenu" class="profile-menu">
<button mat-menu-item *ngFor="let option of profileOptions">
<mat-icon>{{option.icon}}</mat-icon>
<span>{{option.title}}</span>
</button>
</mat-menu>
styles.css:
.profile-menu .cdk-overlay-pane::before{
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 15px solid #5E35B1;
content: " ";
position: absolute;
top: 10px !important;
animation: fadeInRightBig 0.75s;
}
Simply set whatever class you want on the mat-menu element.
<mat-menu #menu="matMenu" class="providers-menu" xPosition="after" yPosition="below">
...
</mat-menu>
You can style the menu in your component by using ::ng-deep
::ng-deep .mat-menu-panel.providers-menu {
margin-top: 65px;
background-color: #263358;
}
For more information see this github issue:
https://github.com/angular/components/issues/10322
Add custom class in the mat-menu in backdropClass:
<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu" backdropClass="custom__menu">
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
</mat-menu>
.custom__menu + * .cdk-overlay-pane > div.mat-menu-panel > div.mat-menu-content {
background-color: #777;
button.mat-menu-item {
color: white;
}
}
Add your stylings to header.component.css, and import it in your page:
#Component({
selector: 'my-selector',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css']
})
UPDATE: You need to add !important tags at end of your css tags.
.profile-menu .cdk-overlay-pane::before{
width: 0 !important;
height: 0 !important;
border-left: 8px solid transparent !important;
border-right: 8px solid transparent !important;
border-bottom: 15px solid #5E35B1 !important;
content: " " !important;
position: absolute !important;
top: 10px !important;
animation: fadeInRightBig 0.75s !important;
}
you should use id for html tag and use it in css file
What do you mean?
I am trying to change the background color of modal header of twitter bootstrap using following css code.
.modal-header
{
padding:9px 15px;
border-bottom:1px solid #eee;
background-color: #0480be;
}
.modal-header .close{margin-top:2px}
.modal-header h3{margin:0;line-height:30px}
But this code makes the corner of the modal header angular. Before using above code corners were round shaped. How can I get round shaped corner of modal header with the above background color ?? Thanks
You can use the css below, put this in your custom css to override the bootstrap css.
.modal-header {
padding:9px 15px;
border-bottom:1px solid #eee;
background-color: #0480be;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
So, I tried these other ways, but there was a VERY slight irritant and that was if you keep the modal-content border radius, in FF and Chrome, there is a slight bit of white trim showing along the borders, even if you use 5px on the modal-header border radius. (standard modal-content border radius is 6px, so 5px on the modal-header border top radius covers some white).
My solution:
.modal-body
{
background-color: #FFFFFF;
}
.modal-content
{
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
background-color: transparent;
}
.modal-footer
{
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-radius-bottomleft: 6px;
-moz-border-radius-bottomright: 6px;
}
.modal-header
{
border-top-left-radius: 6px;
border-top-right-radius: 6px;
-webkit-border-top-left-radius: 6px;
-webkit-border-top-right-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 6px;
}
!! CAVEAT !!
You must then set the background colors of the modal-header, modal-content, and modal-footer. This is not bad trade-off, because it allows you to do this:
<div class="modal-header bg-primary">
<div class="modal-body bgColorWhite">
<div class="modal-footer bg-info">
EDIT
Or even better:
<div class="modal-header alert-primary">
The corners are actually in .modal-content
So you may try this:
.modal-content {
background-color: #0480be;
}
.modal-body {
background-color: #fff;
}
If you change the color of the header or footer, the rounded corners will be drawn over.
All i needed was:
.modal-header{
background-color:#0f0;
}
.modal-content {
overflow:hidden;
}
overflow: hidden to keep the color inside the border-radius
I myself wondered how I could change the color of the modal-header.
In my solution to the problem I attempted to follow in the path of how my interpretation of the Bootstrap vision was. I added marker classes to tell what the modal dialog box does.
modal-success, modal-info, modal-warning and modal-error tells what they do and you don't trap your self by suddenly having a color you can't use in every situation if you change some of the modal classes in bootstrap. Of course if you make your own theme you should change them.
.modal-success {
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#dff0d8), to(#c8e5bc));
background-image: -webkit-linear-gradient(#dff0d8 0%, #c8e5bc 100%);
background-image: -moz-linear-gradient(#dff0d8 0%, #c8e5bc 100%);
background-image: -o-linear-gradient(#dff0d8 0%, #c8e5bc 100%);
background-image: linear-gradient(#dff0d8 0%, #c8e5bc 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffc8e5bc', GradientType=0);
border-color: #b2dba1;
border-radius: 6px 6px 0 0;
}
In my solution I actually just copied the styling from alert-success in bootstrap and added the border-radius to keep the rounded corners.
A plunk demonstration of my solution to this problem
Add this class to your css file to override the bootstrap class.modal-header
.modal-header {
background:#0480be;
}
It's important try to never edit Bootstrap CSS, in order to be able to update from the repo and not loose the changes made or break something in futures releases.
A little late to the party, but here's another solution.
Simply adjusting the class of the modal to something like alert-danger does work, however it removes the top rounded corners of the modal.
A workaround is to give the element with modal-header an additional class of panel-heading, e.g.
<div class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header panel-heading"> <!-- change here -->
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Then, to change the heading color you can do something like (assuming you're using jQUery)
jQuery('.modal-content').addClass('panel-danger')
You can solve this by simply adding class to modal-header
<div class="modal-header bg-primary text-white">
All the other answersoverflow:hidden、alert-danger not work for me in Bootstrap 4,
but I found a simple solution in Bootstrap 4.
Since the white trim comes from modal-content, just add border-0 class to it and the white trim disappear.
Example:
https://codepen.io/eric1214/pen/BajLwzE?editors=1010