At 100% size of the browser, there are some white spaces between child elements and their parent wrapper. However, if I modify the browser size to say 90% there are no more white spaces. If I further play with the browser size, that element will toggle between white spaces and no white spaces.
Any idea what am I doing wrong? Thanks
css code:
.flowpanelContainer {
display: inline-flex;
border: .180rem solid COLOR;
border-radius: 5px;
color: COLOR;
font-family: "Roboto",sans-serif;
box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.gwt-ToggleButton {
border: none !important;
background: transparent !important;
border-right: .180rem solid COLOR !important;
height: 100% !important;
outline: none !important;
border-radius: 0 !important;
font-weight: 700 !important;
/*padding: calc(8px + 1.5625vw);*/
padding: 0.5rem 0.8rem !important;
letter-spacing: 1px !important;
transition: all .4s linear !important;
width: max-content !important;
}
Related
I'm facing an issue where when my max-height is set to 500px, the scroll appears. However, if i set the height to 100%, the scroll will never appear for one of my tables. Strange enough, my other table works fine.
scss code:
.card-box {
box-shadow: 0 4px 24px 0 rgb(34 41 47 / 10%);
margin-bottom: 8px;
background-color: #fff;
background-clip: border-box;
border: 0 solid rgba(0, 0, 0, 0.125);
border-radius: 0.5rem;
padding: 10px;
max-height: 100%;
overflow: scroll;
.ant-tabs-tab {
font-weight: bold;
}
.ant-table-tbody {
color: #222;
}
.h6-title {
color: blue !important;
font-weight: bold !important;
font-size: 32px !important;
margin-left: 5px !important;
}
}
If i set to 500px:
If i set to 100%:
I am using react date picker to build a custom date but I cant seem to be able to style past dates. All dates lower than the present date should have a grey background.The present date should have a past background and the future dates should all have a white background with a black border;
Code I have written to override current styles but I cant seem to figure this out
.css-gbrmys>*:not(style)~*:not(style){
margin-top: 0px !important;
}
.react-datepicker__input-container > input {
height: 42px !important;
border-radius: 8px !important;
background: #fff !important;
width: 100% !important;
border: 1px solid #E0E0E0 !important;
text-indent: 12px;
}
.react-datepicker__triangle{
display: none !important;
}
.react-datepicker__header{
border: none !important;
background-color: #fff !important;
}
.css-2v22cu{
margin-top: 13px !important;
margin-bottom: 13px !important;
}
.react-datepicker{
font-family: 'Red Hat Display', sans-serif !important;
font-size: 14px !important;
border: none !important;
border-radius: 8px !important;
box-shadow: 0px 8px 16px rgba(17, 17, 17, 0.06) !important;
}
.react-datepicker__current-month{
font-size: 18px !important;
}
.react-datepicker__day-name{
color: #9C9C9C !important;
font-size: 14px !important;
line-height: 21px !important;
}
.react-datepicker__day-names{
margin-left: 18px !important;
margin-right: 18px !important;
}
.react-datepicker__day{
background: #EEEEEE !important;
font-size: 14px !important;
line-height: 21px !important;
border-radius: 4px !important;
color: #9C9C9C !important;
}
.react-datepicker__day--selected{
background: #000000 !important;
color: white !important;
}
.react-datepicker__month {
margin-bottom: 25px !important;
margin-top: 0.4rem !important;
margin-left: 0.4rem !important;
margin-right: 0.4rem !important;
}
I'm trying to add a shadow to angular material tooltip arrow but couldn't able to do it. If you can see in the stackblitz I have customized the tooltip with an arrow but not able to add a shadow to the arrow.
My tooltip CSS:
::ng-deep .tooltip-class {
background-color: #ffffff !important;
opacity: 1;
color: rgba(0, 0, 0, 0.87) !important;
margin: 0 8px;
padding: 8px 12px;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 24px;
border-radius: 6px;
overflow: visible !important;
box-shadow: 0px 1px 2px #00000029, 0px 2px 4px #0000001f,
0px 1px 8px #0000001a;
}
::ng-deep .tooltip-class:before {
border-right-color: white !important;
}
::ng-deep .tooltip-class:after {
content: '';
position: absolute;
top: 40%;
right: 100%;
margin-top: -5px;
border-width: 10px;
border-style: solid;
border-color: transparent #fff transparent transparent;
}
The tooltip arrow is generated using ::after pseudo-element. You can add shadow to it using filter or you can also create a new rotated pseudo-element ::before and apply box-shadow to it since applying box-shadow to ::after would not be perfect as it would reveal the transparent parts of the box.
.tooltip-class:after {
filter: drop-shadow(-0.25px 1px 0.75px gray);
}
Stackblitz demo
Messing around in SASS but when my stylesheet is compiling it generates this weird, invalid css.
.container
padding: 3rem 2.5rem 3rem
background-color: red
Since this compiles well in isolation it must be the surrounding sass as pointed out in the comments. If it matters anything it's an angular 5 project:
Surrounding sass: https://pastebin.com/tMMxf97D
What am I doing wrong?
You have some extra spaces, and inconsistent tabs. I added the variables just to test. Check my rearranged code
$prim: #cccccc
$dark-prim: #666666
$grey: grey
#wrapper
background: #F7F7F7
.tournament-card
background: #fff
box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.11)
.card-title
background-color: $dark-prim
padding: 2rem
h1
color: #fff
text-align: center
font-size: 1.2rem
.container
padding: 3rem 2.5rem 3rem
background-color: red
.options
color: $grey
margin-bottom: 1.5rem
button
cursor: pointer
font-size: 1.2rem
color: $prim
border-radius: 4rem
display: block
width: 100%
background: transparent
border: 2px solid $prim
padding: 0.9rem 0 1.1rem
transition: color .5s, border-color .5s
margin-top: 3rem
&:hover,
&:focus
background: $dark-prim
color: white
&:active
transform: translateY(1px)
I have a weird case where the caret for the twitter bootstrap select is not appearing after some customisation. I am therefore looking to restore the style for the select. These are the current styles:
#sidebar2 select {
max-width: 100%;
margin: 0px;
border: 1px solid #ccc !important;
outline: 0;
display:block;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075) !important;
border-radius: 2px !important;
width: 100% !important;
height: 32px !important;
font-weight: 500;
-webkit-appearance: none !important;
-webkit-transition: none !important;
text-transform: none;
font: inherit;
vertical-align: top;
}
Because you use -webkit-appearance: none !important, it will make the caret disappear, you can try on mozzila and see the caret still there