Usually /deep/ “shadow-piercing” combinator can be used to force a style down to child components. This selector had an alias >>> and now has another one called ::ng-deep. since /deep/ combinator has been deprecated, it is recommended to use ::ng-deep For example: <div class=”overview tab-pane” id=”overview” role=”tabpanel” [innerHTML]=”project?.getContent( ‘DETAILS’)”></div> and css .overview { ::ng-deep { … Read more
Use overflow: auto. Scrollbars will only appear when needed. (Sidenote, you can also specify for only the x, or y scrollbar: overflow-x: auto and overflow-y: auto).
:focus and :active are two different states. :focus represents the state when the element is currently selected to receive input and :active represents the state when the element is currently being activated by the user. For example let’s say we have a <button>. The <button> will not have any state to begin with. It just … Read more
You can’t take an existing color value and apply an alpha channel to it. Namely, you can’t take an existing hex value such as #f0f0f0, give it an alpha component and use the resulting value with another property. However, custom properties allow you to convert your hex value into an RGB triplet for use with … Read more
Yes, you can actually with CSS 2D Transforms. This is supported in almost all modern browsers, including IE9+. Here’s an example. HTML <p>I feel like <span class=”stretch”>stretching</span>.</p> CSS span.stretch { display:inline-block; -webkit-transform:scale(2,1); /* Safari and Chrome */ -moz-transform:scale(2,1); /* Firefox */ -ms-transform:scale(2,1); /* IE 9 */ -o-transform:scale(2,1); /* Opera */ transform:scale(2,1); /* W3C */ } … Read more
Have you tried the percentage function ? $my_width: percentage(4/12); div{ width: $my_width; } UPDATE This function was updated since version 1.33.0 and now this is a correct method to do it: @use “sass:math”; div { width: math.percentage(math.div(4,12)); } Source: https://sass-lang.com/documentation/modules/math#percentage
This is not a bug– you can only transition on ordinal/calculable properties (an easy way of thinking of this is any property with a numeric start and end number value..though there are a few exceptions). This is because transitions work by calculating keyframes between two values, and producing an animation by extrapolating intermediate amounts. visibility … Read more
With Chrome and Safari you can add the CSS style -webkit-print-color-adjust: exact; to the element to force print the background color and/or image
ul li{ display: inline; } For more see the basic list options and a basic horizontal list at listamatic. (thanks to Daniel Straight below for the links). Also, as pointed out in the comments, you probably want styling on the ul and whatever elements go inside the li’s and the li’s themselves to get things … Read more
http://caniuse.com/#search=::after ::after and ::before with content are better to use as they’re supported in every major browser other than Internet Explorer at least 5 versions back. Internet Explorer has complete support in version 9+ and partial support in version 8. Is this what you’re looking for? .Modal::after{ content:url(“https://stackoverflow.com/questions/6668577/blackCarrot.png”); /* with class ModalCarrot ??*/ position:relative; /*or … Read more