This commit is contained in:
parent
cb6f67676e
commit
b8be7a8ede
|
|
@ -17,6 +17,15 @@ _global_scope = {
|
|||
_element_modifier_stack: {}
|
||||
}
|
||||
|
||||
_block_building_lane = ()
|
||||
_element_building_lange = ()
|
||||
|
||||
_work_lane(lane, callback)
|
||||
l = length(lane)
|
||||
for _ in (0..l)
|
||||
piece = pop(lane)
|
||||
callback(piece)
|
||||
|
||||
/*
|
||||
* Gets the selector of the parent class
|
||||
*/
|
||||
|
|
@ -41,8 +50,13 @@ _get_element_selector()
|
|||
* Block according to BEM
|
||||
*/
|
||||
RV-Block(name)
|
||||
.{_css-prefix}-{name}
|
||||
.{name}
|
||||
push(_block_building_lane, {
|
||||
elements: {}
|
||||
block_modifiers: {}
|
||||
})
|
||||
{block}
|
||||
|
||||
for name, element in _global_scope['_selector_blocks_to_generate']
|
||||
& &__{name}
|
||||
for current_block in element.block_list
|
||||
|
|
@ -70,25 +84,30 @@ RV-Block__Modifier(name)
|
|||
* For more see RV-Element___Modifier
|
||||
*/
|
||||
RV-Element(name)
|
||||
element_block_stack = _global_scope['_element_block_stack']
|
||||
append(element_block_stack, block)
|
||||
_global_scope['_element_block_stack'] = element_block_stack
|
||||
// Is there a block to build
|
||||
block_index = (index(called-from, 'RV-Block'))
|
||||
p(called-from block_index slice(called-from, 0, block_index))
|
||||
|
||||
//Detect if the selector will be generated
|
||||
//by an earlier call of RV-Element
|
||||
if not 'RV-Element' in called-from
|
||||
// Saving accumulated modifiers and blocks
|
||||
element = {}
|
||||
element['block_list'] = _global_scope['_element_block_stack']
|
||||
element['modifier_list'] = _global_scope['_element_modifier_stack']
|
||||
if length(_block_building_lane) >= 1
|
||||
push(_block_building_lane, block)
|
||||
|
||||
//Reseting
|
||||
_global_scope['_element_block_stack'] = ()
|
||||
_global_scope['_element_modifier_stack'] = {}
|
||||
current_block = _block_building_lane[-1]
|
||||
|
||||
//Saving element
|
||||
_global_scope['_selector_blocks_to_generate'][name] = element
|
||||
_global_scope['_last_element_name'] = name
|
||||
//Detect if the selector will be generated
|
||||
//by an earlier call of RV-Element
|
||||
if not 'RV-Element' in called-from
|
||||
// Saving accumulated modifiers and blocks
|
||||
element = {}
|
||||
element['block_list'] = _global_scope['_element_block_stack']
|
||||
element['modifier_list'] = _global_scope['_element_modifier_stack']
|
||||
|
||||
//Reseting
|
||||
_global_scope['_element_block_stack'] = ()
|
||||
_global_scope['_element_modifier_stack'] = {}
|
||||
|
||||
//Saving element
|
||||
_global_scope['_selector_blocks_to_generate'][name] = element
|
||||
_global_scope['_last_element_name'] = name
|
||||
|
||||
/*
|
||||
* Generates a CSS class for an element modifier
|
||||
|
|
|
|||
|
|
@ -66,7 +66,10 @@ RV-Fan--fullWidth(base-height, base-width)
|
|||
+RV-Element('Surface')
|
||||
flex-grow 1
|
||||
|
||||
|
||||
RV-Fan__Base--wurst()
|
||||
+RV-Element__Modifier('wurst')
|
||||
--wurst wasser
|
||||
|
||||
/* ###############
|
||||
* Element Mixins
|
||||
* ############### */
|
||||
|
|
@ -83,22 +86,13 @@ RV-Fan__Surface--fixedHeight(height)
|
|||
|
||||
RV-Fan__Surface--fixedWidth(width)
|
||||
+RV-Element__Modifier('fixedWidth')
|
||||
|
||||
max-width width
|
||||
|
||||
RV-Fan__Surface()
|
||||
+RV-Element('Surface')
|
||||
RV-ContentCrop()
|
||||
|
||||
RV-Fan__Surface--fixedWidth(width)
|
||||
RV-Fan__Surface--fixedHeight(height)
|
||||
|
||||
RV-Fan__Surface-Pack(width, height)
|
||||
RV-Fan__Surface()
|
||||
|
||||
+RV-Element('Surface')
|
||||
RV-Fan__Surface--fixedWidth(width)
|
||||
RV-Fan__Surface--fixedHeight(height)
|
||||
@block{
|
||||
RV-ContentCrop()
|
||||
}
|
||||
|
||||
/* ############
|
||||
* Block Mixin
|
||||
|
|
@ -106,57 +100,35 @@ RV-Fan__Surface-Pack(width, height)
|
|||
RV-Fan()
|
||||
display flex
|
||||
|
||||
RV-Fan__()
|
||||
RV-Fan()
|
||||
RV-Fan__Base()
|
||||
RV-Fan__Surface()
|
||||
|
||||
RV-Fan--(base-height, base-width)
|
||||
RV-Fan()
|
||||
|
||||
RV-Fan--fullWidth(base-height, base-width)
|
||||
RV-Fan--vertical(base-height, base-width)
|
||||
RV-Fan--horizontal(base-height, base-width)
|
||||
RV-Fan--auto(base-height, base-width)
|
||||
|
||||
RV-Fan__Surface()
|
||||
|
||||
RV-Fan__Surface--()
|
||||
|
||||
RV-Fan__Base()
|
||||
|
||||
RV-Fan__Base--()
|
||||
|
||||
RV-Fan__--()
|
||||
|
||||
RV-Fan-Pack(base-height, base-width)
|
||||
RV-Fan()
|
||||
|
||||
RV-Fan__Surface-Pack(base-height, base-width)
|
||||
RV-Fan__Base(base-height, base-width)
|
||||
|
||||
|
||||
|
||||
/* #########
|
||||
* CSS-Class
|
||||
* ######### */
|
||||
.RV-Fan
|
||||
|
||||
+RV-Block('Fan')
|
||||
RV-CSSParameter({
|
||||
base-height: 280px,
|
||||
base-width: 320px
|
||||
})
|
||||
|
||||
RV-Fan-Pack(base-height, base-width)
|
||||
/*
|
||||
.tollecomponent
|
||||
RV-Fan()
|
||||
+RV-Element('Square')
|
||||
|
||||
RV-Fan__Surface()
|
||||
RV-Fan__Surface--fixedWidth(base-width)
|
||||
RV-Fan__Surface--fixedHeight(base-height)
|
||||
|
||||
RV-Fan__Base(base-height, base-width)
|
||||
|
||||
RV-Fan--fullWidth(base-height, base-width)
|
||||
RV-Fan--vertical(base-height, base-width)
|
||||
RV-Fan--horizontal(base-height, base-width)
|
||||
RV-Fan--auto(base-height, base-width)
|
||||
|
||||
|
||||
+RV-Block('wurst')
|
||||
+RV-Block('Fächer')
|
||||
RV-Fan()
|
||||
RV-Fan__Base(50px, 50px)
|
||||
|
||||
+RV-Element__Modifier('color')
|
||||
RV-Fan__Base--blue()
|
||||
+/
|
||||
|
||||
|
||||
|
||||
|
||||
RV-Fan__Base--wurst()
|
||||
|
||||
RV-Fan__Surface(50px, 50px)
|
||||
|
||||
|
|
@ -1,75 +1,11 @@
|
|||
_selector_maps = {}
|
||||
_catched = {}
|
||||
@css-class-prefix: RV
|
||||
|
||||
throw(id, callback)
|
||||
if id in _selector_maps
|
||||
hook = _selector_maps[id]
|
||||
else
|
||||
hook = {}
|
||||
|
||||
hook[selector()] = callback
|
||||
_selector_maps[id] = hook
|
||||
|
||||
catch(id, params)
|
||||
if selector() in _catched
|
||||
_catches = _catched[selector()]
|
||||
else
|
||||
_catches = {}
|
||||
|
||||
_catches[id] = params
|
||||
_catched[selector()] = _catches
|
||||
|
||||
_generate_hooks()
|
||||
for catched_selector, config in _catched
|
||||
for id, parameter in config
|
||||
if id in _selector_maps
|
||||
hook = _selector_maps[id]
|
||||
for thrown_selector, callback in hook
|
||||
{thrown_selector}{catched_selector}
|
||||
callback(parameter)
|
||||
|
||||
|
||||
red()
|
||||
color red
|
||||
catch('button', green)
|
||||
catch('field', red)
|
||||
|
||||
field()
|
||||
display inline
|
||||
padding 10px
|
||||
border-bottom 2px solid blue
|
||||
throw('field', @(){
|
||||
border-bottom 2px solid red
|
||||
color blue
|
||||
})
|
||||
|
||||
button()
|
||||
padding 5px
|
||||
background-color orange
|
||||
border 1px solid black
|
||||
display inline
|
||||
throw('button', @(c){color c})
|
||||
|
||||
.bluebutton
|
||||
red()
|
||||
button()
|
||||
|
||||
.button
|
||||
button()
|
||||
|
||||
.wred
|
||||
red()
|
||||
|
||||
.field
|
||||
field()
|
||||
|
||||
.wurst
|
||||
.field
|
||||
field()
|
||||
red()
|
||||
|
||||
.debug
|
||||
--one _selector_maps
|
||||
--two _catched
|
||||
|
||||
_generate_hooks()
|
||||
RV-Utils__Block(name, callback)
|
||||
@name; name
|
||||
@a-@name()
|
||||
callback()
|
||||
|
||||
RV-Utils__Block(Test, @(){
|
||||
color blue
|
||||
})
|
||||
|
||||
|
|
|
|||
231
public/rcss.css
231
public/rcss.css
|
|
@ -318,91 +318,32 @@
|
|||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
.RV-Fan__Container--vertical {
|
||||
.Fan {
|
||||
--base-height: 280px;
|
||||
--base-width: 320px;
|
||||
display: flex;
|
||||
}
|
||||
.Fan.Fan--fullWidth {
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
.Fan.Fan--vertical {
|
||||
flex-direction: column;
|
||||
width: max-content;
|
||||
}
|
||||
.RV-Fan__Container--vertical .RV-Fan__Surface {
|
||||
width: 320px;
|
||||
min-height: 280px;
|
||||
}
|
||||
.RV-Fan__Container--horizontal {
|
||||
.Fan.Fan--horizontal {
|
||||
flex-direction: row;
|
||||
}
|
||||
.RV-Fan__Container--horizontal .RV-Fan__Surface {
|
||||
min-width: 320px;
|
||||
height: 280px;
|
||||
}
|
||||
.RV-Fan__Container--auto {
|
||||
.Fan.Fan--auto {
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
.RV-Fan__Container--auto .RV-Fan__Surface {
|
||||
width: calc(100% - 320px);
|
||||
min-width: 320px;
|
||||
height: 280px;
|
||||
}
|
||||
.RV-Fan__Container--fullWidth .RV-Fan__Base,
|
||||
.RV-Fan__Container--fullWidth .RV-Fan__Surface {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.RV-Fan__Container {
|
||||
.wurst .Fächer {
|
||||
display: flex;
|
||||
}
|
||||
.RV-Fan__Base {
|
||||
height: 280px;
|
||||
width: 320px;
|
||||
flex: 0 0 auto;
|
||||
.wurst .Fächer .wurst .Fächer__Base--wurst {
|
||||
--wurst: wasser;
|
||||
}
|
||||
.RV-Fan__Surface {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
.RV-Fan__Surface .RV-Image *,
|
||||
.RV-Fan__Surface .RV-Image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
.RV-Fan__Surface .RV-Text {
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 1.21;
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
max-height: 96.80000000000001%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.RV-Fan__Surface .RV-Text * {
|
||||
margin: 0;
|
||||
padding-bottom: 19.360000000000003px;
|
||||
}
|
||||
.RV-Fan__Surface .RV-Text *:last-child {
|
||||
padding-bottom: unset;
|
||||
}
|
||||
.RV-Fan__Surface--fade:after {
|
||||
background-image: linear-gradient(180deg, rgba(255,255,255,0), #fff);
|
||||
display: block;
|
||||
content: ' ';
|
||||
opacity: 0.8;
|
||||
position: relative;
|
||||
top: -25%;
|
||||
width: 100%;
|
||||
height: 25%;
|
||||
z-index: 10;
|
||||
}
|
||||
.RV-Fan__Surface--ellipsis:after {
|
||||
position: relative;
|
||||
display: block;
|
||||
bottom: 1.2em;
|
||||
left: calc(100% - 3ch);
|
||||
content: '...';
|
||||
font-size: 1.2em;
|
||||
min-width: 2em;
|
||||
background-color: #fff;
|
||||
padding: 0 2px;
|
||||
.wurst .wurst__Base--wurst {
|
||||
--wurst: wasser;
|
||||
}
|
||||
.RV-FlexGrid__Container {
|
||||
display: grid;
|
||||
|
|
@ -661,6 +602,81 @@
|
|||
flex-wrap: wrap;
|
||||
}
|
||||
@include RV-FlexRow__Item;
|
||||
.RV-OverlayButton__Item {
|
||||
position: relative;
|
||||
}
|
||||
.RV-OverlayButton__Item:hover > * {
|
||||
opacity: 1;
|
||||
}
|
||||
.RV-OverlayButton__Button {
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
background-color: #f5f5dc;
|
||||
margin: 10px;
|
||||
opacity: 0.2;
|
||||
border-radius: 10px;
|
||||
text-decoration: none;
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
font-size: 25px;
|
||||
line-height: 25px;
|
||||
}
|
||||
.RV-OverlayButton__Button--circle {
|
||||
border-radius: 50%;
|
||||
}
|
||||
.RV-OverlayButton__Button--topRight {
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
.RV-OverlayButton__Button--small {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
font-size: 15px;
|
||||
line-height: 15px;
|
||||
}
|
||||
.RV-OverlayButton__Button--medium {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
font-size: 25px;
|
||||
line-height: 25px;
|
||||
}
|
||||
.RV-OverlayButton__Button--large {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
font-size: 35px;
|
||||
line-height: 35px;
|
||||
}
|
||||
.RV-OverlayButton__Row {
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
padding: 25px;
|
||||
gap: 25px;
|
||||
column-gap: 25px;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
height: 4em;
|
||||
opacity: 0.2;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
background-color: rgba(255,255,255,0.5);
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
.RV-OverlayButton__Row * {
|
||||
position: initial;
|
||||
opacity: initial;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.RV-Menu--vertical .RV-Menu__List {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
|
|
@ -855,6 +871,7 @@
|
|||
.RV-ImageGrid__Item {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.RV-ImageGrid__Item .RV-Image *,
|
||||
.RV-ImageGrid__Item .RV-Image {
|
||||
|
|
@ -906,6 +923,58 @@
|
|||
.RV-ImageGrid__Item .RV-Image * {
|
||||
object-position: center;
|
||||
}
|
||||
.RV-ImageGrid__Item:hover > * {
|
||||
opacity: 1;
|
||||
}
|
||||
.RV-ImageGrid__Button {
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
background-color: #f5f5dc;
|
||||
margin: 10px;
|
||||
opacity: 0.2;
|
||||
border-radius: 10px;
|
||||
text-decoration: none;
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
font-size: 25px;
|
||||
line-height: 25px;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
font-size: 25px;
|
||||
line-height: 25px;
|
||||
}
|
||||
.RV-ImageGrid__Button--circle {
|
||||
border-radius: 50%;
|
||||
}
|
||||
.RV-ImageGrid__Button--topRight {
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
.RV-ImageGrid__Button--small {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
font-size: 15px;
|
||||
line-height: 15px;
|
||||
}
|
||||
.RV-ImageGrid__Button--medium {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
font-size: 25px;
|
||||
line-height: 25px;
|
||||
}
|
||||
.RV-ImageGrid__Button--large {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
font-size: 35px;
|
||||
line-height: 35px;
|
||||
}
|
||||
.RV-FlexGrid__Container--masonry.RV-Spacing__Inner--small * {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
|
@ -942,6 +1011,18 @@
|
|||
.RV-ImageGrid__Container.RV-Spacing__Inner--large * * {
|
||||
margin-bottom: unset;
|
||||
}
|
||||
.RV-FlexGrid__Container--masonry.RV-OverlayButton__Row * {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.RV-FlexGrid__Container--masonry.RV-OverlayButton__Row * * {
|
||||
margin-bottom: unset;
|
||||
}
|
||||
.RV-ImageGrid__Container.RV-OverlayButton__Row * {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.RV-ImageGrid__Container.RV-OverlayButton__Row * * {
|
||||
margin-bottom: unset;
|
||||
}
|
||||
.RV-FlexGrid__Container--masonry.RV-ImageGrid__Container * {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue