11
Puedes utilizar un div cuyo overflow:hidden + un pseudo-elemento ::before, transparente con un box-shadow azul.
#libro {
width: 150px;
height: 50px;
border-radius: 0 25px 25px 0;
position: relative;
overflow: hidden;
}
#libro::before {
content: "";
display: inline-block;
background: transparent;
width: 60px;
height: ...
respondida el 17 sep. 18 a las 21:44
enxaneta
3,49422 medallas de oro88 medallas de plata1919 medallas de bronce
8
Lo que quieres lograr no es posible hacerlo con css, sin embargo aquí te propongo una solución alternativa que te deja aplicar el estilo que quieras a tus opciones sin usar <select> ni <option>, solamente usando un <div> para el select, y varias <ul> para los options.
div {
margin: 2em;
padding: .5em;
border:...
respondida el 30 may. 17 a las 18:12
Adriana Hernández
1,61011 medalla de oro1313 medallas de plata3030 medallas de bronce
7
¿Entonces sería en este caso .show > & equivalente a .show > .nav-pills .nav-link?
Sí.
¿Se hereda todas los selectores padres con &?
Sí.
Según la documentación oficial (Inglés):
Sometimes it's useful to use a nested rule's parent selector in other
ways than the default. For instance, you might want to have special
styles for when ...
5
En el CSS estás aplicando esa fuente solamente a los elementos que tengan la clase description:
.description{
color: $text-color-black;
font-size: $size-9;
font-family: 'pruebas';
}
Por tanto, para que funcione tienes que ponerle esa clase a los elementos. Veamos varios elementos unos con esa clase y otros sin ella, la fuente en efecto funciona:
...
respondida el 27 mar. 19 a las 10:56
A. Cedano
73.7k1818 medallas de oro100100 medallas de plata196196 medallas de bronce
5
CSS es el lenguaje de estilo que cualquier navegador entiende para diseñar páginas web.
SCSS es un tipo especial de archivo para SASS, un programa escrito en Ruby que ensambla hojas de estilo CSS para un navegador, y para información SASS agrega muchas funciones adicionales a las variables de tipo CSS, anidamiento y más, lo que hace que escribir CSS sea más ...
4
Las filas (tr) de las tablas (table) no aceptan una altura menor a la de su contenido, y es por esto que no podemos animar el height.
Solución:
Podemos agregar un div en cada celda (td) al cual modificaremos su max-height con un valor lo suficientemente grande para mostrar el contenido de mayor altura.
Ejemplo
const toggle = e => {
document....
respondida el 10 ago. 19 a las 12:25
Marcos
26.2k66 medallas de oro2424 medallas de plata5858 medallas de bronce
3
Asegurate que en tu HTML cuentes con el meta-viewport, y un consejo al momento de alterar el width al 100%, con el padding que le estas dando el div generara scroll horizontal por lo cual con calc al 100% de la pagina le restaras 80px que seria la suma de los 40px a cada lado del div que le das con el padding.
#inner {
margin: 0 auto;
padding: ...
respondida el 28 dic. 17 a las 14:00
Santiago Roldan
1,07833 medallas de plata1313 medallas de bronce
3
El @content lo he usad en mixin con un enfoque similar al que propones:
Para trabajar mediaqueries donde desee como este ejemplo:
@mixin desde($size){
@if map-has-key($breakpoints,$size){
// Si el parámetro es el nombre de un tamaño, se extrae desde el map
@media screen and (min-width: map-get($breakpoints,$size)){
@content;...
3
Realmente creo que lo que buscas no existe. Yo también he buscado más de una vez este comportamiento (hacer referencia al elemento abuelo en vez de al padre pero no he podido encontrar nada).
Sin embargo, según tu ejemplo puedes cambiar de sentido los bloques del SASS:
.contenedor {
&.pausado {
.botones {
.play {
...
respondida el 4 abr. 17 a las 13:59
Francisco Romero
15.9k44 medallas de oro2727 medallas de plata5656 medallas de bronce
3
Según mi experiencia lo más cercano que hay sería usar el & o referenciador de selectores superiores (padres):
input {
&[type=text], &[type=password], &[type=email] {
&:focus {
border: 3px solid #AFDDFB;
transition: 100ms linear;
}
}
}
respondida el 10 sep. 16 a las 21:35
Shaz
28.1k1818 medallas de oro3636 medallas de plata5858 medallas de bronce
3
Por lo que se puede ver en sus repositorios (https://github.com/ironhack) normalmente utilizan sass para los estilos y después los compilan para convertirlos a css y es en ese proceso cuando le pasan un encrypt. Normalmente se hace para que ocupen mucho menos, optimización de performance y tal.
Para el css --> Sass(https://sass-lang.com/) Es lo más ...
3
No entiendo muy bien lo que pretendes hacer con esos asteriscos. Quizás se utilicen en SCSS, con el cual no estoy familiarizado. Pero lo que pretendes se puede hacer con CSS directamente. Lo único que tienes que hacer es plasmar ambos selectores separados por una coma para que se le apliquen las reglas a los dos.
#menu-header-neumaticos > a > span....
respondida el 5 jun. 20 a las 10:29
phpMyGuel
12k11 medalla de oro1515 medallas de plata3737 medallas de bronce
2
Lamentablemente el compilador de
SCSS que usa JSFiddle parece no soportar la función random()
No encuentro una fuente confiable que mencione esto, sin embargo si quitas todas las llamadas a random() el resto del CSS se genera correctamente
respondida el 5 ene. 16 a las 19:48
Carlos Muñoz
12.3k22 medallas de oro3838 medallas de plata6161 medallas de bronce
2
No sé exactamente a lo que te refieres.
Las posibilidades son infinitas, usando solamente HTML/CSS.
Mira estos ejemplos tomados de Codepen.
/* -------------------- Page Styles (not required) */
div { margin: 20px; }
/* -------------------- Select Box Styles: bavotasan.com Method (with special adaptations by ericrasch.com) */
/* ------------------...
respondida el 30 may. 17 a las 14:45
A. Cedano
73.7k1818 medallas de oro100100 medallas de plata196196 medallas de bronce
2
Puedes incluir el select dentro de un div y ponerle una clase al div y luego en css
.styled-select select {
// tus estilos
}
Echa un vistazo aquí para ver varios ejemplos
2
Alguna vez, tuve que hacer este mismo ejercicio, la forma en que lo resolvi por aquel entonces fue combinando unidades vw, calc, custom properties (opcional) y margin, algo así:
.container{
/* o la medida que se vaya a dejar de margen lateral*/
--margenes: 10vw;
padding-left: var(--margenes);
padding-right: var(--margenes);
}
/*también se puede ...
respondida el 6 feb. 18 a las 17:33
Edgar Gutiérrez
3,64077 medallas de plata2323 medallas de bronce
2
Los CSS de los componentes siempre tendrán máxima prioridad al ser los más restrictivos, no hace falta que los añadas al fichero angular-cli.json
Los demás ficheros tienes que ponerlos en el orden inverso de importancia, desde los más generales a los más específicos.
Si piensas que no funcionan, recuerda que tienes que reiniciar el servidor (si estás ...
respondida el 8 may. 18 a las 9:46
Pablo Lozano
39.1k77 medallas de oro4646 medallas de plata8383 medallas de bronce
2
Es un selector parecido al + pero en vez de que sólo tome el primer elemento encontrado, este va a tomar todos los elementos.
Por ejemplo: h2 + p seleccionará en rojo la primera etiqueta <p> que encuentre.
h2 + p {
color: red;
}
<h2>Título</h2>
<p>Párrafo 1</p>
<p>Párrafo 2</p>
<p>Párrafo 3</p&...
respondida el 13 ene. 19 a las 20:04
Kleith
3,66822 medallas de oro1212 medallas de plata2727 medallas de bronce
2
Podrías usar clip-path con un círculo para recortar la parte izquierda. Aunque, la verdad, la solución de enxaneta es mejor y más ingeniosa (no vas a necesitar un elemento SVG) y va a tener más soporte (clip-path no funciona en IE o Edge).
Pero aquí lo dejo como referencia:
#clip {
width: 200px;
height: 60px;
border-radius: 0 60px 60px 0;
...
respondida el 18 sep. 18 a las 14:30
2
Nunca he usado SASS, pero mirando la documentación he descubierto la función inspect( ). Usándola, vemos que
a {
color: inspect( map-get( $colors, "darkTurquoise" ) );
}
produce
a {
color: null;
}
Haciendo algunas pruebas mas
$colors: (
darkTurquoise: #000000
);
$themeConfig: (
linkColor: map-get($colors, "darkTurquoise")
);
a {
color:...
respondida el 20 abr. 19 a las 6:42
Trauma
24.7k44 medallas de oro3232 medallas de plata5858 medallas de bronce
2
Existe algo llamado "Cálculo del valor de especificidad de CSS". La Especificidad según lo estipulado por el W3C se calcula separando, primero Los Selectores de CSS y las reglas en cuatro categorías o grupos, y luego asignando a cada grupo una clasificación que asigna un valor ponderado. Para fines de representación gráfica, la primera agrupación ...
respondida el 1 may. 19 a las 0:59
Eduardo Munizaga
2,64411 medalla de oro1212 medallas de plata3232 medallas de bronce
2
Prueba con
white-space: nowrap;
respondida el 27 jun. 19 a las 19:46
neollob
1,23511 medalla de oro22 medallas de plata99 medallas de bronce
2
Se me ocurre que podrías hacer lo siguiente:
Buscas todos los elementos de la tabla que necesitan se redondeados (eg selector .round-number)
Por cada uno de los elementos, buscamos y guardamos el valor inicial de estos en un data-attribute ($el.data('attr', valor))
Luego, al llamar a la función redondear, por cada uno de los elementos recuperamos el data-...
respondida el 25 ago. 19 a las 14:16
Marcos
26.2k66 medallas de oro2424 medallas de plata5858 medallas de bronce
2
Tenías un error tipográfico id"row-de-pruebas" añadiendo un = se soluciona, si el problema persite puede ser debido a la jerarquia pero puedes usar !important para que te lo aplique.
#row-de-pruebas {
font-size: 50px;
}
<div class="row" id="row-de-pruebas">
<p>hola</p>
<div>hola 2</div>
</div>
respondida el 31 jul. 20 a las 10:51
Nicolas Oñate
2,5421010 medallas de plata2626 medallas de bronce
2
Lo que puedes hacer es utilizar la extension Live Sass Compiler ya que comentas que usas vscode, compila todo el sass del proyecto a la vez, no requiere que tengas ningun paquete de npm instalado, solo la instalas y la activas. Es la forma mas cómoda.
2
Una forma que podrías hacer para optimizar la forma en como compilas es crear un archivo dentro del folder scss llamado main.scss. Dentro de este archivo, debes importar tus archivos scss @import 'boostrapstyles', 'mystyles';. O haces un import para cada uno
@import boostrapstyles;
@import mystyles
Luego debes hacerle el watch a tu archivo main.scss y listo!...
2
Una forma sería como indicas, importando el fichero de variables en cada componente que quieras utilizar.
También podemos utilizar :root{} para encapsular las variables a nivel global, y reutilizarlas más adelante con var(--variable)
Por ejemplo, en tu archivo de variables:
:root{
--purple: #a434eb;
}
Después en el componente:
.clase-custom {
...
1
En el scss donde uses la variable, definela al principio añadiendo !default, asi:
$color-primary: #000 !default;
De esta forma tendra un color por defecto si no es definida y no te dara error.
Solo están habilitadas las respuestas de wiki más votadas con una longitud mínima y que no pertenecen a la comunidad
Etiquetas relacionadas
scss × 92css × 58
sass × 29
css3 × 23
html × 21
html5 × 14
angular × 11
javascript × 7
bootstrap × 6
nodejs × 5
typescript × 4
jquery × 3
bootstrap-4 × 3
gulp × 3
php × 2
vue.js × 2
ruby-on-rails × 2
angular7 × 2
webpack × 2
ionic4 × 2
flexbox × 2
angular9 × 2
atom-editor × 2
selectores-css × 2
gulp-sass × 2