matze/farmOS-dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

clean install

Browse Source
This commit is contained in:
matze
2024-12-10 15:08:16 +01:00
commit e14eb2d8fd
31193 changed files with 3555714 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

304
web/themes/gin/styles/helpers/_mq.scss Normal file
View File

@@ -0,0 +1,304 @@
@use 'sass:math';
@use 'sass:map';
@use 'sass:list';
/// Breakpoint list
///
/// Name your breakpoints in a way that creates a ubiquitous language
/// across team members. It will improve communication between
/// stakeholders, designers, developers, and testers.
///
/// @type Map
/// @link https://github.com/sass-mq/sass-mq#seeing-the-currently-active-breakpoint Full documentation and examples
$breakpoints: (
mobile: 320px,
tablet: 740px,
desktop: 980px,
wide: 1300px,
) !default;
/// Show breakpoints in the top right corner
///
/// If you want to display the currently active breakpoint in the top
/// right corner of your site during development, add the breakpoints
/// to this list, ordered by width. For example: (mobile, tablet, desktop).
///
/// @example scss
/// @use 'path/to/mq' with ($show-breakpoints: ('mobile', 'tablet', 'desktop'));
///
///
/// @type map
$show-breakpoints: () !default;
/// Customize the media type (for example: `@media screen` or `@media print`)
/// By default sass-mq uses an "all" media type (`@media all and …`)
///
/// If you want to overried the media type, you can use this option.
/// @example scss
/// @use 'path/to/mq' with ($media-type: 'screen');
///
/// @type String
/// @link https://github.com/sass-mq/sass-mq#changing-media-type Full documentation and example
$media-type: all !default;
/// Convert pixels to ems
///
/// @param {Number} $px - value to convert
///
/// @example scss
/// $font-size-in-ems: px2em(16px);
/// p { font-size: px2em(16px); }
///
/// @returns {Number}
@function px2em($px) {
@if math.is-unitless($px) {
@warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels.";
@return px2em($px * 1px);
}
// if $px is compatible with em units, then return value unchanged
@if math.compatible($px, 1em) {
@return $px;
}
@return math.div($px, 16px) * 1em;
}
/// Get a breakpoint's width
///
/// @param {String} $name - Name of the breakpoint. One of $breakpoints
///
/// @example scss
/// $tablet-width: get-breakpoint-width(tablet);
/// @media (min-width: get-breakpoint-width(tablet)) {}
///
/// @requires {Variable} $breakpoints
///
/// @returns {Number} Value in pixels
@function get-breakpoint-width($name, $breakpoints: $breakpoints) {
@if map.has-key($breakpoints, $name) {
@return map.get($breakpoints, $name);
} @else {
@warn "Breakpoint #{$name} wasn't found in $breakpoints.";
@return null;
}
}
/// Media Query mixin
///
/// @param {String | Boolean} $from [false] - One of $breakpoints
/// @param {String | Boolean} $to [false] - One of $breakpoints
/// @param {String | Boolean} $and [false] - Additional media query parameters
/// @param {String} $media-type [$media-type] - Media type: screen, print…
///
/// @ignore Undocumented API, for advanced use only:
/// @ignore @param {Map} $breakpoints [$breakpoints]
///
/// @content styling rules, wrapped into a @media query when $responsive is true
///
/// @requires {Variable} $media-type
/// @requires {Variable} $breakpoints
/// @requires {function} px2em
/// @requires {function} get-breakpoint-width
///
/// @link https://github.com/sass-mq/sass-mq#responsive-mode-on-default Full documentation and examples
///
/// @example scss
/// @use 'path/to/mq' as *;
/// .element {
/// @include mq($from: mobile) {
/// color: red;
/// }
/// @include mq($to: tablet) {
/// color: blue;
/// }
/// @include mq(mobile, tablet) {
/// color: green;
/// }
/// @include mq($from: tablet, $and: '(orientation: landscape)') {
/// color: teal;
/// }
/// @include mq(950px) {
/// color: hotpink;
/// }
/// @include mq(tablet, $media-type: screen) {
/// color: hotpink;
/// }
/// // Advanced use:
/// $my-breakpoints: (L: 900px, XL: 1200px);
/// @include mq(L, $breakpoints: $my-breakpoints) {
/// color: hotpink;
/// }
/// }
@mixin mq(
$from: false,
$to: false,
$and: false,
$media-type: $media-type,
$breakpoints: $breakpoints
) {
$min-width: 0;
$max-width: 0;
$media-query: '';
// From: this breakpoint (inclusive)
@if $from {
@if type-of($from) == number {
$min-width: px2em($from);
} @else {
$min-width: px2em(get-breakpoint-width($from, $breakpoints));
}
}
// To: that breakpoint (exclusive)
@if $to {
@if type-of($to) == number {
$max-width: px2em($to);
} @else {
$max-width: px2em(get-breakpoint-width($to, $breakpoints)) - 0.01em;
}
}
@if $min-width != 0 {
$media-query: '#{$media-query} and (min-width: #{$min-width})';
}
@if $max-width != 0 {
$media-query: '#{$media-query} and (max-width: #{$max-width})';
}
@if $and {
$media-query: '#{$media-query} and #{$and}';
}
// Remove unnecessary media query prefix 'all and '
@if ($media-type == 'all' and $media-query != '') {
$media-type: '';
$media-query: str-slice(unquote($media-query), 6);
}
@media #{$media-type + $media-query} {
@content;
}
}
/// Quick sort
///
/// @author Sam Richards
/// @access private
/// @param {List} $list - List to sort
/// @returns {List} Sorted List
@function _quick-sort($list) {
$less: ();
$equal: ();
$large: ();
@if length($list) > 1 {
$seed: list.nth($list, math.ceil(math.div(length($list), 2)));
@each $item in $list {
@if ($item == $seed) {
$equal: list.append($equal, $item);
} @else if ($item < $seed) {
$less: list.append($less, $item);
} @else if ($item > $seed) {
$large: list.append($large, $item);
}
}
@return join(join(_quick-sort($less), $equal), _quick-sort($large));
}
@return $list;
}
/// Sort a map by values (works with numbers only)
///
/// @access private
/// @param {Map} $map - Map to sort
/// @returns {Map} Map sorted by value
@function _map-sort-by-value($map) {
$map-sorted: ();
$map-keys: map.keys($map);
$map-values: map.values($map);
$map-values-sorted: _quick-sort($map-values);
// Reorder key/value pairs based on key values
@each $value in $map-values-sorted {
$index: index($map-values, $value);
$key: list.nth($map-keys, $index);
$map-sorted: map.merge(
$map-sorted,
(
$key: $value,
)
);
// Unset the value in $map-values to prevent the loop
// from finding the same index twice
$map-values: list.set-nth($map-values, $index, 0);
}
@return $map-sorted;
}
/// Add a breakpoint
///
/// @param {String} $name - Name of the breakpoint
/// @param {Number} $width - Width of the breakpoint
///
/// @requires {Variable} $breakpoints
///
/// @example scss
/// @include add-breakpoint(tvscreen, 1920px);
/// @include mq(tvscreen) {}
@mixin add-breakpoint($name, $width) {
$new-breakpoint: (
$name: $width,
);
$breakpoints: map.merge($breakpoints, $new-breakpoint) !global;
$breakpoints: _map-sort-by-value($breakpoints) !global;
}
/// Show the active breakpoint in the top right corner of the viewport
/// @link https://github.com/sass-mq/sass-mq#seeing-the-currently-active-breakpoint
///
/// @param {List} $show-breakpoints [$show-breakpoints] - List of breakpoints to show in the top right corner
/// @param {Map} $breakpoints [$breakpoints] - Breakpoint names and sizes
///
/// @requires {Variable} $breakpoints
/// @requires {Variable} $show-breakpoints
///
/// @example scss
/// // Show breakpoints using global settings
/// @include show-breakpoints;
///
/// // Show breakpoints using custom settings
/// @include show-breakpoints((L, XL), (S: 300px, L: 800px, XL: 1200px));
@mixin show-breakpoints(
$show-breakpoints: $show-breakpoints,
$breakpoints: $breakpoints
) {
body:before {
background-color: #fcf8e3;
border-bottom: 1px solid #fbeed5;
border-left: 1px solid #fbeed5;
color: #c09853;
font: small-caption;
padding: 3px 6px;
pointer-events: none;
position: fixed;
right: 0;
top: 0;
z-index: 100;
// Loop through the breakpoints that should be shown
@each $show-breakpoint in $show-breakpoints {
$width: get-breakpoint-width($show-breakpoint, $breakpoints);
@include mq($show-breakpoint, $breakpoints: $breakpoints) {
content: '#{$show-breakpoint} ≥ #{$width} (#{px2em($width)})';
}
}
}
}
@if list.length($show-breakpoints) > 0 {
@include show-breakpoints;
}

456
web/themes/gin/styles/helpers/_svg-sprite.scss Normal file
View File

@@ -0,0 +1,456 @@
$sprites: (
'checkmark': "../../media/sprite.svg#checkmark-view",
'hide': "../../media/sprite.svg#hide-view",
'remove': "../../media/sprite.svg#remove-view",
'show': "../../media/sprite.svg#show-view",
'trash': "../../media/sprite.svg#trash-view",
'asterisk': "../../media/sprite.svg#asterisk-view",
'checked': "../../media/sprite.svg#checked-view",
'add': "../../media/sprite.svg#add-view",
'calendar': "../../media/sprite.svg#calendar-view",
'circle': "../../media/sprite.svg#circle-view",
'close': "../../media/sprite.svg#close-view",
'drop': "../../media/sprite.svg#drop-view",
'drupal': "../../media/sprite.svg#drupal-view",
'gin': "../../media/sprite.svg#gin-view",
'handle': "../../media/sprite.svg#handle-view",
'more': "../../media/sprite.svg#more-view",
'sidebar': "../../media/sprite.svg#sidebar-view",
'tool': "../../media/sprite.svg#tool-view",
'grid': "../../media/sprite.svg#grid-view",
'list': "../../media/sprite.svg#list-view",
'media-edit': "../../media/sprite.svg#media-edit-view",
'media-remove': "../../media/sprite.svg#media-remove-view",
'error': "../../media/sprite.svg#error-view",
'info': "../../media/sprite.svg#info-view",
'question': "../../media/sprite.svg#question-view",
'status': "../../media/sprite.svg#status-view",
'warning': "../../media/sprite.svg#warning-view",
'announcement': "../../media/sprite.svg#announcement-view",
'block': "../../media/sprite.svg#block-view",
'blocks': "../../media/sprite.svg#blocks-view",
'bookmarks': "../../media/sprite.svg#bookmarks-view",
'chevron-down': "../../media/sprite.svg#chevron-down-view",
'create': "../../media/sprite.svg#create-view",
'extend-new': "../../media/sprite.svg#extend-new-view",
'files': "../../media/sprite.svg#files-view",
'media': "../../media/sprite.svg#media-view",
'people-new': "../../media/sprite.svg#people-new-view",
'first': "../../media/sprite.svg#first-view",
'last': "../../media/sprite.svg#last-view",
'next': "../../media/sprite.svg#next-view",
'prev': "../../media/sprite.svg#prev-view",
'clock': "../../media/sprite.svg#clock-view",
'database': "../../media/sprite.svg#database-view",
'php': "../../media/sprite.svg#php-view",
'server': "../../media/sprite.svg#server-view",
'drag-dots': "../../media/sprite.svg#drag-dots-view",
'drag': "../../media/sprite.svg#drag-view",
'sort-asc': "../../media/sprite.svg#sort-asc-view",
'sort-desc': "../../media/sprite.svg#sort-desc-view",
'sort': "../../media/sprite.svg#sort-view",
'backtosite': "../../media/sprite.svg#backtosite-view",
'devel': "../../media/sprite.svg#devel-view",
'rebuild-cache': "../../media/sprite.svg#rebuild-cache-view",
'responsive-preview': "../../media/sprite.svg#responsive-preview-view",
'search': "../../media/sprite.svg#search-view",
'shortcut-filled': "../../media/sprite.svg#shortcut-filled-view",
'shortcut': "../../media/sprite.svg#shortcut-view",
'user': "../../media/sprite.svg#user-view",
'appearance': "../../media/sprite.svg#appearance-view",
'bat': "../../media/sprite.svg#bat-view",
'commerce-inbox': "../../media/sprite.svg#commerce-inbox-view",
'commerce': "../../media/sprite.svg#commerce-view",
'config': "../../media/sprite.svg#config-view",
'content': "../../media/sprite.svg#content-view",
'edit': "../../media/sprite.svg#edit-view",
'extend': "../../media/sprite.svg#extend-view",
'fallback': "../../media/sprite.svg#fallback-view",
'group': "../../media/sprite.svg#group-view",
'hamburger': "../../media/sprite.svg#hamburger-view",
'help': "../../media/sprite.svg#help-view",
'local-tasks': "../../media/sprite.svg#local-tasks-view",
'nav-toggle-toleft': "../../media/sprite.svg#nav-toggle-toleft-view",
'nav-toggle-totop': "../../media/sprite.svg#nav-toggle-totop-view",
'people': "../../media/sprite.svg#people-view",
'reports': "../../media/sprite.svg#reports-view",
'structure': "../../media/sprite.svg#structure-view",
'tmgmt': "../../media/sprite.svg#tmgmt-view",
'webform': "../../media/sprite.svg#webform-view"
);
$sizes: (
'checkmark': (
'width': 24px,
'height': 24px
),
'hide': (
'width': 24px,
'height': 24px
),
'remove': (
'width': 24px,
'height': 24px
),
'show': (
'width': 24px,
'height': 24px
),
'trash': (
'width': 24px,
'height': 24px
),
'asterisk': (
'width': 24px,
'height': 24px
),
'checked': (
'width': 24px,
'height': 24px
),
'add': (
'width': 24px,
'height': 24px
),
'calendar': (
'width': 24px,
'height': 24px
),
'circle': (
'width': 24px,
'height': 24px
),
'close': (
'width': 24px,
'height': 24px
),
'drop': (
'width': 24px,
'height': 24px
),
'drupal': (
'width': 24px,
'height': 24px
),
'gin': (
'width': 24px,
'height': 24px
),
'handle': (
'width': 24px,
'height': 24px
),
'more': (
'width': 24px,
'height': 24px
),
'sidebar': (
'width': 24px,
'height': 24px
),
'tool': (
'width': 24px,
'height': 24px
),
'grid': (
'width': 24px,
'height': 24px
),
'list': (
'width': 24px,
'height': 24px
),
'media-edit': (
'width': 24px,
'height': 24px
),
'media-remove': (
'width': 24px,
'height': 24px
),
'error': (
'width': 24px,
'height': 24px
),
'info': (
'width': 24px,
'height': 24px
),
'question': (
'width': 24px,
'height': 24px
),
'status': (
'width': 24px,
'height': 24px
),
'warning': (
'width': 24px,
'height': 24px
),
'announcement': (
'width': 24px,
'height': 24px
),
'block': (
'width': 24px,
'height': 24px
),
'blocks': (
'width': 24px,
'height': 24px
),
'bookmarks': (
'width': 24px,
'height': 24px
),
'chevron-down': (
'width': 24px,
'height': 24px
),
'create': (
'width': 24px,
'height': 24px
),
'extend-new': (
'width': 24px,
'height': 24px
),
'files': (
'width': 24px,
'height': 24px
),
'media': (
'width': 24px,
'height': 24px
),
'people-new': (
'width': 24px,
'height': 24px
),
'first': (
'width': 24px,
'height': 24px
),
'last': (
'width': 24px,
'height': 24px
),
'next': (
'width': 24px,
'height': 24px
),
'prev': (
'width': 24px,
'height': 24px
),
'clock': (
'width': 24px,
'height': 24px
),
'database': (
'width': 24px,
'height': 24px
),
'php': (
'width': 24px,
'height': 24px
),
'server': (
'width': 24px,
'height': 24px
),
'drag-dots': (
'width': 24px,
'height': 24px
),
'drag': (
'width': 24px,
'height': 24px
),
'sort-asc': (
'width': 24px,
'height': 24px
),
'sort-desc': (
'width': 24px,
'height': 24px
),
'sort': (
'width': 24px,
'height': 24px
),
'backtosite': (
'width': 24px,
'height': 24px
),
'devel': (
'width': 24px,
'height': 24px
),
'rebuild-cache': (
'width': 24px,
'height': 24px
),
'responsive-preview': (
'width': 24px,
'height': 24px
),
'search': (
'width': 24px,
'height': 24px
),
'shortcut-filled': (
'width': 24px,
'height': 24px
),
'shortcut': (
'width': 24px,
'height': 24px
),
'user': (
'width': 24px,
'height': 24px
),
'appearance': (
'width': 24px,
'height': 24px
),
'bat': (
'width': 24px,
'height': 24px
),
'commerce-inbox': (
'width': 24px,
'height': 24px
),
'commerce': (
'width': 24px,
'height': 24px
),
'config': (
'width': 24px,
'height': 24px
),
'content': (
'width': 24px,
'height': 24px
),
'edit': (
'width': 24px,
'height': 24px
),
'extend': (
'width': 24px,
'height': 24px
),
'fallback': (
'width': 24px,
'height': 24px
),
'group': (
'width': 24px,
'height': 24px
),
'hamburger': (
'width': 24px,
'height': 24px
),
'help': (
'width': 24px,
'height': 24px
),
'local-tasks': (
'width': 24px,
'height': 24px
),
'nav-toggle-toleft': (
'width': 24px,
'height': 24px
),
'nav-toggle-totop': (
'width': 24px,
'height': 24px
),
'people': (
'width': 24px,
'height': 24px
),
'reports': (
'width': 24px,
'height': 24px
),
'structure': (
'width': 24px,
'height': 24px
),
'tmgmt': (
'width': 24px,
'height': 24px
),
'webform': (
'width': 24px,
'height': 24px
)
);
$variables: (
/* EMPTY */
);
// https://github.com/waldemarfm/sass-svg-uri/blob/v1.0.0/_svg-uri.scss
@function sprite-str-replace($string, $search, $replace: '') {
$index: str-index($string, $search);
@if type-of($replace) == 'null' {
$replace: '';
}
@if ( $index ) {
@return str-slice($string, 1, $index - 1) + $replace + sprite-str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}
@return $string;
}
@function sprite-svg-uri($value) {
$output: $value;
$output: sprite-str-replace($output, '"', "'");
$output: sprite-str-replace($output, '<', '%3C');
$output: sprite-str-replace($output, '>', '%3E');
$output: sprite-str-replace($output, '&', '%26');
$output: sprite-str-replace($output, '#', '%23');
@return $output;
}
@mixin sprite($name, $user-variables: (), $include-size: false) {
$sprite: map-get($sprites, $name);
// Inject variables
$default-variables: map-get($variables, $name);
@if type-of($default-variables) == 'map' {
@each $key, $value in map-merge($default-variables, $user-variables) {
@if ( not map-has-key($default-variables, $key) ) {
@warn 'Sprite \'#{$name}\' does not support variable named \'#{$key}\'';
}
$sprite: sprite-str-replace($sprite, '___#{$key}___', sprite-svg-uri(quote(#{$value})));
}
} @else if type-of($user-variables) == 'map' {
@warn 'Sprite \'#{$name}\' does not contain any variables';
}
background: url($sprite) center no-repeat;
@if $include-size {
$size: map-get($sizes, $name);
@if $include-size == true {
background-size: map-get($size, width) map-get($size, height);
} @else if $include-size == 'box' {
width: map-get($size, width);
height: map-get($size, height);
}
}
}

74
web/themes/gin/styles/helpers/_tools.scss Normal file
View File

@@ -0,0 +1,74 @@
@import "svg-sprite";
$html-font-size: 16px;
@function stripUnit($value) {
@return $value / ($value * 0 + 1);
}
@function rem($pxValue) {
@return math.div(stripUnit($pxValue), stripUnit($html-font-size)) * 1rem;
}
@function capitalize($string) {
@return to-upper-case(str-slice($string, 1, 1)) + str-slice($string, 2);
}
@function icon($name) {
@return url(map-get($sprites, $name));
}
@mixin visually-hidden {
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
overflow: hidden;
height: 1px;
width: 1px;
word-wrap: normal;
}
@mixin color-pattern {
background-color: var(--gin-pattern-fallback);
background-image:
linear-gradient(-45deg, var(--gin-pattern) 25%, transparent 26%),
linear-gradient(-45deg, var(--gin-pattern) 25%, transparent 26%),
linear-gradient(135deg, var(--gin-pattern) 25%, transparent 26%),
linear-gradient(135deg, var(--gin-pattern) 25%, transparent 26%);
background-position:
0 0,
var(--gin-pattern-square) var(--gin-pattern-square),
var(--gin-pattern-square) var(--gin-pattern-square),
0 0;
background-size: calc(var(--gin-pattern-square) * 2) calc(var(--gin-pattern-square) * 2);
@media screen and (-ms-high-contrast: active) {
background: none;
}
}
@mixin custom-icon-button($name) {
all: unset;
background-color: white;
background-image: icon($name);
background-repeat: no-repeat;
background-position: center;
background-size: 15px 15px;
border-radius: 50%;
border-color: transparent !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
color: transparent;
width: 29px;
height: 29px;
margin: var(--gin-spacing-s);
&:hover,
&:focus {
background-color: white;
border-color: var(--gin-color-primary) !important;
color: transparent;
cursor: pointer;
}
}

36
web/themes/gin/styles/helpers/_vars.scss Normal file
View File

@@ -0,0 +1,36 @@
$breakpointTiny: 420px;
$breakpointXSmall: 588px;
$breakpointSmall: 768px;
$breakpointMedium: 976px;
$breakpointLarge: 1024px;
$breakpointWide: 1280px;
$breakpointBig: 1440px;
$breakpoints: (
tiny: $breakpointTiny,
xsmall: $breakpointXSmall,
small: $breakpointSmall,
medium: $breakpointMedium,
large: $breakpointLarge,
wide: $breakpointWide,
ultra: $breakpointBig,
);
$ginLayoutDensity: (
small: .625,
medium: .75,
default: 1,
);
$ginSpacings: (
xxs: 4px,
xs: 8px,
s: 12px,
m: 16px,
l: 24px,
xl: 32px,
xxl: 48px,
xxxl: 64px,
);
$colorDarkAppBackground: #1B1B1D;