semantic-org / semantic-ui-less Goto Github PK
View Code? Open in Web Editor NEWLESS only distribution
Home Page: http://www.semantic-ui.com
LESS only distribution
Home Page: http://www.semantic-ui.com
Please add it to npm
After upgrading to 2.2.11, the scrollbar in <Menu>
is always visible. Previously, it was autohidden when the user is not scrolling. I guess this is related to this: 35ae43a#diff-3d63baaee7a5b15570f2d403e194b021R134
Is there a reason why a simple scrollbar should be forced? Is this a bug or a feature?
Webpack 4 builds failed which included Semantic-UI less files that featured a web font:
Can't resolve './https://fonts.googleapis.com/css?family=Roboto' in '/MY_PROJECT_DIR/node_modules/semantic-ui-less/themes/material/elements'
The following comment on another repo answered my problem; Import url tries to resolve directory #67
To assist Webpack to load Semantic-UI less files, which include web fonts downloaded from a CDN such as Google, please add Less Import Option css
.
For example; themes/material/elements/button.overrides
would change from;
@import url(https://fonts.googleapis.com/css?family=Roboto);
.ui.primary.button:hover {
box-shadow:
0px 0px 0px 1px rgba(0, 0, 0, 0.3) inset,
0px 2px 3px 0px rgba(0, 0, 0, 0.35) !important
;
}
.ui.secondary.button:hover {
box-shadow:
0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset,
0px 2px 3px 0px rgba(0, 0, 0, 0.3) !important
;
}
to;
@import (css) url(https://fonts.googleapis.com/css?family=Roboto);
.ui.primary.button:hover {
box-shadow:
0px 0px 0px 1px rgba(0, 0, 0, 0.3) inset,
0px 2px 3px 0px rgba(0, 0, 0, 0.35) !important
;
}
.ui.secondary.button:hover {
box-shadow:
0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset,
0px 2px 3px 0px rgba(0, 0, 0, 0.3) !important
;
}
Hi !
Is there a way to remove some colors completely to reduce size of generated css ?
I do not use 60% of the colors and there is no benefit to compile them.
The same applies to sizes..
Thanks !
I'm trying to use semantic-ui-less with existing vue.js 2 project.
I'm getting the following:
ERROR Failed to compile with 1 errors
error in ./node_modules/semantic-ui-less/semantic.less
Module build failed:
// load the styles
var content = require("!!../css-loader/index.js??ref--9-1!../postcss-loader/lib/index.js??ref--9-2!../less-loader/dist/cjs.js??ref--9-3!./semantic.less");
^
Unrecognised input
in (some_path)/node_modules/semantic-ui-less/semantic.less (line 4, column 12)
Here's my webpack config:
module: {
rules: [
{
test: /\.css$/,
use: ['vue-style-loader', 'css-loader']
},
{
test: /\.less$/,
use: ['vue-style-loader', 'css-loader', 'less-loader']
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
(...)
```
Any ideas what I'm doing wrong?
Can't load icon fonts using windows 7.
Add to change fontPath var from
@fontPath : '../../themes/default/assets/fonts';
to
@fontPath : '../assets/fonts';
Quote from readme:
Before using source files you will need to create a theme.config by renaming theme.config.example, and a site folder by renaming _site/ to site/
So when I install it as dependency e. G. via NPM, you want me to make changes in vendor directory?
The components all import theme.config from the repositories own source location, which is as dependency a vendor directory.
Normally you have:
This way, you can: simply use 4. or, in my case: copy 1. in my Project folder, modify it. Import it, then import 3. - voilà. A common approach for an easy task.
My first thoughts after finding this was: Okay, maybe wrong repo which is not intended for this type of usage, but:
I'v looked through all semantic repos and could not find any repo which is themable
via variables and does not introduce vendor hacking.
Sure I can just grab all the stuff and copy it into my project, or do other possible dirty things. But I work with dozens of other modules using webpack and all deps are resolved properly. I do not have vendor in VCS and if I update deps, everything is fine resolved and rebuild. Why must this repo be handled as an outsider with manual handling and dirty hacks?
Is there a reason, why the approach I'v mentioned above is not possible or used here? I assume a reason is there I'm not aware of, or its maybe planed change?
Using Semantic Container Component with fluid passed as props still gets a max-width 1480px above 1200px
The Container should have width as 100% or auto if fluid prop has been passed.
The Container does not is not fluid even though it gets the class fluid because .ui.container gets a max-width css property which is not overwritten when fluid class is added.
shapes.less contains this:
.ui.shape.animating .sides {
transition: @transition;
}
After providing my own themes.config, setting @transition to 'default' I get the following in the compiled semantic.css file:
.ui.shape.animating .sides {
-webkit-transition: 'default';
transition: 'default';
}
So it seems that @transition is resolved with the value in the themes.config file instead of the value in the shape.variables file.
This results in the shape animation transitions not working.
This is my webpack config for less files:
module: {
rules: [
{ test: /\.less$/, loader: ExtractTextPlugin.extract('css-loader?sourceMap!postcss-loader!less-loader?sourceMap') }
...
]
},
plugins: [
...
new ExtractTextPlugin('./public/[name].css')
],
devtool: '#source-map',
entry: {
semantic: './src/semantic.less'
},
output: {
filename: './public/[name].css'
}
};
there are some instances, step, dropdowns, rating, checkbox, accordion that use data:
/* Dropdown Carets */
@font-face {
font-family: 'Dropdown';
src:
url(data:application/x-font-ttf;charset=utf-8;bas
As per
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/font-src
This is unsafe, could you please replace this data: with references to specific assets inside semantic-ui folders?
Webpack currently is able to build this package semantic-ui without problems, but on production this is very unsecure use of data:
The solution is simple and just replacing this for the asset could fix it
Thanks
Thanks for making this project!
Is there a list of all the variables available that we can define in our override files?
While semantic-ui and semantic-ui-sass are available in bower, semantic-ui-less is not. Would it be possible to get this added to bower?
Main repo release is at 2.2.6 for some time now but the less is not updated.
Please fix this, thanks.
When I import semantic-ui-less in my Vue Project, everything is setup. Getting this error.
Module build failed:
;(function ($, window, document, undefined) {
^
Missing closing ')'
in /Users/Developer/ui/node_modules/semantic-ui-less/definitions/modules/transition.js (line 11, column 44)
I have my own, custom Gulp build system that I'm trying to use with this repo. It's working great, except for one thing; I can't seem to change the path that the exported CSS looks for the icon sets on the server.
I tried putting @fontPath: "fonts";
in my site.variables
file, but that didn't change anything.
Is there anyway to change this?
When running gulp I get "No gulpfile found".
Am I doing something wrong? Is there a clear guide on how to install semantic-ui-less?
Thanks,
Module build failed (from ./node_modules/less-loader/dist/cjs.js):
@theme: @@element;
^
Recursive variable definition for @placeholder
in ..\node_modules\semantic-ui-less\theme.less (line 9, column 8)
Been getting this error with the 2.4.1 release and am trying to figure out what this means.
@import (multiple) "~semantic-ui-less/theme.less";
I do have the proper import.But I am just not sure where this error is coming form?
Any suggestions to tackle this error?
Doesn't work
@fontPath : '../../themes/default/assets/fonts';
Works
@fontPath : '../../../themes/default/assets/fonts';
Steps to repro:
theme.config.example
to theme.config
The compilation should fail due to font lookup from [...]/themes/themes/default[...]
.
when trying to set the theme as material in theme.config, I get
Module not found: Error: Can't resolve './themes/material/assets/images/flags.png' in /node_modules/semantic-ui-less
way to reproduce - jus change set the theme in theme.config as material instead of default for all components.
solution - copying the images folder from the default theme to material solves the issue.
All LESS files should have .less file extension. It not only best practice to do so but also there are issues with webpack loaders which do not recognise and do not process correctly .variables and .overrides files. theme.config
file should have .less extension as well.
Furthermore when including other less files, path should have .less extension (see for example semantic.less imports)
Hi all,
I'm hoping to be able to use the LESS stuff in my application, and after a comment from @splendido on crater, I thought I'd have a quick look and see what I could get done.
Here is the initial set of changes I've made to the package to allow me to import it into a Meteor application.
The changes I made are fairly lightweight, but as far as I can see will not allow for external themes to be applied over the top, but it's a start! Here are the steps I took:
SemanticUI-LESS$ find . -type f -name "*.overrides" -exec mv "{}" "{}".import.less \;
SemanticUI-LESS$ find . -type f -name "*.variables" -exec mv "{}" "{}".import.less \;
themes/
to themes
, and site/
to _site
, and theme.less
to theme.less.import.less
)theme.less to
theme.less.import.lessor
theme.import.less` (I used the former to follow the pattern I used on the overrides/variables files).import.less
on the files changed, and add theme.config
to the addFiles array.If you're not familiar with the less processor in Meteor, it will ignore files ending .import.less
.
The package now processes all the remaining .less
files in the order they are in the array provided to api.addFiles()
. This order may need changing to match the build order if some parts of the LESS depend on others. My knowledge of LESS is rather shallow, and I've only really had a short look at the gulp build stuff.
A brief experiment has shown that I cannot set something like @button: 'amazon';
and have it affect the build process inside the package. My current plan is to find out if having the Semantic-UI-LESS
package include only the default theme, and reference the main repository for any theme examples. If that works (I can't see why not), then my next investigation will be into whether I can use and imply the main package in a theme package and add my LESS theme into that as a custom package... we shall see!
Anyhow, this is the start I've made, let me know what you think etc :)
I have a VueJS App and I want to integrate Semantic UI. I installed the package and necessary loaders. I keep getting an error when trying to compile:
These relative modules were not found:
* ./themes/themes/default/assets/fonts/brand-icons.eot in ./node_modules/css-loader??ref--10-oneOf-2-1!./node_modules/postcss-loader/lib??ref--10-oneOf-2-2!./node_modules/less-loader/dist/cjs.js??ref--10-oneOf-2-3!./node_modules/semantic-ui-less/semantic.less
In my theme.config I have the following lines
/*******************************
Folders
*******************************/
/* Path to theme packages */
@themesFolder : "themes";
/* Path to site override folder */
@siteFolder : 'site';
/*******************************
Import Theme
*******************************/
@import "node_modules/semantic-ui-less/theme.less";
/* End Config */
The ./themes/themes[...]
is very suspisious, of course that folder structure doesn't exist.
Any suggestions? Thanks!
Anyone familiar with this error?
Error in plugin 'gulp-less'
Message:
'site//modules/transition.overrides' wasn't found. Tried - /Users/hey/projects/superpages/frontend/semantic/site/modules/transition.overrides,site/modules/transition.overrides in file /Users/hey/projects/superpages/frontend/semantic/theme.less line no. 47
Details:
type: File
filename: /Users/hey/projects/superpages/frontend/semantic/theme.less
index: 1082
line: 47
callLine: NaN
callExtract: undefined
column: 2
extract: @import "@{themesFolder}/@{theme}/@{type}s/@{element}.overrides";, @import "@{siteFolder}/@{type}s/@{element}.overrides";,}
lineNumber: 47
fileName: /Users/hey/projects/superpages/frontend/semantic/theme.less
In v2.3.0 and v2.3.1, <Modal>
components does not appear horizontally and vertically centered, but instead in the top left, half way out of the screen.
Works in v2.2.14.
Used with semantic-ui-react v0.79.1.
The @brandFontName
variable is not consumed in icon.overrides
as it should be.
I have an open PR with the fix.
If I want to use different icon libraries aside from those offered by SUI, overriding the @brandFontName
variable should render the icons that I want.
Overriding the @brandFontName
variable does not render my third-party icons.
https://github.com/Semantic-Org/Semantic-UI-LESS/blob/master/definitions/collections/menu.less#L457 <-- This line overrides the definition for disabled items in inverted menus at https://github.com/Semantic-Org/Semantic-UI-LESS/blob/master/definitions/collections/menu.less#L1367, since the rule for non-inverted menus is defined with !important
.
Semantic-UI-LESS/themes/default/elements/button.variables
Lines 167 to 170 in 35ae43a
There is a duplicated variable on themes/default/elements/button.variables
file.
semantic-ui-less 2.4.1
less 3.9.0
Running in a Rails 5.2 app using webpacker 3.5.5.
@borderWidth: 1px;
@attachedHorizontalOffset: -@borderWidth;
@attachedWidth: calc(100% + (-@attachedHorizontalOffset * 2));
results in @attachedWidth
being calc(100% + (--1px * 2))
, which is not valid.
I'm only having this happen in my development environment. Possibly a minifier/compressor is correcting to calc(100% + 2px)
.
Adding this override fixes it:
@attachedWidth: calc(100% + (@attachedHorizontalOffset * -2));
The actual version is 2.1.3, but on https://www.npmjs.com/package/semantic-ui-less is available only old 2.0.8.
Shouldn't this use @groupedBoxShadow
? Seems this variable isn't applied to any Group Segments besides the standalone version.
If you pick a different secondaryPointingInvertedBorderColor
value than secondaryPointingBorderColor
, it would not be used.
Semantic-UI-LESS/definitions/collections/menu.less
Lines 979 to 987 in 5ee99ea
Should we swap both those rules?
Planning on using this with my Elm app, and moving away from Bootstrap. At the moment we use Webpack to copy over the node_modules/font-awesome/fonts directory to our app's assets/fonts directory. Will I need to do something similar when using this LESS framework, or does it include the fonts already? Thanks.
I use this template:
<html>
<head>
<meta charset="UTF-8">
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.css" rel="stylesheet"/>
<!--<link href="semantic.css" rel="stylesheet"/>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.js"></script>
</head>
<body>
<form class="ui form">
<div class="required field">
<label>Nick</label>
<div class="ui input">
<input type="text" placeholder="Nick" name="nick">
</div>
</div>
<button class="ui submit button">Submit</button>
</form>
<script>
$('form').form({
nick: {
identifier: 'nick',
rules: [
{
type: 'empty',
prompt: 'Required'
}
]
}
}, {
inline: true,
on: 'blur'
});
</script>
</body>
</html>
If I use semantic.css from dist, everything works.
But, if I compile semantic.css using less, transitions don't work.
I created a theme.config by renaming theme.config.example, and a site folder by renaming _site/ to site/
I use this command:
lessc node_modules/semantic-ui-less/semantic.less semantic.css
Due to this bug the promt label won't disappear.
I do not want to use react-semantic-ui because it is a pain getting modules like dropdown
to render correctly. I have all the styles and actionless components working with only this build through some webpack magic, but I cannot get the js files to register.
Right now I have an app with a client.js entry that imports the following:
semantic.js
//Import jQuery and define for Semantic-UI-Less Modules
import jQuery from 'jquery'
window.jQuery = jQuery
// Import the styles.
import 'web/styles/site.less'
// Glob the module js requirements.
const importAll = r => { r.keys().forEach(r) }
importAll(require.context('semantic-ui-less/definitions/', true, /\.js$/))
The app.js build is inflated by a couple megs, and I confirmed the code in there, but I cannot perform any js actions on the modules. For instance, $.fn.*
seems to be set in the semantic js code, but $.fn
is undefined when I attempt to access it via console.
Any pointers on getting this working will be greatly appreciated.
Note that jQuery
and $
are globally available when tested from console.
Checking the compiled css though, the animation is definitely defined and the property settings seem to be good. However, the loading animation will just stop there, as if the animation was not defined / incorrectly configured.
I didn't change/overwritten anything.
By loading animation I mean the rotating circular indicator you get when adding .loading
to <form>
.
Hi, sorry if this is a dumb question, but I'm struggling to find any documentation that helps. I'm using gulp to build from semantic.less however I'm a little confused about the best way to use the included javascript. Do I just concatenate the files from behaviors, globals and modules? Is there a 'catch all' file like semantic.less? Can I just cherry-pick from the modules that I want to use or do I need to include the behaviors and site.js for proper functionality?
Thanks in advance.
When installing from npm (yarn), all themes/*/assets
are missing now.
Installed with
⟩ yarn add semantic-ui-less --dev
yarn add v1.1.0
[1/5] Resolving packages...
[2/5] Fetching packages...
[3/5] Linking dependencies...
[4/5] Building fresh packages...
[5/5] Cleaning modules...
success Saved lockfile.
success Saved 1 new dependency.
└─ [email protected]
Done in 13.40s.
Assets grep:
⟩ find node_modules/semantic-ui-less | grep assets
And of course, my webpack build fails, now.
Tried to run this with the latest LESS 3.x (3.0.0-alpha.3) release and got following error:
SyntaxError: variable @googleProtocol is undefined in C:\dev\teams-client-sdk\packages\semantic-ui-less\definitions\globals\site.less
on line 25, column 1:
24
25 .loadFonts();
26
Not yet sure why though.
Everything works fine with version 2.7.2
.
So I have the following in my theme.config:
/*******************************
Folders
*******************************/
/* Path to theme packages */
@themesFolder : 'src/themes';
/* Path to site override folder */
@siteFolder : 'app/styles/site';
/*******************************
Import Theme
*******************************/
@import "app/styles/theme.less";
/* End Config */
If I copy the themes
folder and put it in the app/styles
directory and then change @themesFolder
to point to app/styles/themes
, I get this after doing ember server:
NameError: variable @positiveTextShadow is undefined in bower_components/semantic-ui/src/definitions/elements/button.less on line 3212, column 16:
3211 color: @positiveTextColor;
3212 text-shadow: @positiveTextShadow;
3213 background-image: @coloredBackgroundImage;
File: bower_components/semantic-ui/src/definitions/elements/button.less (3212)
The Broccoli Plugin: [LessCompiler] failed with:
undefined
So what am I doing wrong? I am using the ember-cli-less package. I have the following in my ember-cli-build.js file:
var app = new EmberApp(defaults, {
lessOptions: {
paths: [
'bower_components/semantic-ui',
'app/pods/components'
]
},
outputPaths: {
app: {
css: {
app: "assets/css/project.css"
},
js: "assets/js/project.js"
},
vendor: {
css: "assets/css/vendor.css",
js: "assets/js/vendor.js"
}
},
SemanticUI: {
css: false,
javascript: true,
fonts: true,
cssPath: "assets/css"
},
});
I tried getting this looked at on the Semantic-UI-ember repository, but they didn't help. What is the correct way to point to your own custom themes
folder?
I have an existing build system and I would like to customize Semantic UI. Is it possible to compile semantic.less
using only lessc
? I tried to compile semantic.less
using only lessc
and was outputted an erroneous CSS file.
2.2.13 on npmjs, why not?
I notice label has this rule:
.ui.basic.blue.label {
background-color: @basicBackground !important;
color: @blue !important;
border-color: @blue !important;
}
@basicBackground is a variable designed to specify the whole background property - not simply a color (none @white). Therefore, this is an invalid value and it falls back to the blue background.
I believe background-color should simply be set to @white for this rule. I made an override locally, but am thinking to submit a PR for this.
I just installed semantic-ui-less and used less-loader in order to include in my webpack setup. When i try to compile to project i got
module.exports = __webpack_public_path__ + "static/media/theme.05e4814c.config";
^
Unrecognised input
in /Users/thupiceylons/wiseflow/app/src/localdata/reactjs/node_modules/semantic-ui-less/theme.config (line 1, column 15)
webpack: 3.8.1
less-loader: 4.0.5
less: 2.7.3
As far as i know the less loader is not able read theme.config :-) Or maybe somthing could be wrong with my webpack setup :-)
So I've set semantic-ui-less
as an npm dependancy for my project, I then include @import "semantic-ui-less/semantic.less";
in my project less file and add the theme.config
file next to it.
Run my project gulp file to compile the less and it complains:
Error: '../../theme.config' wasn't found. Tried - node_modules/semantic-ui-less/theme.config,../theme.config,../../theme.config in file node_modules/semantic-ui-less/definitions/modules/transition.less line no. 20
Can I not simply include semantic ui as a dependancy rather than having to commit the entire thing?
Confused!
If you try to include this module using require/require.resolve() then it will fail because you use a package.js file instead of a index.js which is the default file it looks for.
You don't have to rename the file however you should just add a key in the package.json file telling it which file to look for:
main: 'packages.js'
This causes issues for anyone trying to use this for their own modules.
Hi,
is it possible to add composer.json to this repository? I would like to use this project as dependency on environments without node.js
Thank you
As noted in #30 (comment), 3.5.x versions of less breaks compatibility for inlining @-expressions within math operations.
ERROR in ./src/assets/styles/semantic/semantic.less (./node_modules/css-loader!./node_modules/less-loader/dist/cjs.js!./src/assets/styles/semantic/semantic.less)
Module build failed:
@ribbonMargin: 1rem;
@ribbonOffset: ~"calc("-@ribbonMargin~" - "@ribbonTriangleSize~")";
^
Operation on an invalid type
in [project root]/node_modules/semantic-ui-less/themes/default/elements/label.variables (line 133, column 0)
@ ./src/assets/styles/semantic/semantic.less 2:14-136 21:1-42:3 21:134-42:2 22:19-141
@ ./src/index.jsx
@ multi webpack-hot-middleware/client whatwg-fetch ./src/index.jsx
less/less.js#3265 (comment) states that the changes have been reverted, but a new version has yet to come out. When the next version comes out, we should assert that this version. Edit: It seems this will not fix our problem, after all (see #46 (comment)).
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.