sassDoc - Herman problem using external file for variables - sass

I'm trying to use an external scss file for my variables but when I run the file I always get the error that it can't find my variables.
» [WARNING] Error compiling #example scss:
Undefinedvariable.
╷
3 │ #each $posvalues prop in $posvalues {
│ ^^^^^^^^^^
╵
- 3:26 root style sheet
#each $posvalues prop in $posvalues {
.#{$posvalues-prop} {
position: $posvalues prop;
}
}
It does work if I'm add the necessary variable by the #example scss - block
But then I write everything twice that I personally do not think is necessary and should not be.
When I compile the scss, everythings works fine.
apparently I have to add somthing for Herman(sassDoc) to be able to use an external file with variables.
/// #example scss - position class
///
/// $posvalues: absolute, fixed, static, sticky, relative;
///
/// #each $posvalues prop in $posvalues {
/// .#{$posvalues-prop} {
/// position: $posvalues prop;
/// }
/// }
In the .sassdocrc file I ad the theme: herman and also tested the use item.
When I check the veriable file as been read; this I have tested with #output and #return but this give a error. that is for me a confirmation that the file have being read.
The full file
#use "sass:string";
#use '../utilities/' as *;
/* The Position property */
///
/// The positionProperty
/// #groupPosition
///
///
/// The position property specifies the type of positioning method used for an element.
/// #groupPosition
/// #name position
/// #link src/scss/utilities/_position.scss
/// #since 1.0.0
/// #author Serge Cools
///
///Applies to: all elements
///
/// #require $posvalues
/// #example scss - position class
///
/// $posvalues: absolute, fixed, static, sticky, relative;
///
/// #each $posvalues prop in $posvalues {
/// .#{$posvalues-prop} {
/// position: $posvalues prop;
/// }
/// }
/// #example html - use position class
/// <div class="absolute">
///
/// </div>
#each $posvalues prop in $posvalues {
.#{$posvalues-prop} {
position: $posvalues prop;
}
}
/* EndPosition property */

Related

SASS/SCSS, how to access a property/method in a dynamic way from a partial file?

Let's say for instance we have the next sass partial file:
//_colors.scss
$foo: red;
And we "use" it on another file:
//test.scss
#use './colors'
.test{
color: colors.$foo;
}
All good, but what if I would like to use/get the value in a dynamic way within a mixin? something like:
//test.scss
#use './colors'
#mixin getColor($type){
color: colors[$type]; //JavaScript example, * don't actually work *.
or
color: #{colors.{$type}; * don't work neither *
//The above returns `color: colors.foo` instead of `color: red` on compilation.
or
color: colors.#{$type}; * doesn't work neither *
}
.test{
#include getColor(foo);
}
Is it possible? thanks for the help!
For a color, I really much prefer a function so it can be used on any property (color, background-color, border, box-shadow...)
I usually declare a string equivalent to variable names, then define them inside a map. Finally this map is accessible via a dedicated function.
Something like
//_colors.scss
#use 'sass:map';
$favoriteRed: "favoriteRed";
$favoriteYellow: "favoriteYellow";
$favoriteBlue: "favoriteBlue";
$MyColors: (
$favoriteRed: #c00,
favoriteYellow: #fc0,
$favoriteBlue: #0cf
);
#function my-color($tone: $favoriteRed) {
#if not map.has-key($MyColors, $tone) {
#error "unknown `#{$tone}` in MyColors.";
}
#else {
#return map.get($MyColors, $tone);
}
}
This _colors.scss generates no code at all, it can be imported anywhere at no cost.
Then, in a specific style file:
//test.scss
#use './colors' as *;
//inside a mixin
#mixin special-hue-component($tone){
div.foo {
span.bar {
border-color: my-color($tone);
}
}
}
//or directly
.foobartest {
color: my-color($favoriteBlue);
}

How to collapse TOC(table of contents) in spring RestDoc (asciidoc)?

I had used SpringRestDoc and want to collapse Table of Contents.
Below my index.adoc
= Service Rest Docs API Document
:doctype: book
:icons: font
:source-highlighter: highlightjs
:toc2: left
:theme: flatly
:toclevels: 1
:sectlinks:
[[introduction]]
== information
----
Spring Rest Document
----
...
Thanks,
The default template for Asciidoctor does not include functionality to expand/collapse the ToC. You would need to add your own CSS/JavaScript to achieve that goal.
The simplest way to do that is to use a "docinfo" file. See https://docs.asciidoctor.org/asciidoctor/latest/docinfo/ for details.
Here is a very simplistic implementation that demonstrates the concept:
In your document, in the header (say, just under the :doctype: attribute definition), add the line :docinfo: shared.
Create a file called "docinfo.html" in the same folder as your document; this file contains your custom CSS and JavaScript.
Add the following content to the docinfo.html file:
<style>
button.tocSwitch {
position: absolute;
top: 0;
left: 0;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
var target = document.querySelector('#header')
var button = document.createElement('button')
button.className = 'tocSwitch'
button.innerHTML = 'ToC'
button.addEventListener('click', function (e) {
e.stopPropagation()
var toc = document.querySelector('#toc')
var body = document.querySelector('body')
if (body.classList.contains('toc2')) {
body.classList.remove('toc2')
body.classList.remove('toc-left')
toc.style.display = 'none'
}
else {
body.classList.add('toc2')
body.classList.add('toc-left')
toc.style.display = 'block'
}
})
target.appendChild(button)
})
</script>
This content defines some CSS styling for a button, and some JavaScript the dynamically creates the button, adds the button to the header of the page, and an event listener such that when you click the button, the appropriate class name and CSS style adjustments are made to show/hide the ToC.

SCSS themify not working with Fluent UI React

I'm working with a fluent UI react command bar. I'm using the SCSS themify pattern to theme elements.
Theming works for the top level command bar class names, but certain themify blocks seem to be skipped entirely.
For example, the block shown below never executes so the icon path will have red fill.
.chartCommandIcon {
path{
fill: red;
#include themify{
fill: themed('color-theme-accent');
}
}
}
This is another example. The themify block works on the top level commandItem styles, but not on the dropdownMenu (a fluent UI subMenu). The .dropdownMenu selector does work however. If I set the dropdown menu background-color: red outside of the themify block, the color is updated.
.commandItem{
#include themify{
color: themed('color-text-rest'); // works here (top level?)
}
}
.dropdownMenu{
background-color: red; // works here
#include themify{
background-color: themed('color-bg-panel-contextual'); // not here
}
}
Any ideas why this may be happening would be super helpful! Thanks : )
Here is the themify SCSS mixin code taken from an external package.
/// Creates theme variations
///
/// #param {Map} $themes - Theme map to loop through. Optional.
#mixin themify($themes: $themes) {
// for each theme, get its name and color variable map:
#each $theme, $colors in $themes {
// re-export the color map under the global scope so the
// `themed` function below can access it inside the content:
$theme-map: $colors !global;
:global(.#{$default-prefix}-#{$theme}) & {
#content;
}
// reset the theme-map global variable:
$theme-map: null !global;
}
}
/// Gets a value from the color map.
///
/// #param {String} $key - Name of the color variable
/// #param {Map} $theme-map - Theme map to use. Optional.
///
/// #returns {String} The color for the given key
#function themed($key, $theme-map: $theme-map) {
$value: map-get($theme-map, $key);
#if not $value {
#error 'There is no `#{$key}` in your theme colors.';
}
#return $value;
}

Customizing the IQKeyboardManager with Nativescript + javascript

I've got a nativescript app and I'm using IQKeyboardManager with default settings.
I see there in an option to dismiss the keyboard on tap outside a text field with a typescript example for toggling it on and off:
private iqKeyboard: IQKeyboardManager;
public keepKeyboardOpenOnTouchOutside: boolean = true;
toggleKeepKeyboardOpen(): void {
this.iqKeyboard.shouldResignOnTouchOutside = !this.iqKeyboard.shouldResignOnTouchOutside;
}
But I don't understand how to go about it in normal javascript.
I want to set the keepKeyboardOpenOnTouchOutside variable with something like:
exports.loaded = function(args){
keepKeyboardOpenOnTouchOutside = false;
}
but I don't understand how I'm supposed to access the instance variable properly.
I missed a step in the documentation:
/// <reference path="./node_modules/tns-platform-declarations/ios/ios.d.ts" />
/// <reference path="./node_modules/nativescript-iqkeyboardmanager/index.d.ts" />
is required in references.d.ts and then I can initialize the variables like so:
const iqKeyboard = IQKeyboardManager.sharedManager();
iqKeyboard.keepKeyboardOpenOnTouchOutside = false;
iqKeyboard.shouldResignOnTouchOutside = true;

fullcalendar single slot event end time

I am using fullcalendar in the agendaWeek view. I noticed that events that are in a single slot, lets say 30 min, do not display the endtime. The endtime only apears on events that cover more than one slot.
All the options that I've found did not add that to the event title.
Is that possible and I just didn't see it?
Thanks for any suggestions!
EDIT:
This is the Tool I am referring to.
http://fullcalendar.io/
In the function renderEventTable there is a condition that adds a css class if the event is smaller than 30px.
if (seg.bottom - seg.top < 30) {
seg.el.addClass('fc-short');
}
So basicly you can just edit the CSS style for .fc-short.
fc-time-grid-event.fc-short .fc-time span {
display: none; /* don't display the full time text... */
}
.fc-time-grid-event.fc-short .fc-time:before {
content: attr(data-start); /* ...instead, display only the start time */
}
.fc-time-grid-event.fc-short .fc-time:after {
content: "\000A0-\000A0"; /* seperate with a dash, wrapped in nbsp's */
}
I agree that just modifing the style where you need it makes more sense but #Abdullah provided only half the solution. Don't forget to clear the trailing - in the :after section of .fc-time
.fc-time-grid-event.fc-short .fc-time:before {
/* in short mode, only data-start and data-full are available */
content: attr(data-full);
}
.fc-time-grid-event.fc-short .fc-time:after {
/* remove the trailing - after you change the content from data-start to data-full */
content: "";
}
.fc-time-grid-event.fc-short .fc-title:before {
content: "\00a0"; /* when a title exists along with the short time pad it with something like a nbsp*/
}
An easy and better solution that worked around was to simply add css.
which will show [start time] - [end time] [title]
.fc-time-grid-event.fc-short .fc-time:before {
content: attr(data-full); /* ...instead, display only the start time */
}

Resources