I would like to customize the css a md-form-field for exemple.
I know that I can import a native material theme but I dont have the white color in the palette https://www.materialpalette.com/
I want to change the
$primary: mat-palette($mat-orange, 800);
$accent: mat-palette($mat-light-blue, 600, 100, 800);
To white #FFF
#import '~#angular/material/theming';
#include mat-core();
$primary: mat-palette($mat-orange, 800);
$accent: mat-palette($mat-light-blue, 600, 100, 800);
$warn: mat-palette($mat-red, 600);
$theme: mat-light-theme($primary, $accent, $warn);
#include angular-material-theme($theme);
Any Ideas ?
You can define your own palette.
#import '~#angular/material/theming';
#include mat-core();
// Your custom palette
//
$mat-white: ( 100: #FFF, 200: #FFF, 300: #FFF, 400: #FFF, 500: #FFF, 600: #FFF, 700: #FFF,
800: #FFF, 900: #FFF, A100: #FFF, A200: #FFF, A400: #FFF, A700: #FFF,
contrast: ( 50: $black-87-opacity, 100: $black-87-opacity, 200: $black-87-opacity,
300: $black-87-opacity, 400: $black-87-opacity,
500: white, 600: white, 700: white, 800: white, 900: white,
A100: $black-87-opacity, A200: $black-87-opacity,
A400: white, A700: white, ) );
//
$primary: mat-palette($mat-white, 800);
$accent: mat-palette($mat-white, 600, 100, 800);
$warn: mat-palette($mat-red, 600);
$theme: mat-light-theme($primary, $accent, $warn);
#include angular-material-theme($theme);
However, if you only want to change css of one control and keep the same theme for rest of the controls, then I will advise you to override that controls styles only.
Related
I spent full-day to solve this issue, however, I couldn't fix this yet.
I tried to animate opacity from 0 to 1 by webkit animation for ios. however it doesn't work, and the element I applied the animation does not appear. I don't have the same issue with other devices. thank you for your help in advance.
these are solutions I tried.
set visibility:visible to web-kitKeyframes
change "from - to" to"0% to 100%" of web-kitKeyframes
.hello {
position: absolute;
top: 50%;
left: 100%;
transform: translate(-50%, -50%);
text-align: center;
font-size: 5em;
/* for iOS's opacity issue */
color: white;
opacity:0;
-webkit-opacity: 0;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #f75998;
animation:fadein 0.5s 0.8s forwards;
-webkit-animation: fadein 0.5s 0.8s forwards; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 0.5s 0.8s forwards; /* Firefox < 16 */
-ms-animation: fadein 0.5s 0.8s forwards; /* Internet Explorer */
-o-animation: fadein 0.5s 0.8s forwards; /* Opera < 12.1 */
}
#-webkit-keyframes fadein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
appear the element by following the animation setting.
-webkit-opacity has its fallback a plain opacity. Try modeling that with your keyframe by writing:
#keyframes fadein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
In your animation you animate the opacity property, and don't the -webkit-opacity property. However you can try to remove all -webkit- prefixes and look in a webkit browser if it works.
I'm developing a mobile app with Cordova Phonegap that uses gradients that stack on top of eachother. On Android everything works as it is supposed to but on iOS the gradients shows up different. The edges are green whereas when I preview it in my browser it is blue as it's supposed to be. There's also this weird transition at the bottom of the page.
This is my css:
#gradient2Layer1 {
position: fixed;
height: 100px;
bottom: 0;
left: 0;
height: 20%;
width: 100%;
color = "blue";
background: -webkit-linear-gradient(270deg, rgba(15,431,28,0) 35%, #b3c6ff 50%,rgb(128,128,128) 100%);
z-index: 100; }
#gradient2Layer2 {
position: fixed;
height: 100px;
bottom: 0;
left: 0;
height: 20%;
width: 100%;
opacity: 0.5;
color = "blue";
background: -webkit-linear-gradient(270deg, rgba(15,431,28,0) 35%, blue 50%, blue 100%);
animation: fadeIn 5s infinite alternate;
z-index: 100; }
How can I fix this?
I really believe this is a typo and you wanted to use rgba(15,43,128,0) (which is the shade of blue you're looking for) instead of rgba(15,431,28,0), which is not even a valid RGB value (limited to 0..255).
I was trying to implement a sort of motionblur effect in my page and tought to simply specify a blend function for the main framebuffer
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
gl.enable(gl.BLEND);
and not to clear the gl.COLOR_BUFFER_BIT in my draw routine
//gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(/*gl.COLOR_BUFFER_BIT |*/ gl.DEPTH_BUFFER_BIT);
I expected to see the screen getting filled with old color values that would have never cleaned up but the actual result is the same as if I cleared the color_buffer_bit to white
Here's the link to the test page with all the code in it, it's very simple since it just plot a function on screen with colored particles
http://deepdown.altervista.org/WebGl/test/sample.html
is the color buffer cleared anyway if I don't specify so?
what need to be done in order to keep the rendered colors in each buffer without having them overwritten?
You might find this answer useful.
The short version is, by default WebGL clears the drawingBuffer.
As for alpha issues there's this answer.
The specification is totally clear about all of this. It's just that it's a specification and is extremely detailed and hard to follow as it's over 300 pages long since it's not only the WebGL spec but the WebGL spec says it's based on the OpenGL ES 2.0 spec and the GLSL ES 1.0 spec.
Why have an alpha buffer? Because it's HTML and all other elements have alpha. You can set text or background colors to rgba(255,0,0,0.5). You can display .PNG files with alpha transparency, and the 2D canvas has alpha and transparency so so does WebGL as the default.
Setting alpha to false is a concession to non-HTML based apps (ie, ports).
So, the down side is not being able to have transparency with the rest of the page. Not the best sample but here is one of the first examples of this. Without alpha you couldn't do that.
As for how to blend, blending with the webpage is by default using premulitplied alpha.
Otherwise if you want things to stack up you need probably need to blend with additive blending
gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
Example:
"use strict";
var m4 = twgl.m4;
var gl = twgl.getWebGLContext(document.getElementById("c"), { preserveDrawingBuffer: true } );
var programInfo = twgl.createProgramInfo(gl, ["vs", "fs"]);
var arrays = {
position: [-1, -1, 0, 1, -1, 0, -1, 1, 0, -1, 1, 0, 1, -1, 0, 1, 1, 0],
};
var bufferInfo = twgl.createBufferInfoFromArrays(gl, arrays);
function rand(min, max) {
return Math.random() * (max - min) + min;
}
function render(time) {
gl.enable(gl.BLEND);
gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
var matrix = m4.identity();
m4.translate(matrix, [rand(-1, 1), rand(-1, 1), 0], matrix);
m4.scale(matrix, [rand(0.1, 0.2), rand(0.1, 0.2), 1], matrix);
var color = [Math.random(), Math.random(), Math.random(), 0.1];
var preMultipliedColor = [color[0] * color[3], color[1] * color[3], color[2] * color[3], color[3]];
var uniforms = {
matrix: matrix,
color: preMultipliedColor,
};
gl.useProgram(programInfo.program);
twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
twgl.setUniforms(programInfo, uniforms);
twgl.drawBufferInfo(gl, gl.TRIANGLES, bufferInfo);
requestAnimationFrame(render);
}
requestAnimationFrame(render);
.msg {
display: flex;
justify-content: center;
align-content: center;
align-items: center;
width: 300px;
height: 150px;
}
.msg>div {
width: 200px;
}
canvas {
position: absolute;
left: 5px;
top: 5px;
border: 1px solid black;
}
<script src="https://twgljs.org/dist/twgl-full.min.js"></script>
<script id="vs" type="notjs">
attribute vec4 position;
uniform mat4 matrix;
void main() {
gl_Position = matrix * position;
}
</script>
<script id="fs" type="notjs">
precision mediump float;
uniform vec4 color;
void main() {
gl_FragColor = color;
}
</script>
<div class="msg"><div>lets put some text under the canvas so we can see if things are blending and
being composited 😎😎😎😎</div></div>
<canvas id="c"></canvas>
Having border-radius issues on iPad(3.2), iPad 2 (4.3.2).
Here's the code:
.articles .post .left img{
width:100%;
border-radius: 0 0 100% 0;
-moz-border-radius: 0 0 100% 0;
-khtml-border-radius: 0 0 100% 0;
-webkit-transition: border-radius 1s;
transition-delay: 0.1s;
transition-duration: 0.5s;
transition-property: all;
transition-timing-function: ease;
}
And this is the result I'm getting:
Any ideas on how to get the desired result I'm after?
On iOS 4, use border-radius css on the container of img and set over-flow:hidden.
the container will 'cut' the img into rounded cornor.
its a tweak.
Try adding
-webkit-border-radius: 0 0 100% 0;
As Safari on IOS5 needs that to render border radius.
Is it possible to have the two divs with box-shadow overlap with fully transparent edges? In my example, I want to keep the faded, kind of rounded edge, but it's important that the underlying box is visible through the fade. But as you can see the faded edge is not entirely transparent so it will show a white border rather than let the blue color shine through..
Is it possible to make this work without resorting to png or similar?
Example
.bg {
background-image: -moz-linear-gradient(right top , rgba(255, 255, 255, 0) 0%, #FF0000 100%);
box-shadow: 0 0 90px 90px rgba(255, 255, 255, 0) inset;
-webkit-box-shadow: 0 0 90px 90px rgba(255, 255, 255, 0) inset;
-moz-box-shadow: 0 0 90px 90px rgba(255, 255, 255, 0) inset;
opacity: 0.7;
position: absolute;
}
I don't know whether this is possible with inset box-shadow; however you can make them overlap seamlessly with outset box-shadow for the overlapping element.
All you have to do is give the overlapping element a box-shadow color that is the same as its background-color.
I have edited your sample here: (I didn't copy all the vendor-specific prefixes, just used box-shadow).
http://jsbin.com/orajot/4/edit