I am currently using angular material in my project and I have been asked to move input labels.
Currently when you start typing in an input, they move so the middle of the label is on the input top border.
I need to move them to just above the top of the input.
Here is an example of what it currently looks like:
I tried to fix this myself by adding this sass:
.mat-form-field-appearance-outline {
.mat-form-field-outline-start,
.mat-form-field-outline-end,
.mat-form-field-outline-gap {
border: 2px solid currentColor !important;
}
.mat-form-field-outline-gap {
border-left: none !important;
border-right: none !important;
}
.mat-form-field-outline-start {
border-radius: 25px 0 0 25px !important;
border-right: none !important;
}
.mat-form-field-outline-end {
border-radius: 0 25px 25px 0 !important;
border-left: none !important;
}
.mat-form-field-wrapper {
margin: 0 !important;
}
.mat-form-field-flex {
// This padding centers the text
padding: 2.75px 25px !important;
}
.mat-form-field-infix,
.mat-form-field-label-wrapper {
border-top: 5px solid transparent;
}
.mat-form-field-outline {
color: $off-white;
background-color: $off-white;
border-radius: 25px;
}
&.mat-form-field-invalid.mat-form-field-invalid .mat-form-field-outline-thick {
color: $warm-red; // TODO: Add the theming
}
&.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,
&.mat-form-field-can-float .mat-input-server:focus+.mat-form-field-label-wrapper .mat-form-field-label {
transform: translateY(-30px) scale(0.75);
}
}
.mat-form-field-label-wrapper {
padding-top: 10px;
}
It's only these lines that actually move the label:
.mat-form-field-appearance-outline {
&.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,
&.mat-form-field-can-float .mat-input-server:focus+.mat-form-field-label-wrapper .mat-form-field-label {
transform: translateY(-30px) scale(0.75);
}
}
.mat-form-field-label-wrapper {
padding-top: 10px;
}
But I want you to see the rest of the formatting we use.
The problem with my solution is that the text gets cut off:
Does anyone know how to fix this?
In my case (Angular Material 11.0.0) it is a working solution:
.mat-form-field-label-wrapper {
transform: translateY(-20px) !important;
}
.mat-form-field-label {
transform: translateY(-20px) !important;
}
edit: missing }
Related
I am using HTML and css from sharingbuttons.io for social media buttons on a web site.
The neural button is fine:
The hover button
changes the fill color as desired. But it also changes the text color. I want the text to remain white. How do I do that?
CSS
.resp-sharing-button__link,
.resp-sharing-button__icon {
display: inline-block
}
.resp-sharing-button__link {
text-decoration: none;
color: #fff;
margin: 0.5em
}
.resp-sharing-button {
border-radius: 5px;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif
}
.resp-sharing-button__icon svg {
width: 1em;
height: 1em;
margin-right: 0.4em;
vertical-align: top
}
.resp-sharing-button--small svg {
margin: 0;
vertical-align: middle
}
/* Non solid icons get a stroke */
.resp-sharing-button__icon {
stroke: #fff;
fill: none
}
/* Solid icons get a fill */
.resp-sharing-button__icon--solid,
.resp-sharing-button__icon--solidcircle {
fill: #fff;
stroke: none
}
.resp-sharing-button--twitter {
background-color: #55acee
}
.resp-sharing-button--twitter:hover {
background-color: #525250
}
.resp-sharing-button--facebook {
background-color: #3b5998
}
.resp-sharing-button--facebook:hover {
background-color: #525250
}
.resp-sharing-button--email {
background-color: #777
}
.resp-sharing-button--email:hover {
background-color: #525250
}
.resp-sharing-button--facebook {
background-color: #3b5998;
border-color: #3b5998;
}
.resp-sharing-button--facebook:hover,
.resp-sharing-button--facebook:active {
background-color: #525250;
border-color: #525250;
}
.resp-sharing-button--twitter {
background-color: #55acee;
border-color: #55acee;
}
.resp-sharing-button--twitter:hover,
.resp-sharing-button--twitter:active {
background-color: #525250;
border-color: #525250;
}
.resp-sharing-button--email {
background-color: #777777;
border-color: #777777;
}
.resp-sharing-button--email:hover,
.resp-sharing-button--email:active {
background-color: #525250;
border-color: #525250;
}
HTML
!-- Sharingbutton Facebook -->
<a class="resp-sharing-button__link" href="https://facebook.com/sharer/sharer.php?u=https%3A%2F%2Fexample.com" target="_blank" rel="noopener" aria-label="Facebook">
<div class="resp-sharing-button resp-sharing-button--facebook resp-sharing-button--medium"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.77 7.46H14.5v-1.9c0-.9.6-1.1 1-1.1h3V.5h-4.33C10.24.5 9.5 3.44 9.5 5.32v2.15h-3v4h3v12h5v-12h3.85l.42-4z"/></svg></div>Facebook</div>
</a>
Did you try to add color: #fff;? Like this:
.resp-sharing-button--facebook:hover,
.resp-sharing-button--facebook:active {
color: #fff;
background-color: #525250;
border-color: #525250;
}
On this:
.resp-sharing-button--facebook:hover {
background-color: #525250
}
you can just say
color: #fff or white;
but if you are specifically targeting the facebook text, I guess just add a div around the tags you have give it a class, and do
color: #fff;
I have an PrimeNg Tree (Angular 2) and I want to delete the selected nodes highlight color.
Image Here
Based on the image I want to delete the blue highlight color.
Instead I want to get this style: Style I want
Here are my styles:
.ui-tree {
width: 100%;
}
body .ui-widget-content {
border: none !important;
}
span.ui-treenode-label {
font-family: Poppins !important;
line-height: 24px !important;
font-size: 14px !important;
padding-left: 5px !important;
padding-right: 5px !important;
}
span.ui-treenode-icon {
line-height: 24px !important;
font-size: 1.2rem !important;
}
.ui-tree .ui-chkbox .ui-chkbox-icon {
margin-left: 0px;
}
.ui-tree .ui-treenode-children {
padding-left: 20px !important;
}
.hidden-tree-node {
display: none;
}
.ui-state-highlight .ui-widget-content {
color: white;
}
You can override the original style by setting:
span.ui-state-highlight {
background-color: transparent !important;
color: inherit !important;
}
A few solutions:
1) Use ng-deep
::ng-deep {
span.ui-state-highlight {
background-color: transparent;
color: inherit;
}
}
2)Target the element in a more specific way
span.ui-treenode-label.ui-corner-all.ui-state-highlight {
background-color: transparent;
color: inherit;
}
Also, try to use SASS. It will make your CSS more readable and smarter. You will love it. By the way you should remove the importance from your code. using importants is not good practice.
I have 20 different buttons on my page (class buttonCareCenter) and 10 different colors for its background.
Instead of using 10 times:
&:nth-child(10n + x) {
.btn.btn-primary {
background-color: #xxxxxx;
}
}
I would love to find a way to use a loop #for with nth-child to set the right colors for my buttons. But it seems that
#{$color-$i};
is not the right way to call my different variables.
$color-0: #ff5722;
$color-1: #ff4514;
$color-2: #647c8a;
$color-3: #3f51b5;
$color-4: #2196f3;
$color-5: #00b862;
$color-6: #afdf0a;
$color-7: #a7b61a;
$color-8: #f3e562;
$color-9: #ff9800;
.all-buttonCareCenter{
#for $i from 0 through 9 {
&:nth-child(10n + #{$i}) {
.btn.btn-primary {
background-color: #{$color-$i};
}
}
}
.buttonCareCenter{
height: $button-height;
border: 0;
box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.3);
}
}
Any ideas?
You could solve this by adding all the colors in another variable called $colors and loop through it. It's much easier to maintain if one of the colors change.
$button-height: 20px;
$color-0: #ff5722;
$color-1: #ff4514;
$color-2: #647c8a;
$color-3: #3f51b5;
$color-4: #2196f3;
$color-5: #00b862;
$color-6: #afdf0a;
$color-7: #a7b61a;
$color-8: #f3e562;
$color-9: #ff9800;
$colors: $color-0, $color-1, $color-2, $color-3, $color-4, $color-5, $color-6,
$color-7, $color-8, $color-9;
.all-buttonCareCenter {
#for $i from 1 through length($colors) {
&:nth-child(#{length($colors)}n+#{$i}) {
.btn.btn-primary {
background-color: nth($colors, $i);
}
}
}
.buttonCareCenter {
height: $button-height;
border: 0;
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.3);
}
}
See this CodePen example I created, click right top ยป View Compiled CSS to view the compiled code with all the iterations.
An other solution I found :
%color-0 {
background-color: #ff5722;
}
%color-1{
background-color: #ff4514;
}
%color-2 {
background-color: #647c8a;
}
%color-3{
background-color: #3f51b5;
}
%color-4 {
background-color: #2196f3;
}
%color-5{
background-color: #00b862;
}
%color-6 {
background-color: #afdf0a;
}
%color-7{
background-color: #a7b61a;
}
%color-8 {
background-color: #f3e562;
}
%color-9{
background-color: #ff9800;
}
#for $i from 0 through 9 {
&:nth-child(10n + #{$i}) {
.btn.btn-primary {
#extend %color-#{$i};
}
}
}
I want to change the scrollbar width wider, so it looks clear when user hover on it.
So I wrote:
::-webkit-scrollbar {
width: 7px;
height: 7px;
background-color: #ddd;
}
::-webkit-scrollbar:hover {
width: 10px;
height: 10px;
background-color: red;
}
The background color changed to red, but not the width, Is there anyway to solve this?
Here is plnkr
*:hover::-webkit-scrollbar {
width: 10px;
height: 10px;
}
This will change the width and height of any element's scrollbar. If you want to be more specific, just exchange the '*' to a selector of your choice. For instance, to apply it to scrollbars of elements with the class of 'my-custom-scrollbar':
.my-custom-scrollbar:hover::-webkit-scrollbar {
width: 10px;
height: 10px;
}
You can achieve that by using border instead of width:
::-webkit-scrollbar {
width: 7px;
height: 7px;
}
::-webkit-scrollbar-thumb {
background: #ababab;
border-radius: 10px;
border: 2px solid transparent;
background-clip: padding-box; // <== make the border work
}
::-webkit-scrollbar-thumb:hover{
border: 0;
}
::-webkit-scrollbar-track {
background: transparent;
}
this is a workaround I used using mousemove event:
document.addEventListener("mousemove", function(e){
let ele = document.getElementById('element');
let distance = ele.offsetLeft + ele.offsetWidth - e.pageX;
distance < 15 && distance > -15 ? ele.classList.add('more-width') : ele.classList.remove('more-width');
});
and styling would be
#element::-webkit-scrollbar-thumb {
background: #888;
}
#element::-webkit-scrollbar {
width: 5px;
}
#element.more-width::-webkit-scrollbar {
width: 10px;
}
codepen sample: https://codepen.io/KhaleD_D/pen/OJpgJKM
This solution uses scrollbar which is natively 16px large, but we show only 6px to make it thinner (and leave more space for content). But the trick is overflow: overlay which allows content to be displayed even over scrollbar area.
Using this approach you have thin scrollbar which enlarges on hover (and the hover are is a bit wider).
I got inspired by Khaled's solution, but I used CSS only approach:
.custom-scrollbar {
scrollbar-color: var(--gray) var(--secondary);
scrollbar-width: thin;
overflow: overlay !important;
}
.custom-scrollbar::-webkit-scrollbar {
width: 16px;
height: 16px;
background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-track-piece {
background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb:vertical {
background: linear-gradient(to left, var(--gray) 6px, transparent 0%);
}
.custom-scrollbar::-webkit-scrollbar-thumb:horizontal {
background: linear-gradient(to bottom, var(--gray) 6px, transparent 0%);
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
background: var(--gray);
}
I use following code to achieve increase width on hover effect.
Sadly, its working on Chrome and Edge only. My apologies for incorrect formatting.
* {
&::-webkit-scrollbar-thumb {
border: 5px solid transparent;
border-radius: 10px;
background-color: grey;
background-clip: content-box;
-webkit-background-clip: content-box;
}
&::-webkit-scrollbar-thumb:hover {
background-color: black;
background-clip: border-box;
-webkit-background-clip: border-box;
}
&::-webkit-scrollbar {
width: 16px;
height: 16px;
background-color: transparent;
}
}
the element that won't change is in this page (http://www.animefansftw.org/community/threads/fate-kaleid-liner-prisma%E2%98%86illya-3rei.641/add-reply)
the code that doesn't seem to take effect is
body[style="overflow-y: hidden; min-height: 259px; background: black none repeat scroll 0% 0%;"]
{
background: blue !important;
}
my real questunion is why it doesn't work & how to make it work
my Style(FF v47.0.1)
#namespace url(http://www.w3.org/1999/xhtml);
#-moz-document domain("animefansftw.org")
{
a:link{color: #b7e2fb !important;}
a:visited{color: #1eadff !important;}
a:hover{color: green !important;}
a:active{color: red !important;}
*, body, #content-wrapper, #footer-widgets,
single-post,.discussionList .discussionListItem.sticky .posterAvatar,
.discussionList .discussionListItem.sticky .stats,
.discussionList.discussionListItem.moderated .listBlock,
.discussionListItem.InlineModChecked .posterAvatar,
.discussionListItem.InlineModChecked .main,
.discussionListItem.InlineModChecked .stats,
.discussionListItem.InlineModChecked .lastPost,
.discussionListItem.moderated.InlineModChecked,
.discussionListItem.deleted .posterAvatar
{
background: black;
color: white !important;
}
.footer-widgets-border-left, #DiscussionListOptionsHandle a
{
background: #00004d;
}
.footer-widgets-border-right
{
background: #000080;
}
img[alt="default"]
{
-webkit-filter: invert(100%);
filter: invert(100%);
}
.cat-list li.ep-title:hover
{
background: gray !important;
border-left: 5px solid #f5f211;
border-right: 5px solid #1143f2;
}
li.ep-title
{
margin: 0 !important;
background: black !important;
border-bottom: 3px solid #00004d;
border-left: 0px solid transparent !important;
border-right: 0px solid transparent !important;
}
.dl-box
{
background: black;
border: 1px solid black;
box-shadow: -10px -10px 5px 0px #00004d;
}
.dl-title
{
background: -moz-linear-gradient(45deg, #00004d, blue, blue, #00004d);
}
.post-date .date, #social-wrapper, #nav, h3.newanimetitle,
#footer-bottom, .hasFlexbox .nodeList .categoryStrip,
.hasFlexbox .sidebar .visitorPanel .secondaryContent,
.sidebar .section .secondaryContent,
.threadListSeparator,.discussionList .sectionFooter
{
background: -moz-linear-gradient(top, #00004d, #000080, #000080, #00004d) no-repeat !important;
}
.dl-item
{
background: #1a1a1a;
}
#header-bottom
{
float: left;
background: url("http://puu.sh/2b5au.jpeg") #000000 !important;
width: 980px;
height: 165px;
}
#respond textarea
{
font-family: "Times New Roman", Times, serif;
font-size: large !important;
background: #00001a !important;
border: 1px solid #00004d !important;
}
.nodeList .node.level_1
{
background: #00001a !important;
box-shadow: 1px 2px 3px #00001a;
}
.nodeList .categoryStrip
{
border-top: 2px solid blue;
}
.hasFlexbox .node.level_2 .nodeInfo, .visitorPanel .stats dl,
.blendedEditor .redactor_box .redactor_toolbar
{
background: 0;
}
.hasFlexbox .message .messageUserInfo
{
background: #00001a !important;
}
div[style="background: #eeeeee; width: 620px; margin: 0 auto; padding:15px; font: 10pt italic; border: 1px solid #333333;"],
.message .dark_postrating.likesSummary, .dark_postrating
{
background: rgb(0, 0, 26) none repeat scroll 0% 0% !important;
}
.quickReply,.mainContainer .mainContent, .mainContainer_noSidebar
{
background: #00001a;
border-top: 2px solid #000080;
}
.blendedEditor .redactor_box .redactor_toolbar, .messageList .message
{
border-top: 2px solid #000080;
}
body[style="overflow-y: hidden; min-height: 99px;"],
.submitUnit .button, .redactor_toolbar
{
background: rgb(0, 0, 26) none repeat scroll 0% 0% !important;
}
element, body[style="overflow-y: hidden; min-height: 259px; background: black none repeat scroll 0% 0%;"]
{
background: blue !important;
}
}
Remember the basic rule of css hierarchy for implication and importance:
Inline - highest importance
Internal
External
To my understanding of css, and Whatever I am able to get from your code is you have first implied a css property as !important to a parent element, and then might have used something on child.
Though remember it will not show its impact even on implying !important, as it is under that parent property. So, you need to write inline css for it, though not recommended.
e.g: if font-size is set as 15px!important to parent itself, then an inline css is used to change font-size of a child.
The best rule I follow is never imply !important property until it is the last possible solution. You can use better and unique names for your classes and ids, if you are worried it will get disturbed with some other piece of code.