i create a css file with styled-components for my callcomposite, but when i deployed my application, some os these css properties, dont work.
how can i add a property css to my callcomposite inside components, like controlbar, video, buttons, etc... without losing it?
and the second, question, how can i customize background from this callcomposite root?
<Container>
<CallComposite adapter={callAdapter} />
</Container>
in my container, i have some css using styled components.
export const Container = styled.div`
height: 100vh;
.ms-Dropdown-title {
background: #ffffff;
border-radius: 5px;
border: none;
font-family: "Poppins", sans-serif !important;
font-size: 11px;
}
.ms-Stack .css-131 .ui-icon {
color: black;
}
.ui-icon {
color: black;
}
.ms-Button--primary {
width: 364px;
height: 54px;
border: none;
background: #28dc8e;
border-radius: 8px;
filter: drop-shadow(5px 4px 10px rgba(0, 0, 0, 0.25)) !important;
}
.ms-Dropdown-label {
font-family: "Poppins", sans-serif !important;
color: white;
}
`;
At this time we only expose styles at the component layer through fluent-style styling. Currently in design we are exploring the use of design tokens, css-like variables oriented towards user facing naming conventions than css terms that a web developer would better understand.
Please come and share your issue on our github issues at
https://github.com/Azure/communication-ui-library/issues and we can see if we can help you out.
Related
I am really stoked about the HTML5 date picker.
The caveat is that I don't see or foresee much in the way of applying colors to the picker itself which is going to make the use of the datepicker kind of a deal-breaker on most sites. The <select> suffers from widespread JavaScript-replacement hacks for the simple reason that people can't make it pretty.
So are there any known styling options for the HTML input of type='date'?
The following eight pseudo-elements are made available by WebKit for customizing a date input’s textbox:
::-webkit-datetime-edit
::-webkit-datetime-edit-fields-wrapper
::-webkit-datetime-edit-text
::-webkit-datetime-edit-month-field
::-webkit-datetime-edit-day-field
::-webkit-datetime-edit-year-field
::-webkit-inner-spin-button
::-webkit-calendar-picker-indicator
So if you thought the date input could use more spacing and a ridiculous color scheme you could add the following:
::-webkit-datetime-edit { padding: 1em; }
::-webkit-datetime-edit-fields-wrapper { background: silver; }
::-webkit-datetime-edit-text { color: red; padding: 0 0.3em; }
::-webkit-datetime-edit-month-field { color: blue; }
::-webkit-datetime-edit-day-field { color: green; }
::-webkit-datetime-edit-year-field { color: purple; }
::-webkit-inner-spin-button { display: none; }
::-webkit-calendar-picker-indicator { background: orange; }
<input type="date">
Currently, there is no cross browser, script-free way of styling a native date picker.
As for what's going on inside WHATWG/W3C...
If this functionality does emerge, it will likely be under the CSS-UI standard or some Shadow DOM-related standard. The CSS4-UI wiki page lists a few appearance-related things that were dropped from CSS3-UI, but to be honest, there doesn't seem to be a great deal of interest in the CSS-UI module.
I think your best bet for cross browser development right now, is to implement pretty controls with JavaScript based interface, and then disable the HTML5 native UI and replace it. I think in the future, maybe there will be better native control styling, but perhaps more likely will be the ability to swap out a native control for your own Shadow DOM "widget".
It is annoying that this isn't available, and petitioning for standard support is always worthwhile. Though it does seem like jQuery UI's lead has tried and was unsuccessful.
While this is all very discouraging, it's also worth considering the advantages of the HTML5 date picker, and also why custom styles are difficult and perhaps should be avoided. On some platforms, the datepicker looks extremely different and I personally can't think of any generic way of styling the native datepicker.
FYI, I needed to update the color of the calendar icon which didn't seem possible with properties like color, fill, etc.
I did eventually figure out that some filter properties will adjust the icon so while i did not end up figuring out how to make it any color, luckily all I needed was to make it so the icon was visible on a dark background so I was able to do the following:
body { background: black; }
input[type="date"] {
background: transparent;
color: white;
}
input[type="date"]::-webkit-calendar-picker-indicator {
filter: invert(100%);
}
<body>
<input type="date" />
</body>
Hopefully this helps some people as for the most part chrome even directly says this is impossible.
found this on Zurb Foundation's GitHub
In case you want to do some more custom styling. Here's all the
default CSS for webkit rendering of the date components.
input[type="date"] {
-webkit-align-items: center;
display: -webkit-inline-flex;
font-family: monospace;
overflow: hidden;
padding: 0;
-webkit-padding-start: 1px;
}
input::-webkit-datetime-edit {
-webkit-flex: 1;
-webkit-user-modify: read-only !important;
display: inline-block;
min-width: 0;
overflow: hidden;
}
input::-webkit-datetime-edit-fields-wrapper {
-webkit-user-modify: read-only !important;
display: inline-block;
padding: 1px 0;
white-space: pre;
}
I used a combination of the above solutions and some trial and error to come to this solution.
I am using styled-components to render a transparent date picker input as shown in the image below:
const StyledInput = styled.input`
appearance: none;
box-sizing: border-box;
border: 1px solid black;
background: transparent;
font-size: 1.5rem;
padding: 8px;
::-webkit-datetime-edit-text { padding: 0 2rem; }
::-webkit-datetime-edit-month-field { text-transform: uppercase; }
::-webkit-datetime-edit-day-field { text-transform: uppercase; }
::-webkit-datetime-edit-year-field { text-transform: uppercase; }
::-webkit-inner-spin-button { display: none; }
::-webkit-calendar-picker-indicator { background: transparent;}
`
You can use the following CSS to style the input element.
input[type="date"] {
background-color: red;
outline: none;
}
input[type="date"]::-webkit-clear-button {
font-size: 18px;
height: 30px;
position: relative;
}
input[type="date"]::-webkit-inner-spin-button {
height: 28px;
}
input[type="date"]::-webkit-calendar-picker-indicator {
font-size: 15px;
}
<input type="date" value="From" name="from" placeholder="From" required="" />
I am currently working on the CSS-styling of a Warning statement.
This is a icon + a statement in this specific case. The code is as follow:
$sSCP .warning:before {
color: #E40613;
background-color: #fafafa;
font-size: 15px;
margin-left: 0px;
width: auto;
content:"\f071 WARNING"; /* <-- Font icon + statement*/
}
It works all fine, but now my question!
Is there a way to change the static value "WARNING", written behide the content property to a dynamic one? I use translationfiles where all basic var/attr/strings have been translated.
Now it would be great if I can manage a import at var-ID level.
I was actually wondering if css can do this.
cheers,
Frank
Are you using a CSS preprocessor like SASS or LESS?
Because with CSS this isn't possible. You can manipulate content via javascript or print in the variable on the server.
Another suggestion is that you can maybe add a class for each language and then change the content based on the class.
eg:
$sSCP .warning:before {
color: #E40613;
background-color: #fafafa;
font-size: 15px;
margin-left: 0px;
width: auto;
content:"\f071 WARNING"; /* <-- Font icon + statement*/
}
$sSCP .warning.french:before {
color: #E40613;
background-color: #fafafa;
font-size: 15px;
margin-left: 0px;
width: auto;
content:"\f071 ATTENTION"; /* <-- Font icon + statement*/
}
$sSCP .warning.spanish {
color: #E40613;
background-color: #fafafa;
font-size: 15px;
margin-left: 0px;
width: auto;
content:"\f071 ADVERTENCIA"; /* <-- Font icon + statement*/
}
I want to style different hyperlinks in different ways. Right now, I have a button that is a hyperlink, and I want to add a text that should act like a hyperlink too. How do I do this without styling both hyperlinks together. I want each hyperlink to have different colors, positioning etc.
CSS
.example2 {
text-decoration: none;
font-size: 14px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: bold;
background-color: #CC4A31;
color: #444;
border-radius: 9px;
position: absolute;
top: 16px;
left: 38px;
height: 50px;
width: 145px;
webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
vertical-align: middle;
text-align: center;
line-height: 50px;
}
.example {
color: black;
}
HTML
<div class="example2">
GameTrade
</div>
<div class="example">
Sign in
</div>
Now how do I add another hyperlink, that is styled separately?
What you call styles, is, in case you don't know also called CSS, which stands for Cascade Style Sheets, this type of language allows you among other things to specify an hierarchy between rules.
Having said this, in CSS you can have 3 basic types of style rules, the ones that target the TAG of elements, the ones that target the class of elements (<a class="foo">my link</a>) and the ones that target elements by ID (<a id="btnSubmit">submit</a>), I obviously hide much information here with the intent to make it simple for you to understand.
So to achieve your end, you can create a rule that targets elements with TAG <a>, and in rule you specify the properties that are generic to all links.
This gives you what you already have, now to target different links you have two options or you give then diferente IDs and you target each separately, or you add one class to the class attribute so you can distinguish between both.
Here is an example:
HTML
<a class="link-trade1" href="">GameTrade 1</a><br/>
<a class="link-trade2" href="">GameTrade 2</a>
CSS
a {
text-decoration: none;
font-size: 14px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: bold;
background-color: #CC4A31;
color: #444;
border-radius: 9px;
webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
vertical-align: middle;
text-align: center;
}
.link-trade1{
position: absolute;
top: 16px;
left: 38px;
height: 50px;
line-height: 50px;
width: 145px;
}
.link-trade2{
position: absolute;
top: 16px; /* other y position for the link 2 */
left: 38px; /* other x position for the link 2 */
height: 50px;
line-height: 50px;
width: 145px;
}
You can switch the class name for IDs if you don't intent to reuse the rules targeting that specific classes.
Anyway there is a very good book you can read, if you are new to CSS and HTML, by Freeman.
Happy Coding.
Update
The updated question is a good example, just watch this:
/* this rule targets all hyperlinks inside, elements (div in your case) with attribute class="example" */
.example a{
...
}
/* this rule targets all hyperlinks inside, elements with attribute class="example2" */
.example2 a{
...
}
So as you can see, remember the hierarchy I was talking about? Is because of this, in the example just above you first target specific div's the ones with example class or example2 class and then you specify which elements to style inside them. You can build more elaborated rules!
Using your HTML
<div class="example2">
GameTrade
</div>
<div class="example">
Sign in
</div>
I'm guessing the styling isn't working because there is CSS overriding yours. Try this CSS:
.example2 a {
color: #444;
}
.example a {
color: black;
}
If that doesn't work try adding !important tags.
I am really stoked about the HTML5 date picker.
The caveat is that I don't see or foresee much in the way of applying colors to the picker itself which is going to make the use of the datepicker kind of a deal-breaker on most sites. The <select> suffers from widespread JavaScript-replacement hacks for the simple reason that people can't make it pretty.
So are there any known styling options for the HTML input of type='date'?
The following eight pseudo-elements are made available by WebKit for customizing a date input’s textbox:
::-webkit-datetime-edit
::-webkit-datetime-edit-fields-wrapper
::-webkit-datetime-edit-text
::-webkit-datetime-edit-month-field
::-webkit-datetime-edit-day-field
::-webkit-datetime-edit-year-field
::-webkit-inner-spin-button
::-webkit-calendar-picker-indicator
So if you thought the date input could use more spacing and a ridiculous color scheme you could add the following:
::-webkit-datetime-edit { padding: 1em; }
::-webkit-datetime-edit-fields-wrapper { background: silver; }
::-webkit-datetime-edit-text { color: red; padding: 0 0.3em; }
::-webkit-datetime-edit-month-field { color: blue; }
::-webkit-datetime-edit-day-field { color: green; }
::-webkit-datetime-edit-year-field { color: purple; }
::-webkit-inner-spin-button { display: none; }
::-webkit-calendar-picker-indicator { background: orange; }
<input type="date">
Currently, there is no cross browser, script-free way of styling a native date picker.
As for what's going on inside WHATWG/W3C...
If this functionality does emerge, it will likely be under the CSS-UI standard or some Shadow DOM-related standard. The CSS4-UI wiki page lists a few appearance-related things that were dropped from CSS3-UI, but to be honest, there doesn't seem to be a great deal of interest in the CSS-UI module.
I think your best bet for cross browser development right now, is to implement pretty controls with JavaScript based interface, and then disable the HTML5 native UI and replace it. I think in the future, maybe there will be better native control styling, but perhaps more likely will be the ability to swap out a native control for your own Shadow DOM "widget".
It is annoying that this isn't available, and petitioning for standard support is always worthwhile. Though it does seem like jQuery UI's lead has tried and was unsuccessful.
While this is all very discouraging, it's also worth considering the advantages of the HTML5 date picker, and also why custom styles are difficult and perhaps should be avoided. On some platforms, the datepicker looks extremely different and I personally can't think of any generic way of styling the native datepicker.
FYI, I needed to update the color of the calendar icon which didn't seem possible with properties like color, fill, etc.
I did eventually figure out that some filter properties will adjust the icon so while i did not end up figuring out how to make it any color, luckily all I needed was to make it so the icon was visible on a dark background so I was able to do the following:
body { background: black; }
input[type="date"] {
background: transparent;
color: white;
}
input[type="date"]::-webkit-calendar-picker-indicator {
filter: invert(100%);
}
<body>
<input type="date" />
</body>
Hopefully this helps some people as for the most part chrome even directly says this is impossible.
found this on Zurb Foundation's GitHub
In case you want to do some more custom styling. Here's all the
default CSS for webkit rendering of the date components.
input[type="date"] {
-webkit-align-items: center;
display: -webkit-inline-flex;
font-family: monospace;
overflow: hidden;
padding: 0;
-webkit-padding-start: 1px;
}
input::-webkit-datetime-edit {
-webkit-flex: 1;
-webkit-user-modify: read-only !important;
display: inline-block;
min-width: 0;
overflow: hidden;
}
input::-webkit-datetime-edit-fields-wrapper {
-webkit-user-modify: read-only !important;
display: inline-block;
padding: 1px 0;
white-space: pre;
}
I used a combination of the above solutions and some trial and error to come to this solution.
I am using styled-components to render a transparent date picker input as shown in the image below:
const StyledInput = styled.input`
appearance: none;
box-sizing: border-box;
border: 1px solid black;
background: transparent;
font-size: 1.5rem;
padding: 8px;
::-webkit-datetime-edit-text { padding: 0 2rem; }
::-webkit-datetime-edit-month-field { text-transform: uppercase; }
::-webkit-datetime-edit-day-field { text-transform: uppercase; }
::-webkit-datetime-edit-year-field { text-transform: uppercase; }
::-webkit-inner-spin-button { display: none; }
::-webkit-calendar-picker-indicator { background: transparent;}
`
You can use the following CSS to style the input element.
input[type="date"] {
background-color: red;
outline: none;
}
input[type="date"]::-webkit-clear-button {
font-size: 18px;
height: 30px;
position: relative;
}
input[type="date"]::-webkit-inner-spin-button {
height: 28px;
}
input[type="date"]::-webkit-calendar-picker-indicator {
font-size: 15px;
}
<input type="date" value="From" name="from" placeholder="From" required="" />
For a Windows 8 Application, I can create AppBar style buttons using 'Segoe UI Symbol' but they have drawn in a rectangle area therefore has a rectangle background. Since I want to set their background to a different color during hover, I need to get rid of this rectangle.
As pointed out in below question, the button and the style are defined like shown.
Please give a direction how this can be accomplish.
create image from character
HTML:
<button id="myAppBarIcon" class="normal-size-icon"></button>
CSS:
.normal-size-icon {
margin-top: 400px;
margin-left: 630px;
position: relative;
font-size: 24px;
font-family: 'Segoe UI Symbol';
color: rgb(255, 255, 255);
background: none;
border: none;
}
Update:
Below code does the trick but font is not properly aligned. Probably because it is not made to align properly. Image below shows the layout.
.normal-size-icon {
font-size: 24px;
font-family: 'Segoe UI Symbol';
color: rgb(555, 255, 255);
min-width: 0;
min-height: 0;
border-radius: 50%;
border-style: solid;
padding: 0;
text-align: center;
}
For this point you need to set border-radius:50%; so you your button will change shape to circle then add min-width:0; min-height:0; and text-align:center; here is the full css :
.normal-size-icon {
font-size: 24px;
font-family: 'Segoe UI Symbol';
color: rgb(555, 255, 255);
min-width: 0;
min-height: 0;
border-radius: 50%;
border-style: solid;
padding: 0;
text-align: center;
}
if you don't need border you can set border:none;. Sorry for my bad english
This behavior is driven by the CSS hover selector, and the default CSS there for a button will provide something that aligns with the light or dark theme, e.g.,
button:hover, input[type=button]:hover, input[type=reset]:hover,
input[type=file]::-ms-browse:hover {
background-color: rgba(255, 255, 255, 0.13);
border-color: rgb(255, 255, 255);
}
You could override this very specifically with something like:
.normal-size-icon:hover {
background-color: red;
}
but there are likely additional states and objects for which you'd want similar treatment.
Take a look at the ui-light.css and ![ui-dark.css][1] that's included in your References; all the answers are in there :)