I add "footerAlarms" value in XML view but in HTML version it does not appear in the browser. So what can I do to see the class footerAlarms in HTML view.
<footer class="footerAlarms">
<Toolbar>
<ToolbarSpacer/>
<Link text="{i18n>readMeOss}" press="openSourceFileDownload" class="sapUiMediumMarginBegin LinkOss"/>
</Toolbar>
</footer>
footer.footerAlarms {
height: 42px !important;
width:calc(100%-32px);
margin:0 16px 0 16px !important;
background: #FFFFFF !important;
box-shadow:
0 1px 0 0 rgba(255,255,255,0.60),
inset 0 -1px 0 0 rgba(115,100,90,0.16);
}
My work around
onAfterRendering : function(){
$("footer").addClass("footerAlarms");
}
CSS
.footerAlarms {
height: 42px !important;
// space is needed for the value inside braces below
width:calc(100% - 32px);
margin:0 16px 0 16px !important;
background: #FFFFFF !important;
box-shadow:
0 1px 0 0 rgba(255,255,255,0.60),
inset 0 -1px 0 0 rgba(115,100,90,0.16);
}
You forgot dot before footer.footerAlarms, so it should be:
.footer.footerAlarms {
height: 42px !important;
width:calc(100%-32px);
margin:0 16px 0 16px !important;
background: #FFFFFF !important;
box-shadow:
0 1px 0 0 rgba(255,255,255,0.60),
inset 0 -1px 0 0 rgba(115,100,90,0.16);
}
Edited 291117 15:27 :
Sorry, so try this:
.footerAlarms {
height: 42px !important;
width:calc(100%-32px);
margin:0 16px 0 16px !important;
background: #FFFFFF !important;
box-shadow:
0 1px 0 0 rgba(255,255,255,0.60),
inset 0 -1px 0 0 rgba(115,100,90,0.16);
}
Related
I'm working on an angular app where I have mostly two classes of buttons, primary and warn. They have basically the same styles applied in the default stylesheet. However, the primary button (on the right in the screenshot below) is 1.5px taller, which is a small difference but makes the buttons look slightly off kilter. I tried to force both of them to have the same height, but that doesn't work. What would cause this?
styles and template:
button:disabled {
color: var(--text-disabled) !important;
background-color: var(--basic-button-bg) !important;
box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%) !important;
cursor: default;
border: 0 !important;
}
.primary:not([disabled]) {
background-color: var(--basic-button-bg) !important;
box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%) !important;
outline: 0;
color: var(--basic-button-color) !important;
border: 0 !important;
}
.warn:not([disabled]) {
background-color: var(--warn-button-bg) !important;
color: var(--warn-button-color) !important;
outline: 0;
border: 0 !important;
}
<button
i18n
i18n-aria-label
mat-raised-button
border-right
type="warn"
class="warn"
aria-label="close"
(click)="cancelCreateReport()"
>
Cancel
</button>
<button
mat-raised-button
type="primary"
class="primary"
(click)="createAndOpenReport()"
>
<b i18n>Create</b>
</button>
I want to add a small triangle to the upper-right corner of an input type='text' HTML element, like Excel uses to indicate a comment.
The accepted answer to this question:
How to add triangle in table cell
shows how to do it for a table cell. I naively applied the "note" css class to my input element but it didn't work. Any suggestions for how to achieve this?
Pseudo elements can't be used on input's. You can use the same CSS as described in the linked post (here) but you would have to apply the class to an ancestor.
.note {
position: relative;
display: inline-block;
}
.note:after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
display: block;
border-left: 20px solid transparent;
border-bottom: 20px solid transparent;
border-top: 20px solid #f00;
}
<div class="note">
<input type="text">
</div>
Given a simple input field
<input type="text" />
and assuming we can't use or rely on a parent element for styling, you may use multiple box-shadow to create a triangle, e.g.
Codepen demo
Result (triangle outside)
Code
input {
padding: 10px;
border: 1px #ccc solid;
margin: 15px;
box-shadow: 0 -12px 0 #fff, 12px 0px 0 #fff,
1px -12px 0 #fff, 2px -11px 0 #fff,
3px -10px 0 #fff, 4px -9px 0 #fff,
5px -8px 0 #fff, 6px -7px 0 #fff,
7px -6px 0 #fff, 8px -5px 0 #fff,
9px -3px 0 #fff, 10px -2px 0 #fff,
11px -1px 0 #fff, 12px 0 0 #fff,
8px -12px 0 #9bc;
}
Of course you can change the size of the triangle playing with the offset(y/x) of the box-shadow.
If you need to place the triangle inside the input you could just add a couple of properties to the code above and use outline and outline-offset instead of the border property to create the illusion of an outer border. All the shadows don't move from their position, just give enough space to the offset in order to wrap them.
Codepen demo
Result (triangle inside)
Code
input {
padding: 0;
border: 0;
outline: 1px #ccc solid;
outline-offset: 15px;
...
}
To mark all text inputs with red corner, you could use
textarea, input[type="text"], input:not([type]) {
background: linear-gradient(225deg, red 5px, white 5px);
}
If you want to mark only required fields, then use required attribute and selector:
[required] { background: linear-gradient(225deg, red 5px, white 5px); }
<input placeholder="optional field">
<input placeholder="mandatory field" required>
Is there any way to make effects like the in the images, with just CSS?
It would be sad to lose all precious SEO because of images replacing text.
Brightness around the text
http://i.stack.imgur.com/bISVC.png
Shining text
http://i.stack.imgur.com/T9ojb.jpg
I first thought of shadows and stuff but I can't figure anything out...
Try adding a shadow like this : text-shadow: 0 0 3px #0000FF;
These effects are achieved working with multiple shadows layering colors over a dark background.
Here is an example:
.glow{
font-family: Sans-serif;
font-size: 3rem;
background: black;
color: white;
padding: 80px;
text-shadow:
1px 1px 0px gold,
-3px -0 25px red,
3px 0px 3px white,
0px 0px 15px white,
15px 10px 10px black,
0 0 40px orangered,
0 0 40px orangered,
0 0 60px orangered,
0 0 80px orangered,
0 0 80px orangered,
0 0 100px orangered,
0 0 150px orangered;
}
<h1 class="glow">Glowing CSS only</h1>
I'm playing around with this font in css:
http://www.dafont.com/pix-lite.font
Is it possible to change the the inside color of it using just css?
I'm attaching a picture where I did what I'm looking for manually for reference.
This is what I want to do with css:
http://s9.postimg.org/7jp7b9pa7/Skive_2015_03_06_10_56_09.png
This is the closest I think you will get to having a text border.
http://jsfiddle.net/recwq5bg/
someElement {
text-shadow: 2px 0 0 #f00, -2px 0 0 #f00, 0 2px 0 #f00, 0 -2px 0 #f00, 1px 1px #f00, -1px -1px 0 #f00, 1px -1px 0 #f00, -1px 1px 0 #f00;
}
Hope this helps.
I don't know what happend with that font but it would help you: fiddle
span {
font-size: 30px;
color: red;
text-shadow: 1px 0 0 blue,-1px 0 0 blue, 0 1px 0 blue, 0 -1px 0 blue;
}
And HTML:
<span>Hello</span>
I am trying to get an inside shadow working on an input field in Chrome. Unfortunately, this doesn't really work out so far. You can view a jsfiddle over here: http://jsfiddle.net/XgsPT/2/
My CSS:
input {
margin-top: 15px;
margin-left: 15px;
-moz-box-shadow: inset 0 0 10px #000000;
-webkit-box-shadow: inset 0 0 10px #000000;
box-shadow: inset 0 0 10px #000000;
}
And this simple HTML:
<input type="text" width="30">
But no shadow appears... (Chrome 24)
Give border to input field and the box-shadow will finally work.
http://jsfiddle.net/Jx8xF/
input {
margin-top: 15px;
margin-left: 15px;
-moz-box-shadow: inset 0 0 10px #aaa;
-webkit-box-shadow: inset 0 0 10px #aaa;
box-shadow: inset 0 0 10px #aaa;
border: 1px solid #aaa;
}
The background color of the input is messing things up. Check out this updated fiddle, with this change to the CSS:
input {
/* ... rest as before ...*/
background-color: transparent;
}
Basically, WebKit doesn't allow us to add box-shadow to form controls with native appearance. We need to remove the nativa appearance.
input {
-webkit-appearance: none;
box-shadow: inset 0 0 10px #000000;
}
Also, some CSS properties such as border and background imply -webkit-appearance:none.
Rather than setting the background to transparent set it to white, or whatever colour you like, you just need to declare it and then it will work as it should