I'm working with MDC and trying to apply a ripple effect to my slider thumb. I followed the documentation and added the sass mixins, but the styles will only apply if I select the entire slider, not just the thumb. I've tried a number of different Sass combinations to select the thumb/container but none have worked. I also tried moving the styles to the global sass file instead of the component styles and that was also unsuccessful.
MDC Documentation
//These styles apply
.mdc-slider{
#include mdc-ripple-surface;
#include mdc-ripple-radius-unbounded(100%);
#include mdc-states($action-blue, true);
#include mdc-states-base-color($action-blue);
#include mdc-states-hover-opacity(.1);
#include mdc-states-focus-opacity(.26);
#include mdc-states-press-opacity(.26);
}
//These do not
.mdc-slider__thumb{
#include mdc-ripple-surface;
#include mdc-ripple-radius-unbounded(100%);
#include mdc-states($action-blue, true);
#include mdc-states-base-color($action-blue);
#include mdc-states-hover-opacity(.1);
#include mdc-states-focus-opacity(.26);
#include mdc-states-press-opacity(.26);
}
.mdc-slider__thumb-container{
#include mdc-ripple-surface;
#include mdc-ripple-radius-unbounded(100%);
#include mdc-states($action-blue, true);
#include mdc-states-base-color($action-blue);
#include mdc-states-hover-opacity(.1);
#include mdc-states-focus-opacity(.26);
#include mdc-states-press-opacity(.26);
}
<mdc-slider min="0" max="50" value="35"></mdc-slider>
Related
I am trying to implement theme switching between three themes. Dark, Light and a 3rd theme.
My idea is to define 3 variable.less files, one for each theme. In the file, I re-define antd colors. reset.less will import variable.less to reset colors defined in antd.less.
Like the code below:
// dark theme
.dark {
#import '~ant-design-vue/dist/antd.less';
#import "styles/asia-info/themes/dark-theme/reset.less";
#import "styles/asia-info/themes/dark-theme/components.less";
#import (css) "../common.css";
}
// Light theme
.light {
#import "~ant-design-vue/dist/antd.less";
#import "styles/asia-info/themes/light-theme/reset.less";
#import "styles/asia-info/themes/light-theme/components.less";
#import (css) "../common.css";
}
//3rd theme
.china-mobile {
#import '~ant-design-vue/dist/antd.less';
#import "styles/china-mobile/reset.less";
#import "styles/china-mobile/components.less";
#import (css) "../common.css";
}
But the above code does not work. I think the problem is you cannot import same antd.less file in less. I tried to add (multiple) keyword when import the same file, but it takes forever for vue-cli to compile. So now what I am doing is:
// dark theme
.dark {
#import '~ant-design-vue/dist/antd.less';
#import "styles/asia-info/themes/dark-theme/reset.less";
#import "styles/asia-info/themes/dark-theme/components.less";
#import (css) "../common.css";
}
// light theme (import and.less and common.css in main.js in Vue)
#import "styles/asia-info/themes/light-theme/reset.less";
#import "styles/asia-info/themes/light-theme/components.less";
// 3rd theme
.china-mobile {
#import '~ant-design-vue/dist/antd.less';
#import "styles/china-mobile/reset.less";
#import "styles/china-mobile/components.less";
#import (css) "../common.css";
}
If I only have dark and light theme, I import antd.less in main.js for the light theme, and import antd.less 2nd time inside .dark for the dark theme. It seems to work.
But when I add the 3rd theme, since same antd.less imported again, when I switch to the 3rd theme, colors does not change.
Right now, the solution I can see is to reset colors for each antd classes in the 3rd theme. But this is really troublesome, there are so many classes I have to reset.
Wondering if there is a better solution?
I have the following code snippet in my SCSS to modify the CSS according to device size.
.cu-list-project li{
#media (min-width: #screen-md-min) {
width: 60%;
#include project-list;
}
}
But Sass gives the following error:
*error styles/sass/styles.scss (Line 108: Invalid CSS after "...ia (min-width: ": expected expression (e.g. 1px, bold), was
"#screen-md-min) {").
Apparently, "#screen-md-min" is not recognized by Sass. What should I do?
P.S: I know I can change #screen-md-min to 992px but this will not be a best practice. So, I'm looking for a real solution not a workaround. thanks.
Looking at the source code for the bootstrap-sass, you should use $screen-md-min e.g.
#media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
#include responsive-visibility('.visible-md');
}
From line 89 on Github
I'm having some elements that are using a compass shadow mixin. As the arguments are the same I want to have them in a variable. I thought this is what variable arguments are for, but obviously I'm doing something wrong as the following does not work:
// my shadow style
$shadow: #000000, 0px, 0px, 20px;
.list {
#include single-box-shadow($shadow...);
}
This should be the same as
.list {
#include single-box-shadow(#000000, 0px, 0px, 20px);
}
But while the second example works, the first one is compiling to
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
What am I doing wrong here?
Compass version is 0.12.2 and SASS is 3.2.3.
edit: I'm compiling with yeoman, maybe it uses a different (older) version? How can I check that?
The single-box-shadow mixin does not use variable arguments (see: http://compass-style.org/reference/compass/css3/box_shadow/#mixin-single-box-shadow).
When you invoke the mixin using your variable, what you're essentially doing is this:
#include single-box-shadow((#000000, 0px, 0px, 20px));
The entire list is being passing as the first argument of the mixin: $color. If you want to reuse specific box-shadow values either use the box-shadow mixin with a space delimited list or create your own custom box-shadow mixin.
I have the following code that is suppose to sleep the display on a Mac. I've tried it on Lion but it doesn't seem to do anything. I tested the code by creating a barebones window Mac app with a button in the window and an IBAction method. When the button is pressed, the function below is called, however nothing happens.
Any suggestions as to why it doesn't work?
#include <CoreFoundation/CoreFoundation.h>
#include <IOKit/IOKitLib.h>
int display_sleep(void)
{
io_registry_entry_t reg = IORegistryEntryFromPath(kIOMasterPortDefault, "IOService:/IOResources/IODisplayWrangler");
if (reg)
{
IORegistryEntrySetCFProperty(reg, CFSTR("IORequestIdle"), kCFBooleanTrue);
IOObjectRelease(reg);
}
else
{
return 1;
}
return 0;
}
I'm trying to using SASS with ExtJS 4 but some variables aren't working.
My SASS config:
# $ext_path: This should be the path of where the ExtJS SDK is installed
# Generally this will be in a lib/extjs folder in your applications root
# <root>/lib/extjs
$ext_path = "../lib/extjs"
# sass_path: the directory your Sass files are in. THIS file should also be in the Sass folder
# Generally this will be in a resources/sass folder
# <root>/resources/sass
sass_path = File.dirname(__FILE__)
# css_path: the directory you want your CSS files to be.
# Generally this is a folder in the parent directory of your Sass files
# <root>/resources/css
css_path = File.join(sass_path, "..", "_css")
# output_style: The output style for your compiled CSS
# nested, expanded, compact, compressed
output_style = :expanded
# We need to load in the Ext4 themes folder, which includes all it's default styling, images, variables and mixins
load File.join(sass_path, '..','resources','themes')
And this is my SCSS File:
// Wenn man alle Komponenten einbinden möchte, muss die Variabel $include-default auf true gestellt werden
// Wenn diese auf true stehen sollte, könnte man die Einzel-Includes entfernen
$include-default: false;
// Theme Name:
$theme-name: 'MyTheme';
// Custom Variabeln:
$base-color: #ffe067; /* Hauptfarbe */
$color: #595959; /* Text Standard Farbe */
$font-size: 12px; /* Text Standard Größe */
$font-family: arial,verdana,sans-serif; /* Text Standard Art */
$base-gradient: 'glossy';
$background-color: #ff0000;
$ui-header-background-color: #ff0000;
$ui-header-background-gradient: green;
$ui-header-inner-border-color: #ff0000;
$background-color-over: #ff0000;
$background-gradient-over: #ff0000;
$background-color-focus: #ff0000;
$background-gradient-focus: #ff0000;
$background-color-pressed: #ff0000;
$background-gradient-pressed: #ff0000;
$background-color-disabled: #ff0000;
$background-gradient-disabled: #ff0000;
#import 'ext4/default/all';
// Einzelne Module können entfernt werden, falls diese nicht benötigt werden,
// dies kann man machen um die CSS zu minimieren
#include extjs-boundlist;
#include extjs-button;
#include extjs-btn-group;
#include extjs-datepicker;
#include extjs-colorpicker;
#include extjs-menu;
#include extjs-grid;
#include extjs-form;
#include extjs-form-field;
#include extjs-form-fieldset;
#include extjs-form-checkboxfield;
#include extjs-form-checkboxgroup;
#include extjs-form-triggerfield;
#include extjs-form-htmleditor;
#include extjs-panel;
#include extjs-qtip;
#include extjs-slider;
#include extjs-progress;
#include extjs-toolbar;
#include extjs-window;
#include extjs-messagebox;
#include extjs-tabbar;
#include extjs-tab;
#include extjs-tree;
#include extjs-drawcomponent;
#include extjs-viewport;
The variables like $base-color and $font-size are working, but $background-color doesn't work. Any tips?
All variables that have been pre-defined for use are located in the /extjs4/resources/themes/stylesheets/ext4/default/variables folder. There are several files there with many different variables per each one. You should look through these files carefully and ensure that the variables above are actually in there.
Additionally, the widgets folder contains the ui mixin definitions. These are useful as well, and they are applied a bit differently than a variable.
The following guide: http://docs.sencha.com/ext-js/4-0/#!/guide/theming contains more detailed information, and would likely be helpful.
In the file comments: /**
* #mixin background-gradient
* #param {Color} $background-color The background color of the gradient
So i tried to use $background-gradient and $bg-color without any change..