logongas

Herramientas de usuario

Herramientas del sitio

Ocultar Menú
Traza:
clase:daw:diw:1eval:tema04

Diferencias

Muestra las diferencias entre dos versiones de la página.

Enlace a la vista de comparación

Ambos lados, revisión anterior Revisión previa
Próxima revisión 		Revisión previa
clase:daw:diw:1eval:tema04 [2024/11/25 10:19]
admin [Ejercicios] 		clase:daw:diw:1eval:tema04 [2024/12/01 16:47] (actual)
admin [Condicional @if]
Línea 268: Línea 268:
 <sxh sass> <sxh sass>
 @mixin border($size) { @mixin border($size) {
-  $color:#00FF00;+
          
   @if $size>=3 {   @if $size>=3 {
     $color:#FF0000;     $color:#FF0000;
 +  } @else {
 +    $color:#00FF00;
   }   }
  
Línea 467: Línea 469:
 {{:clase:daw:diw:1eval:colores.png|}} {{:clase:daw:diw:1eval:colores.png|}}
  
 +
 +=== Ejemplo de menu lateral ===
 +Ejemplo de menú lateral con variable locales.
 +Código de Àngela Hermosilla del Río
 +
 +{{:clase:daw:diw:1eval:menu-lateral.png?200|}}
 +
 +<sxh sass>
 +.c-menu-lateral {
 +    --c-menu-logo-font-size: var(--font-size-l);
 +    --c-menu-option-titulo-font-size: var(--font-size-m);
 +    --c-menu-option-subtitulo-font-size: var(--font-size);
 +
 +    --c-menu-font-family: var(--font-family-arial);
 +
 +    --c-menu-option-titulo-color: var(--color-grey-1);
 +    --c-menu-option-subtitulo-color: var(--color-grey);
 +    --c-menu-option-titulo-color-warning: var(--color-red-3);
 +    --c-menu-option-subtitulo-color-warning: var(--color-red-4);
 +
 +    --c-menu-background-color: var(--color-grey-9);
 +    --c-menu-background-color-hover: var(--color-grey-8);
 +    --c-menu-background-color-warning: var(--color-red-9);
 +    --c-menu-background-color-warning-hover: var(--color-red-8);
 +
 +    --c-menu-padding-exterior: var(--padding-4);
 +    --c-menu-padding-interior: var(--padding-2);
 +
 +    --c-menu-width: var(--width-300);
 +    --c-menu-width-icono:var(--width-30);
 +
 +    
 +    display: grid;
 +    grid-template-rows: auto 1fr auto;
 +    padding:var(--c-menu-padding-exterior);
 +    
 +    &__logo {
 +        font-size: var(--c-menu-logo-font-size);
 +        padding: var(--c-menu-padding-exterior);
 +        background-color: var(--c-menu-background-color);
 +        
 +    }
 +
 +    &__opciones{
 +        overflow: auto;
 +    }
 +
 +    &__opcion {
 +        display: flex;
 +        flex-direction: row;
 +        padding: var(--c-menu-padding-exterior);
 +        background-color: var(--c-menu-background-color);
 +
 +        &-icono{
 +            padding: var(--c-menu-padding-exterior);
 +            width: var(--c-menu-width-icono);
 +        }
 +        &-titulo{
 +            font-weight: bold;
 +            font-size: var(--c-menu-option-titulo-font-size);
 +            color: var(--c-menu-option-titulo-color);
 +            padding: var(--c-menu-padding-interior);
 +            
 +            &--warning{
 +                color: var(--c-menu-option-titulo-color-warning);
 +            }
 +        }
 +        &-subtitulo{
 +            font-size: var(--c-menu-option-subtitulo-font-size);
 +            color: var(--c-menu-option-subtitulo-color);
 +            padding: var(--c-menu-padding-interior);
 +
 +            &--warning{
 +                color: var(--c-menu-option-subtitulo-color-warning);
 +            }
 +        }
 +        
 +        &--warning{
 +            color: var(--c-menu-background-color-warning);
 +            @include border(var(--c-menu-background-color-warning-hover),var(--border-radius-2));
 +
 +            :hover{
 +                color: var(--c-menu-background-color-warning-hover);
 +            }
 +        }
 +
 +        :hover{
 +            background-color: var(--c-menu-background-color-hover);
 +        }
 +    }
 +
 +    &__footer {
 +        font-size: var(--c-menu-logo-font-size);
 +        padding: var(--c-menu-padding-exterior);
 +        background-color: var(--c-menu-background-color);
 +        
 +    }
 +}
 +
 +</sxh>
 +
 +
 +<sxh html>
 +    <div class="c-menu-lateral">
 +
 +        <div class="c-menu-lateral__logo">
 +            Ajuda DANA
 +        </div>
 +
 +        <div class="c-menu-lateral__opciones">
 +            <div class="c-menu-lateral__opcion">
 +                <div class="c-menu-lateral__opcion-icono">
 +                    <i class="fa-solid fa-house fa-lg"></i>
 +                </div>
 +                <div class="c-menu-lateral__opcion-titulo">
 +                    Inicio
 +                </div>
 +            </div>
 +
 +            <div class="c-menu-lateral__opcion c-menu-lateral__opcion--warning">
 +                <div class="c-menu-lateral__opcion-icono">
 +                    <i class="fa-solid fa-circle-exclamation fa-lg g--color-red-3"></i>
 +                </div>
 +                <div>
 +                    <div class="c-menu-lateral__opcion-titulo c-menu-lateral__opcion-titulo--warning">
 +                        Casos activos
 +                    </div>
 +                    <div class="c-menu-lateral__opcion-subtitulo c-menu-lateral__opcion-subtitulo--warning">
 +                        Ver todos los casos activos
 +                    </div>
 +                </div>
 +            </div>
 +
 +            <div class="c-menu-lateral__opcion">
 +                <div class="c-menu-lateral__opcion-icono">
 +                    <i class="fa-solid fa-temperature-quarter fa-lg g--color-yellow"></i>
 +                </div>
 +                
 +                <div>
 +                    <div class="c-menu-lateral__opcion-titulo">
 +                        Voluntómetro
 +                    </div>
 +                    <div class="c-menu-lateral__opcion-subtitulo">
 +                        Medidor de voluntarios por localidad
 +                    </div>
 +                </div>
 +            </div>
 +
 +            <div class="c-menu-lateral__opcion">
 +                <div class="c-menu-lateral__opcion-icono">
 +                    <i class="fa-solid fa-magnifying-glass fa-lg g--color-red-4"></i>
 +                </div>
 +                
 +                <div>
 +                    <div class="c-menu-lateral__opcion-titulo">
 +                        Solicitar ayuda
 +                    </div>
 +                    <div class="c-menu-lateral__opcion-subtitulo">
 +                        Si necesitas asistencia
 +                    </div>
 +                </div>
 +            </div>
 +        
 +            <div class="c-menu-lateral__opcion">
 +                <div class="c-menu-lateral__opcion-icono">
 +                    <i class="fa-solid fa-heart fa-lg g--color-green-4"></i>
 +                </div>
 +                
 +                <div>
 +                    <div class="c-menu-lateral__opcion-titulo">
 +                        Ofrecer ayuda
 +                    </div>
 +                    <div class="c-menu-lateral__opcion-subtitulo">
 +                        Si puedes ayudar a otros
 +                    </div>
 +                </div>
 +            </div>
 +
 +            <div class="c-menu-lateral__opcion">
 +                <div class="c-menu-lateral__opcion-icono">
 +                    <i class="fa-solid fa-person fa-lg g--color-purple-4"></i>
 +                </div>
 +                
 +                <div>
 +                    <div class="c-menu-lateral__opcion-titulo">
 +                        Desaparecidos
 +                    </div>
 +                    <div class="c-menu-lateral__opcion-subtitulo">
 +                        Reportar o buscar
 +                    </div>
 +                </div>
 +            </div>
 +
 +
 +        </div>
 +
 +        <div class="c-menu-lateral__footer">
 +            <p class="c-menu-lateral__opcion-text c-menu-lateral__opcion-text--titulo">
 +                <i class="fa-solid fa-arrow-right-to-bracket g--color-grey-4"></i>  Inicio sesion
 +            </p>
 +        </div>
 +
 +    </div>
 +</sxh>
 ===== Bootstrap ===== ===== Bootstrap =====
 En el siguiente artículo [[https://getbootstrap.com/docs/5.0/utilities/api/|Utility API]], vemos como Boostrap ha creado algo muy similar a lo que estamos haciendo en clase. En el siguiente artículo [[https://getbootstrap.com/docs/5.0/utilities/api/|Utility API]], vemos como Boostrap ha creado algo muy similar a lo que estamos haciendo en clase.
Línea 532: Línea 738:
  
 ==== Ejercicio 5 ==== ==== Ejercicio 5 ====
-Dado la siguiente variable de SASS llamada ''$utilities$+Dado la siguiente variable de SASS llamada ''$utilities$''
  
 <sxh sass> <sxh sass>
 $utilities: ( $utilities: (
   "padding": (   "padding": (
-    usekeys:0,+    type:0,
     property: padding,     property: padding,
     class: g--padding-,     class: g--padding-,
Línea 549: Línea 755:
   ),   ),
   "font-size": (   "font-size": (
-    usekeys:1,+    type:1,
     property: font-size,     property: font-size,
     class: g--font-size-,     class: g--font-size-,
Línea 555: Línea 761:
  ),   ),
   "width": (   "width": (
-    usekeys:2,+    type:2,
     property: width,     property: width,
     class: g--width-,     class: g--width-,
Línea 564: Línea 770:
      
  );  );
-Python 
 </sxh> </sxh>
  
Línea 593: Línea 798:
 .g--width-9 {   width: 81px; } .g--width-9 {   width: 81px; }
 </sxh> </sxh>
 +
 +Usa siempre que puedas funciones de SASS
 +
 +<nodisp>
 +
 +<sxh>
 +@function getKeyFromIndex($index) {
 + $key:$index*10;
 + @return $key;
 +}
 +
 +@function getValueFromIndex($index) {
 + $value:$index*$index*1px;
 + @return $value;
 +}
 +
 +
 + 
 +$prefix: ".";
 +
 +@each $utility-key, $utility in $utilities {
 + @if ($utility-key!= "$keys") {
 + $type: map-get($utility, usekeys);
 + $property: map-get($utility, property);
 + $class: map-get($utility, class);
 +
 +
 + @if ($type==0) {
 + $values: map-get($utility, values);
 + @each $key, $value in $values {
 + #{$prefix}#{$class}#{$key} {
 + #{$property}: #{$value};
 + }
 + }
 + }
 + @if ($type==1){
 + $keys:map-get($utilities,"$keys");
 + $values: map-get($utility, values);
 + @for $index from 1 through length($values) {
 + $key: nth($keys,$index);
 + $value:nth($values,$index);
 +
 + #{$prefix}#{$class}#{$key} {
 + #{$property}: $value;
 + }
 + }
 + } 
 + @if ($type==2){
 + $max:map-get($utility, max);
 + @for $index from 1 through $max {
 + $key: getKeyFromIndex($index);
 + $value:getValueFromIndex($index);
 +
 + #{$prefix}#{$class}#{$key} {
 + #{$property}: $value;
 + }
 + }
 + }
 + }
 +}
 +
 +</sxh>
 +</nodisp>
 +
 +==== Ejercicio 6 ====
 +Sabiendo que ya tienes los botones del tema 1.
 +
 +Vamos ahora a hacer el componente ''c-dialog''.
 +
 +
 +<sxh html>
 +<div class="c-dialog">
 + <div class="c-dialog__title">
 + Ventana modal
 + <button class="c-dialog__close">
 + </div>
 + <div class="c-dialog__body">
 + bla bla
 +
 + <button class="c-button">Cancelar</button>
 + </div>
 +</div>
 +</sxh>
 +
 +{{:clase:daw:diw:1eval:evolucion_modal.png?1000|}}
 +
 +Crea 3 mixing para reusar el CSS de ''c-button'' y ''c-dialog__close'':
 +  * ''button-border''
 +  * ''button-background''
 +  * ''button-text''
  
  
clase/daw/diw/1eval/tema04.1732526359.txt.gz · Última modificación: 2024/11/25 10:19 por admin

Herramientas de la página

Excepto donde se indique lo contrario, el contenido de este wiki esta bajo la siguiente licencia: GNU Free Documentation License 1.3
GNU Free Documentation License 1.3 Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki