I need to create horizontal and vertical tabs using Angular material.Thanks in advance.
I use the following SCSS to display a mat-tab-group as vertical by applying the vertical-tabs class. You will probably want to alter it somewhat but it should be a good starting point.
mat-tab-group.vertical-tabs {
flex-direction: row !important;
.mat-tab-labels {
flex-direction: column !important;
}
.mat-tab-label {
border: none;
height: auto !important;
padding: 10px !important;
min-width: 0px !important;
justify-content: left !important;
opacity: 1;
border-bottom: 1px solid #eee;
}
.mat-tab-body-wrapper {
flex: 1;
}
.mat-tab-header {
border-bottom: none !important;
border-right: 1px solid #eee;
}
mat-ink-bar {
display: none;
}
}
Related
I'm having trouble figuring this one out. I'm trying to achieve a search form with the button appearing inside the text.
I the following codepen as a boilerplate, however, I'd like it so that if I add more text to the button (making it wider), it expands to left (inward on the container), rather than expanding the container.
https://codepen.io/chriscoyier/pen/bYyvvz
CSS that works for the container:
.searchContainer {
display: inline-flex;
flex: 1 0 300px;
position: relative;
border: 1px solid #ccc;
border-radius: 5px;
overflow: hidden;
}
.searchBox {
border: 0;
padding: 0.5rem 0.5rem 0.5rem 0;
flex: 1;
}
.searchButton {
background: #538AC5;
border: 0;
color: white;
padding: 0.5rem;
border-radius: 0;
}
Thanks a lot
Currently your .searchContainer does not have a width specified, so any content added to the search button will always expand the container.
You could solve this by specifying a width on the container and a min-width on the searchBox (to allow it to shrink).
.searchContainer {
display: inline-flex;
flex: 1 1 300px;
position: relative;
border: 1px solid #ccc;
border-radius: 5px;
overflow: hidden;
width: 200px;
}
.searchBox {
border: 0;
padding: 0.5rem 0.5rem 0.5rem 0;
flex: 1;
min-width: 30px;
}
I have below CSS and I want to change the color in div to blue if it matches a certain class,
I tried following but it dint work
&__header {
display: flex;
justify-content: space-between;
.list-row__statAG {
color: #315ec5; ///this is not applied
border-bottom: 1px solid #315ec5;
height: 80px;
}
.list-row__scTG {
color: #315ec5; ///this is not applied
border-bottom: 1px solid #315ec5;
height: 80px;
}
&>div {
text-align: left !important;
color: #B9BABD !important; ////it is using this color -----How can I override this ?
}
}
I have also tried making the following change but it only works for 2nd element , can I add not condition for a class like div:not('.list-row__scTG','.list-row__statAG')
&>div:not(:nth-last-of-type(2)) {
Try this;
&__header {
display: flex;
justify-content: space-between;
.list-row__statAG {
color: #315ec5 !important;
border-bottom: 1px solid #315ec5;
height: 80px;
}
.list-row__scTG {
color: #315ec5 !important;
border-bottom: 1px solid #315ec5;
height: 80px;
}
&>div {
text-align: left !important;
color: #B9BABD !important;
}
}
I want to realize the following design with CSS. Here's the problem with the code below.
* {
box-sizing: border-box;
}
body {
margin: 50px;
}
a {
text-decoration: none;
}
.box {
display: flex;
width: 80px;
height: 200px;
writing-mode: vertical-lr;
border-radius: 20px 0 0 20px;
background: green;
}
.box-link {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
color: white;
border: 3px solid black;
border-radius: 20px 0 0 20px;
}
.box:hover {
background: white;
}
.box-link:hover {
color: black;
box-shadow: 0 0 0 10px white, 0 0 0 11px black;
}
<div class="box">
Hello, World!
</div>
That is, even if you hover the box-shadow part, the hover style is not applied.
I've seen solutions on some topics, but I can't finish the design I want to achieve in a little more. Also I cannot use pseudo-elements or add elements.
The code snippet draws a box-shadow on the outside, but you can even draw this inside the element (the inset of the box-shadow).
How to achieve rounded multiple lines without pseudo elements?
Outline radius?
How can I get multiple borders with rounded corners? CSS
Multiple Borders
I'm trying to create some CSS to have a icon or image in the center with a line on both sides, but it seems like i'm doing something wrong and need some help.
For simplicity I just use a star character in the code.
<div class='line-container'><div class='line-icon'>*</div></div>
.line-icon {
text-align: center;
}
.line-icon::before {
width: 25%;
height: 1px;
border: 1px solid #ccc;
}
.line-icon::after {
width: 25%;
height: 1px;
border: 1px solid #ccc;
}
Try adding a content to your ::after and ::before, and setting its display:
.line-icon {
text-align: center;
}
/* Joined both selectors, since were pretty much the same */
.line-icon::before,
.line-icon::after {
/* Styles kept */
width: 25%;
height: 1px;
/* Changed to border-top (instead of border) to simulate a line better */
border-top: 1px solid #ccc;
/* Styles added */
display: inline-block;
content: '';
/* Use padding to vertical align the line */
/* Use padding in em for a responsive icon height */
padding-top: 0.5em;
/* Use margins to give the lines some spacement around the icon */
/* Use margins in % for a responsive spacement */
margin-left: 5%;
margin-right: 5%;
}
<div class='line-container'><div class='line-icon'>*</div></div>
A different style but may be usefull for u
.seperator {
padding: 0;
border: 0px;
border-top: 1px solid #ccc;
color: #000;
text-align: center;
}
.seperator:after {
content: "vs";
display: inline-block;
position: relative;
top: -0.7em;
font-size: 1.5em;
padding: 0 0.50em;
background: #fff;
}
<hr class="seperator"></hr>
I want to code the below design in html and css
The result I got:
I want to center other content in the td elements, so it will be aligned with the product image. I tried to use display: list-item with the product image and it works in Chrome, like the below image:
CSS code:
table {
width: 100%;
thead {
border-bottom: 1px solid #eeeeee;
}
th {
text-align: left;
text-transform: uppercase;
color: #909090;
padding-bottom: 1em;
}
.thumb {
width: 100px;
height: 100px;
background: #f7f7f7;
border: 1px solid #e5e5e5;
display: list-item;
}
tr:nth-child(even) {
background: #fafafa;
border-bottom: 1px solid #e5e5e5;
border-top: 1px solid #e5e5e5;
}
td,
tr {
padding: 1em 0;
span {
display: block;
}
}
}
Please check this fiddle
Thanks,
In that third image you have shown, that does not look “centered” (on the vertical axis), but aligned to the top instead. If that is what you want – then simply specify vertical-align for the table cells accordingly:
.cart table td {
vertical-align:top;
}
http://jsfiddle.net/ahpegfvj/3/