While digging through mixins.less file of bootstrap 3 I found the following:
// CSS image replacement
//
// Heads up! v3 launched with with only `.hide-text()`, but per our pattern for
// mixins being reused as classes with the same name, this doesn't hold up. As
// of v3.0.1 we have added `.text-hide()` and deprecated `.hide-text()`. Note
// that we cannot chain the mixins together in Less, so they are repeated.
//
// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
// Deprecated as of v3.0.1 (will be removed in v4)
.hide-text() {
font: ~"0/0" a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
// New mixin to use as of v3.0.1
.text-hide() {
font: ~"0/0" a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
Has anyone been using this? Where do I specify the image that I want to replace the text? Am I right to assume that all this does is to hide text and not replacing it with an image?
Yes, this does not include an image, it only hides text. You will need to do your own image replacement, perhaps in a custom CSS rule:
.my-image-replacement {
background-image:url('myImage.jpg');
.text-hide();
}
I use the following for convenience:
.image-replacement( #url, #width, #height ) {
display: block;
width: #width;
height: #height;
background: url(#url) no-repeat left top;
.text-hide();
}
.logo {
.image-replacement( "images/logo.png", 100px, 50px );
}
Note this version is not retina - use bootstrap's .img-retina() from mixins.less instead of the background line above when you're serving hdpi images…
Related
I am not able to change the arrow size in vue-tour. While I am able to change it by inspecting in Chrome, in CSS I am unable to do it as it has some runtime generated ID associated with it.
.v-step__arrow[data-v-e97491e4], .v-step__arrow[data-v-e97491e4]:before {
position: absolute;
width: 10px;
height: 10px;
background: inherit;
}
The v-step GitHub is available here: https://github.com/pulsardev/vue-tour/blob/master/src/components/VStep.vue
You can make use of v-deep. It helps in applying the styles to the child-components directly.
If you are making use of sass then you can apply styling as:
::v-deep .v-step {
background-color: black;
}
If you are simply using css then you can use v-deep as:
>>> .v-step {
background-color: black;
}
How can I change height in mat-form-field with appearance="outline" to a specific height pixel number, 40px (or any required number from UX team in the future). I need to reduce the mat-form-field.
How can this be done? What is the equation, or which part number can be modified to change to 40px?
-1.1? .75 , 133%, Looking for some kind of function or math equation using answer below, or any other option which may work.
https://stackoverflow.com/a/54762506/12425844
::ng-deep .mat-form-field-flex > .mat-form-field-infix { padding: 0.4em 0px !important;}
::ng-deep .mat-form-field-label-wrapper { top: -1.5em; }
::ng-deep .mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label {
transform: translateY(-1.1em) scale(.75);
width: 133.33333%;
}
Not sure exactly from where you want to cut, so I'll give you a few options and you can decide what and how much you want to cut in order to get the right size
To remove the margins from top and bottom
::ng-deep mat-form-field.mat-form-field-appearance-outline .mat-form-field-wrapper {
margin: 0;
}
To change the font size
mat-form-field {
font-size: 10px;
}
To remove the hint and errors (space in the bottom)
::ng-deep .mat-form-field-wrapper {
padding-bottom: 0;
}
::ng-deep .mat-form-field-subscript-wrapper {
display: none;
}
To change the padding (default is 1em for top and bottom)
::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
padding: .5em;
}
Note: if you choose to do the last one you will also have to change the top or margin-top of the .mat-form-field-label like this
::ng-deep .mat-form-field-appearance-outline .mat-form-field-label {
top: ...;
margin-top: ...;
}
You can check it out here, on your project dependencies (#angular/material 8.2.3): node_modules\#angular\material\_theming.scss
Line ~ 4540 : #mixin _mat-form-field-outline-label-floating and mat-form-field-outline-typography :
// Used to make instances of the _mat-form-field-label-floating mixin negligibly different,
// and prevent Google's CSS Optimizer from collapsing the declarations. This is needed because some
// of the selectors contain pseudo-classes not recognized in all browsers. If a browser encounters
// an unknown pseudo-class it will discard the entire rule set.
$mat-form-field-outline-dedupe: 0;
// Applies a floating label above the form field control itself.
#mixin _mat-form-field-outline-label-floating($font-scale, $infix-padding, $infix-margin-top) {
transform: translateY(-$infix-margin-top - $infix-padding + $mat-form-field-outline-dedupe)
scale($font-scale);
width: 100% / $font-scale + $mat-form-field-outline-dedupe;
$mat-form-field-outline-dedupe: $mat-form-field-outline-dedupe + 0.00001 !global;
}
#mixin mat-form-field-outline-typography($config) {
// The unit-less line-height from the font config.
$line-height: mat-line-height($config, input);
// The amount to scale the font for the floating label and subscript.
$subscript-font-scale: 0.75;
// The padding above and below the infix.
$infix-padding: 1em;
// The margin applied to the form-field-infix to reserve space for the floating label.
$infix-margin-top: 1em * $line-height * $subscript-font-scale;
// The space between the bottom of the .mat-form-field-flex area and the subscript wrapper.
// Mocks show half of the text size, but this margin is applied to an element with the subscript
// text font size, so we need to divide by the scale factor to make it half of the original text
// size.
$subscript-margin-top: 0.5em / $subscript-font-scale;
// The padding applied to the form-field-wrapper to reserve space for the subscript, since it's
// absolutely positioned. This is a combination of the subscript's margin and line-height, but we
// need to multiply by the subscript font scale factor since the wrapper has a larger font size.
$wrapper-padding-bottom: ($subscript-margin-top + $line-height) * $subscript-font-scale;
// The amount we offset the label from the input text in the outline appearance.
$outline-appearance-label-offset: -0.25em;
.mat-form-field-appearance-outline {
.mat-form-field-infix {
padding: $infix-padding 0 $infix-padding 0;
}
.mat-form-field-label {
top: $infix-margin-top + $infix-padding;
margin-top: $outline-appearance-label-offset;
}
&.mat-form-field-can-float {
&.mat-form-field-should-float .mat-form-field-label,
.mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {
#include _mat-form-field-outline-label-floating(
$subscript-font-scale, $infix-padding + $outline-appearance-label-offset,
$infix-margin-top);
}
// Server-side rendered matInput with a label attribute but label not shown
// (used as a pure CSS stand-in for mat-form-field-should-float).
.mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper
.mat-form-field-label {
#include _mat-form-field-outline-label-floating(
$subscript-font-scale, $infix-padding + $outline-appearance-label-offset,
$infix-margin-top);
}
}
}
}
I got you bro, Some easy Resolution is:
add this on your css
::ng-deep .mat-form-field-appearance-outline .mat-form-field-flex {
height: 40px !important
}
::ng-deep .mat-form-field-infix {
padding-top: 1px !important;
}
exaplained
Here you can control your mat-form-field height as you want.
::ng-deep .mat-form-field-appearance-outline .mat-form-field-flex {
height: 40px !important
}
And with this bellow you can control your mat-form-field placeholder padding to match with the new height that you put.
::ng-deep .mat-form-field-infix {
padding-top: 1px !important;
}
I tried here and work fine
you can add panelClass tp your mat-form-field like below:
your component.html:
<mat-form-field panelClass="example-class"></mat-form-field>
and style it in global css file
styles.scss:
.example-class{
height:40px
}
I want to have some visual notification when something is good, bad or in between
lets say I have a number between 0 and 100, where 100 is green (or some other predefined color) and 0 is red (or another color)
is there a way to get the color that is 67? 34? 98? with only css
so 67 in this case, could either be (67 * green + 33 * red) / 100 or some other function
another alternative would be to make a gradient (but then it wouldn't be a solid color..)
Currently, there is no stable way to do that in CSS, only. CSS calc() property will probably the way to go as the W3C specs include that you can use values from attr() for calculations. As of now, no browser supports the combination of both, but it would look like this
// HTML
<span class="color" data-val="67">67</span>
// CSS
.color {
background-color: rgb(
calc( (100 - attr(data-val)) / 100 * 255 ),
calc( attr(data-val) / 100 * 255),
0
);
}
calc() itself works quite well (with prefixes in Chrome (-webkit-) and Firefox (-moz-), but the numbers used for calculation must be set in CSS (e.g. width: calc(100% - 3em);).
Before attr() is fully supported inside calc(), you probably need to use javascript to achieve that, see example below where the span has a red background and the inner strong element has a green background color. Javascript is used to set the background opacity based on the text value. Press Run code snippet to see the result.
$(document).ready(function() {
$('.color').each(function() {
$(this).children('strong').css('background-color', 'rgba(0,255,0,'+(parseInt($(this).text()) / 100)+')');
});
});
.color {
display: inline-block;
margin: 5px;
text-align: center;
border: 1px solid #000;
background: #c00;
}
strong {
display: inline-block;
padding: 15px;
color: #fff;
text-shadow: 0 0 5px #000;
font-family: Arial;
font-size: 1.2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<span class="color"><strong>100</strong></span>
<span class="color"><strong>67</strong></span>
<span class="color"><strong>33</strong></span>
<span class="color"><strong>25</strong></span>
<span class="color"><strong>0</strong></span>
The only way you can do this with CSS is to write a class for every single possible color. The only way Sass can help is by programatically generating all of your classes:
#for $i from 0 through 100 {
.foo-#{$i} {
background: mix(red, green, $i * 1%);
}
}
This task can be more efficiently solved via JavaScript.
You can but it requires SASS or LESS or another pre-processor that allows CSS variables
SASS
$value: 0;
$green: 255*($value/100);
$red:255*((100-$value)/100);
div {
width:100px;
height:100px;
margin:10px;
background:rgb($red, $green , 0);
}
SassMeister Demo
Getting to grips with LESS here but one thing is still a little unclear.
Lets say I have multiple color themes for my website, controlled by a class on the body tag. From this I can redefine the various colors for each element within each theme. Easy enough but fairly time consuming if I have a lot of elements to change... and a lot of themes. Every time I add a new theme I need to write out all the selectors again, with different color values.
I am basing my working so far on another post I found:
LESS.css variable depending on class
... However it still seems overly complicated for what I want to do in that I still have to write out all the selectors and include the mixin before dropping in the same CSS with the color variable.
I have created a CODEPEN HERE
I'd appreciate it if anyone had time to take a little look and advise me how I could approach this differently or how I could streamline this process.
Many thanks to anyone who helps out :)
Assuming you remain with wanting to theme it within one style sheet (and not multiple sheets as cimmanon noted in the comments), and assuming you are using LESS 1.3.2+, then the following code works to reduce the amount of duplication by setting up a loop through the classes that need theme changes.
Note that this does not work on Codepen (it is throwing an error uncaught throw #, perhaps because they are running an earlier version of LESS), but you can see it compiling correctly by putting the code into LESS's compiler.
LESS (based off your Codepen code with an added theme for demo)
//////////////////////////////////////////////////////
// CONSTANTS
#lightColour: #fff;
#darkColour: #000;
#lightBg: #fff;
#darkBg: #000;
#numberOfThemes: 3; //controls theme loop
//////////////////////////////////////////////////////
// MIXINS
//Theme Definitions by parametric mixin numbers (1), (2), etc.
.themeDefs(1) {
#lightColour: #f00;
#darkColour: #fff;
#lightBg: #f00;
#darkBg: #fff;
}
.themeDefs(2) {
//inverse of 1
#lightColour: #fff;
#darkColour: #f00;
#lightBg: #fff;
#darkBg: #f00;
}
.themeDefs(3) {
#lightColour: #cfc;
#darkColour: #363;
#lightBg: #cfc;
#darkBg: #363;
}
.curvy {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
//////////////////////////////////////////////////////
// GENERAL STYLING
* {padding: 0;margin: 0;}
html {text-align: center;}
h2 {padding: 20px 0;}
.box {
.curvy;
color: #lightColour;
background: #darkBg;
display:inline-block; width:10%; padding:20px 5%; margin:0 1% 20px 1%;
}
//////////////////////////////////////////////////////
// THEME BUILDING
.buildThemes(#index) when (#index < #numberOfThemes + 1) {
.theme-#{index} {
.themeDefs(#index);
color: #lightColour;
background: #darkBg;
.box {
color: #darkColour;
background: #lightBg;
}
}
.buildThemes(#index + 1);
}
//stop loop
.buildThemes(#index) {}
//start theme building loop
.buildThemes(1);
CSS Output (only showing the looped theme css for brevity)
.theme-1 {
color: #ff0000;
background: #ffffff;
}
.theme-1 .box {
color: #ffffff;
background: #ff0000;
}
.theme-2 {
color: #ffffff;
background: #ff0000;
}
.theme-2 .box {
color: #ff0000;
background: #ffffff;
}
.theme-3 {
color: #ccffcc;
background: #336633;
}
.theme-3 .box {
color: #336633;
background: #ccffcc;
}
How to increase cell height of GWT celltable ?
In mozilla firefox cell height proper(as per content) but In case of Internet explorer some part of content not displaying properly
see image
My Celltable.css is as follows:
#def selectionBorderWidth 0px;
.cellTableWidget {
border: 1px solid red;
}
.cellTableFirstColumn {
}
.cellTableLastColumn {
}
.cellTableFooter {
text-align: left;
color: #4b4a4a;
overflow: hidden;
}
.cellTableHeader { /** COLUMN HEADR TEXT */
text-align: left;
color: #4b4a4a;
overflow: hidden;
background-color: #E1E1E1;
font-family: arial, Helvetica, sans-serif;
font-size: 8pt;
font-weight: bold;
padding-left: 10px;
height: 20px;
border-bottom: #e6e6e6 1px solid;
border-left: #a6a6af 0.5px solid;
border-right: #e6e6e6 1px solid;
border-top: #a6a6af 0.5px solid;
}
.cellTableCell {
overflow: hidden;
padding-left: 10px;
height: 20px;
font-family: Arial;
font-size: 11px;
font-weight: normal;
border-bottom: #e6e6e6 1px solid;
border-left: #a6a6af 0.5px solid;
border-right: #e6e6e6 1px solid;
border-top: #a6a6af 0.5px solid;
}
.cellTableFirstColumnFooter {
}
.cellTableFirstColumnHeader {
}
.cellTableLastColumnFooter {
}
.cellTableLastColumnHeader {
}
.cellTableSortableHeader {
cursor: pointer;
cursor: hand;
}
.cellTableSortableHeader:hover {
color: #6c6b6b;
}
.cellTableSortedHeaderAscending {
}
.cellTableSortedHeaderDescending {
}
.cellTableEvenRow {
background: #ffffff;
}
.cellTableEvenRowCell {
}
.cellTableOddRow {
background: #f8f8f8;
}
.cellTableOddRowCell {
}
.cellTableHoveredRow { /** background: #eee;*/
}
.cellTableHoveredRowCell {
/** border: selectionBorderWidth solid #eee; */
}
.cellTableKeyboardSelectedRow {
background: #ffc;
}
.cellTableKeyboardSelectedRowCell {
}
.cellTableSelectedRow {
background-image: url("images/row_Highlight.jpg");
color : black;
height: auto;
overflow: auto;
}
.cellTableSelectedRowCell {
}
/**
* The keyboard selected cell is visible over selection.
*/
.cellTableKeyboardSelectedCell {
}
#sprite .cellTableLoading {
gwt-image: 'cellTableLoading';
/*margin: 20px;
*/}
What changes I need to do in css to make consistency (cell height) in all browser?
I think the problem may be that your CSS style for the cell has "overflow: hidden;".
.cellTableCell {
overflow: hidden;
...
}
Take that away and see what happens. I think the cell and row will expand to fit the content.
There is another possible correction for cellTableRow's CSS. Row styles should be overwritten by cell styles, but GWT may be doing something under the hood to compensate for browser differences in IE. To ensure it always applies to the TDs contained in the TR, write it like this:
.cellTableRow,
.cellTableRow td {
overflow: auto;
...
}
First of all, do you make a CSS Reset? Following post refers to the same problem i guess.
Why is box sizing set to border-box for tables in Firefox?
The problem could be caused from the difference between browsers in the way the handle the box-model.
Read this post for more information.
I would set box-sizing property.
IE uses the border-box, every other browser the content-box-modell.
You can define, which one should be used with the following css rule:
table {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
or
table {
-webkit-box-sizing: content-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: content-box; /* Firefox, other Gecko */
box-sizing: content-box; /* Opera/IE 8+ */
}
We sometimes have problems with IE breaking the layout, because the page is rendered before everything is ready. Try if assigning a dummy CSS class to some element in the DOM changes anything.
If it does, the following code might help you. It just sets some random class at the body element and resets it to force a rerendering of the page:
/**
* Force Internet Explorer 8 to render the page again without a page refresh. after the given delay of milliseconds. This
* method only works for Internet Explorer 8.
*
* #param delayInMillis delay in milliseconds
*/
public void forceIe8ToReRender(final int delayInMillis) {
// call timer to force ie8 to re-render page without page refresh
final Timer t = new Timer() {
#Override
public void run() {
doForceBrowserToReRender();
// timer should only run once
this.cancel();
}
};
t.schedule(delayInMillis);
}
/**
* Force Browser to render the page again without a page refresh
*/
private native void doForceBrowserToReRender()/*-{
var doc = $doc;
var originalClassName = doc.body.className;
doc.body.className = "foobar";
doc.body.className = originalClassName;
}-*/;
use this
.cellTableCell { min-height : 20px ; ..... }
You can use
.cellTableKeyboardSelectedRow {
background: #ffc;
height:30px !important
}
It Works for me :)
/** Cell height */
.mainCellTable tbody tr td{
height: auto;
}
Extend AbstractCellTableBuilder and then mention height attribute of TableRow
height is not the best solution to assign where the content text either be increased or decreased. So there are two cases to make your above example as follows.
A) Using pure CSS.
B) Using Javascript
Explanation A:
In CSS, we depend on 2 more things whether we are using DIV structure or we are using TABLE method.
A.1 Using DIV:
If we are using div structure building my page and i use line-height to vertical align the text and text-align to horizontally align the text.
A.2 Using Table:
If I am using method table, then I would like to center the text in the middle of cell. This miracle will hold true if and only if I use text vertical-align:middle and horizontal-align:center.
Note: the text should be written in tag .
CSS in body as:
I love Allah
I Love Islam
B: Using Javascript
Use min-height in the td and use vertical align and texl-align properties to center and middle the texts by x-axis and y-axis respectively.
But there is only one problem it will create a bug report in IE6, 7. because IE7, IE8 do not understand min-height. So we have IE9.js file which you download it using google. and put the script in the head of html document. Also put the latest jquery file first and then put the IE9.js script after it.
and in css enjoy min-height property and how far as your text grows, the text will automatically be in the middle of the table cells.
If you are using DIV then it is same process.
I hope this will make you something extra. And you will not need to use Google once again.