::-webkit-scrollbar-thumb {
#include themify {
background-color: $ant-scroll-color !important;
}
border-radius: 10px;
}
Above code snippet is not working
Requirement is to integrate dark and light theme for web component. I just want to change the scroll bar color in chrome according light and dark theme . Above #include themify method is used to configure colors. but this method isn't working with ::-webkit-scrollbar-thumb
Answer:
1. add this code in to mixins.scss . basically you are creating cutoms
mixin for scroll bar colors
#mixin scrollbars() {
// For Google Chrome
#include themify {
&::-webkit-scrollbar-thumb {
background: $ant-scroll-color;
}
}
#include themify {
&::-webkit-scrollbar-thumb:hover {
background: $ant-scroll-color;
}
}
#include themify {
&::-webkit-scrollbar-track {
background: $white-color;
}
}
// For Internet Explorer
& {
scrollbar-face-color: $ant-scroll-color;
scrollbar-track-color: $ant-scroll-color;
}
}
2. add a ref to div which that use scroll in styles.scss
.customDiv{
overflow:auto:
#include scrollBars();
}
Related
I'm building a responsive web app with Bootstrap 4. I want the font size of all text to be reduced on mobile devices compared to desktop, so I added the following to my base css file as per the Bootstrap documentation (https://getbootstrap.com/docs/4.0/content/typography/):
html {
font-size: 1rem;
}
#include media-breakpoint-up(sm) {
html {
font-size: 1.2rem;
}
}
#include media-breakpoint-up(md) {
html {
font-size: 1.4rem;
}
}
#include media-breakpoint-up(lg) {
html {
font-size: 1.6rem;
}
}
However the font size remains fixed. What am I doing wrong?
As of Bootstrap 4.3.1, there is now RFS (Responsive Font Sizing)! However, as explained in the docs, you must enable it using the $enable-responsive-font-sizes SASS variable.
RFS Demo: https://www.codeply.com/go/jr8RbeNf2M
Before Bootstrap 4.3.1, you'd can implement responsive text using SASS. However you need to specify the desired appropriate selector(s) for text that you want to resize...
#import "bootstrap/functions";
#import "bootstrap/variables";
#import "bootstrap/mixins";
html {
font-size: 1rem;
}
#include media-breakpoint-up(sm) {
html {
font-size: 1.1rem;
}
}
#include media-breakpoint-up(md) {
html {
font-size: 1.2rem;
}
}
#include media-breakpoint-up(lg) {
html {
font-size: 1.3rem;
}
}
#import "bootstrap";
Demo: https://www.codeply.com/go/5pZDWAvenE
This could also be done using CSS only (no SASS):
Demo: https://www.codeply.com/go/E1MVXqp21D
I think the easiest way is to use #media Queries. Suppose you want to change the font size responsively for a content with class "class-name" or even for entire html tag, just add your media queries to end of your css file or any place inside it.
Sample code:
/*
####################################################
M E D I A Q U E R I E S
####################################################
*/
/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap 4 breakpoints
*/
/* Small devices (landscape phones, 544px and up) */
#media (min-width: 544px) {
.class-name {font-size: 16px;}
}
/* Medium devices (tablets, 768px and up) */
#media (min-width: 768px) {
.class-name {font-size: 30px;}
}
/* Large devices (desktops, 992px and up) */
#media (min-width: 992px) {
.class-name {font-size: 40px;}
}
/* Extra large devices (large desktops, 1200px and up) */
#media (min-width: 1200px) {
.class-name {font-size: 48px;}
}
more information can be found here
This is a Sass feature.
To have access to the media-breakpoint mixins and the size variables, you need to:
add a custom.scss file
#import "node_modules/bootstrap/scss/bootstrap";
and setup a Sass compiler
https://getbootstrap.com/docs/4.0/getting-started/theming/
Not a complete answer, but a good starting point is to enable responsive font sizes in v.4.5
$enable-responsive-font-sizes: true;
#import "../../../node_modules/bootstrap/scss/bootstrap";
Here is an alternative approach with loop
#import "bootstrap/functions";
#import "bootstrap/variables";
#import "bootstrap/mixins";
$font-sizes: (
html: ( xs: 1rem, sm: 1.2rem, md: 1.3rem),
);
#each $breakpoint in map-keys($grid-breakpoints) {
#include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
#each $name, $values in $font-sizes {
#each $n, $value in $values {
#if($infix == "-#{$n}" or ($infix == "" and $n == 'xs')) {
#{$name} { font-size: $value; }
}
}
}
}
}
I have used ngAnimateSwap to translate elements horizontally, vertically. However are other types of animations supported, such as opacity (fade-in and fade-out?)
When I modify the example that appears here animateSwap to use opacity instead of the top value, then the animation does not occur. Is this expected?
I was able to get it working using opacity. You have to play around with the css and understand what css element does what. Here's a plunkr of animateSwap being used with an opacity transition.
The original css is:
.swap-animation.ng-enter {
top:-250px;
}
.swap-animation.ng-enter-active {
top:0px;
}
.swap-animation.ng-leave {
top:0px;
}
.swap-animation.ng-leave-active {
top:250px;
}
I changed that to the following and I now have a crossfade working just fine:
.swap-animation.ng-enter {
top:0px;
opacity:0;
}
.swap-animation.ng-enter-active {
top:0px;
opacity:1;
}
.swap-animation.ng-leave {
top:0px;
opacity:1;
}
.swap-animation.ng-leave-active {
top:0px;
opacity:0;
}
I am building a mobile first website using Susy and would like to have different layouts for different screen sizes. Each layout will have its own set of columns, column widths and gutter widths.
How do I do this?
My Attempts:
1. Old Susy method
In old Susy, you would do it like this:
$base-font-size: 10px;
$show-grid-backgrounds : true;
$total-columns : 4;
$column-width : 6.250em;
$gutter-width : 1em;
$gutter-padding : $gutter-width;
body {
background:pink;
}
#media only screen and (min-width: 480px) {
$total-columns : 3;
/*$column-width : 12.567em;
$gutter-width : 3em;
$gutter-padding : $gutter-width;*/
body {
background:yellow;
}
}
#media only screen and (min-width: 600px) {
$total-columns : 6;
/*$column-width : 7.500em;
$gutter-width : 2em;
$gutter-padding : $gutter-width;*/
body {
background:blue;
}
}
#media only screen and (min-width: 768px) {
$total-columns : 6;
/*$column-width : 7.500em;
$gutter-width : 2em;
$gutter-padding : $gutter-width;*/
body {
background:green;
}
}
#media only screen and (min-width: 960px) {
$total-columns : 6;
/*$column-width : 8.833em;
$gutter-width : 3em;
$gutter-padding : $gutter-width;*/
body {
background:red;
}
}
[The background colors is so I can tell it is working]
In New Susy, when I do this, the number of columns is always 6 regardless of screen size. They are also not the correct column size.
2. Breakpoint Method
New Susy has a new break point method which lets you specify different columns for different layouts. This is how I have used it:
$base-font-size: 10px;
$show-grid-backgrounds : true;
$total-columns : 4;
$column-width : 6.250em;
$gutter-width : 1em;
$gutter-padding : $gutter-width;
body {
background:pink;
}
.layout-primary {
#include container;
#include susy-grid-background;
}
#include at-breakpoint(480px 3) {
.layout-primary {
#include container;
}
}
#include at-breakpoint(600px 6) {
.layout-primary {
#include container;
}
}
#include at-breakpoint(768px 6) {
.layout-primary {
#include container;
}
}
When I use this code, the columns are now always stuck at 4, regardless of layout. You also cannot use this method to specify different column widths/padding values.
Susy is so awesome that I know I am misunderstanding something. But I've spent a long time going over the docs and trying different things, and cannot see what I am doing wrong.
I know I have asked this question before, but that was for the old Susy version.
The reason you are seeing 4-columns in the background at each breakpoint, is beacuase you have only declared #include susy-grid-background; in the 4-column context. I think someone has already filed a bug to create a breakpoint/background shortcut, so that will be coming soon. In the meantime, you'll have to re-call that mixin everywhere you call container.
#include at-breakpoint(600px 6) {
.layout-primary {
#include container;
#include susy-grid-background;
}
}
But you're right, at-breakpoint only allows for changes to column-count at this point. I would like to expand that, so if you file a bug on github, I'll happily take a look at it. In the meantime there is a with-grid-settings mixin that allows you to change all the basic settings (I'm also hoping to get the advanced settings in there if I can soon).
#include at-breakpoint(600px 6) {
#include with-grid-settings(6,6em,1em,1em) {
.layout-primary {
#include container;
#include susy-grid-background;
}
}
}
I want to either make a link in Extjs or make a button look like a link and on hover you see the button. They do this in the docs with Code Editor button and the Live Preview button.
If they do this using CSS, what CSS do I use and when/how to I apply it?
I recently wanted a LinkButton component. I tried to find a pre-existing component without any luck, so I ended up writing one from scratch. Its implementation is almost entirely CSS-based.
/******************************************************************************/
/*** LINK BUTTON CSS **********************************************************/
/******************************************************************************/
a.ux-linkbutton {
background-image: none;
border: 0px none;
margin-top: 1px;
}
a.ux-linkbutton.x-btn-default-small-focus {
background-color: inherit;
}
a.ux-linkbutton * {
font-size: inherit !important;
}
a.ux-linkbutton:hover {
text-decoration: underline;
background-color: inherit;
}
/******************************************************************************/
/*** LINK BUTTON JS ***********************************************************/
/******************************************************************************/
Ext.define( "Ext.ux.button.LinkButton", {
extend: "Ext.button.Button",
alias: "widget.linkbutton",
cls: "ux-linkbutton",
initComponent: function() {
this.callParent();
this.on( "click", this.uxClick, this, { priority: 999 } );
},
// This function is going to be used to customize
// the behaviour of the button and click event especially as it relates to
// its behaviour as a link and as a button and how these aspects of its
// functionality can potentially conflict.
uxClick: function() {
//Ext.EventObject.preventDefault();
//Ext.EventObject.stopEvent();
//Ext.EventObject.stopPropagation();
//return false;
}
} );
The click handler is a work-in-progress.
The class does have one minor issue: a pseudo-class style is applied after clicking/focusing that I have not been able to remove. If someone fixes it before I do, please, post the CSS for it.
With Ext 4.0.7 I had managed to do the following:
View:
...
{
xtype: 'button'
,text: 'Discard changes'
,action: 'cancel'
,cls: 'secondary-action-btn'
}
CSS:
....
.secondary-action-btn {
border: none;
background: none;
}
.secondary-action-btn span {
cursor: pointer;
text-decoration: underline;
}
I recall there is an extension called linkButton. You can refer to the extjs forum here
I have generate automatic sprite classes with
#import "icons/*.png";
#include all-icons-sprites;
The import and include will magically generate classes like:
.icons-application_go {
background-position: 0 -16px;
}
(which corresponds to icons/application_go.png file)
However, I need to include my sprites so that the resulting classes looks like this
.x-btn-icon.icons-application_go {
background-position: 0 -16px;
}
.x-btn-icon.icons-delete {
background-position: 0 0;
}
I've tried to do
.x-btn-icon {
#include all-icons-sprites;
}
but it will result in
.x-btn-icon .icons-application_go {
background-position: 0 -16px;
}
.x-btn-icon .icons-delete {
background-position: 0 0;
}
,so selecting childs of .x-btn-icon but not elements with class="x-btn-icon icons-delete"
Right now, I have
.x-btn-icon.icons-add { #include icons-sprite(add); }
in my SASS. But I would need to do this manually for every item. I have exactly 1000 icons in this set, so this would be tedious :-)
Is there a way to loop through all icons name (like "add") and output
.x-btn-icon.icons-$foo { #include icons-sprite($foo); }
?
As per suggestion from #cram1010, I've also tried
#import "icons/*.png";
$icons-sprite-base-class: "&.icons-";
.x-btn-icon {
#include all-icons-sprites;
}
But I got the following error:
Invalid CSS after "": expected selector, was "&.icons-"
(in /Users/pasc/projects/bss-io-demo/vendor/gems/bss-io-app/app/assets/stylesheets/bss.io.app.css.scss)
Following works. The key is referencing parents selectors.
Sass:
#mixin all-icons-sprites {
&.icons-application_go {
background-position: 0 -16px;
}
&.icons-delete {
background-position: 0 0;
}
}
.x-btn-icon {
#include all-icons-sprites;
}
Is compiled to following CSS:
.x-btn-icon.icons-application_go {
background-position: 0 -16px;
}
.x-btn-icon.icons-delete {
background-position: 0 0;
}
UPDATE 1
It seems I misunderstood the question, as your mixin is automatically generated.
Have you tried of changing the $<map>-sprite-base-class option for sprites in compass, so it includes the referencing parent selectors &?
$icons-sprite-base-class: "&.icons-";
UPDATE 2
For the comments, it seems that it's not possible because of compass source code. So surely a new bug should be reported to the Compass team: github.com/chriseppstein/compass/issues