3

estuve creado un estilo css para mi proyecto funciona todo bien el tema es que no me toma una clase en css para poner el fuente mas grande y en negrita.

el problema esta en .metric .title span

.metric {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 20px;
margin-bottom: 30px;
border: 1px solid #DCE6EB;
}
.metric .icon {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
float: left;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
}
.metric .icon.success i {
    font-size: 25px;
    color: #4CAF50;
}
.metric .icon.gray i {
    font-size: 25px;
    color:#9E9E9E;
}
.metric .icon.danger i {
    font-size: 25px;
    color: #E42729;
}
.metric .icon .warning i {
    font-size: 25px;
    color: #ffa000 ;
}

.metric p {
    margin-bottom: 0;
    line-height: 1.2;
    text-align: right;
}
.metric .title span {
color: #6f6f6fe8;
font-weight: bold;
font-size: 15px;
}
.metric .number {
    display: block;
    font-size: 28px;
    font-weight: 300;
}
.metric .title {
    font-size: 16px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
    <div class="col-md-4">

        <div class="metric">
        <span class="icon success"><i class="icon-check-square"></i></span>
        <p>
        <span class="number">1</span>
        <span class="title">CONCRETADAS</span>
        </p>
        </div>
        
        </div>

        <div class="col-md-4">

            <div class="metric">
            <span class="icon gray"><i class="icon-clock"></i></span>
            <p>
            <span class="number">1</span>
            <span class="title">EN PROCESO</span>
            </p>
            </div>
            
            </div>

            <div class="col-md-4">

                <div class="metric">
                <span class="icon danger"><i class="icon-x-square"></i></span>
                <p>
                <span class="number">1</span>
                <span class="title">RECHAZADAS</span>
                </p>
                </div>
                
                </div>
  
</div>

3 respuestas 3

3

Puedes alcanzar el span con la clase title haciendo esto simplemente:

span.title {
    color: #6f6f6fe8;
    font-weight: bold;
    font-size: 15px;
}

Veamos si funciona:

.metric {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 20px;
margin-bottom: 30px;
border: 1px solid #DCE6EB;
}
.metric .icon {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
float: left;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
}
.metric .icon.success i {
    font-size: 25px;
    color: #4CAF50;
}
.metric .icon.gray i {
    font-size: 25px;
    color:#9E9E9E;
}
.metric .icon.danger i {
    font-size: 25px;
    color: #E42729;
}
.metric .icon .warning i {
    font-size: 25px;
    color: #ffa000 ;
}

.metric p {
    margin-bottom: 0;
    line-height: 1.2;
    text-align: right;
}
span.title  {
    color: #6f6f6fe8;
    font-weight: bold;
    font-size: 15px;
}

.metric .number {
    display: block;
    font-size: 28px;
    font-weight: 300;
}
.metric .title {
    font-size: 16px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
    <div class="col-md-4">

        <div class="metric">
        <span class="icon success"><i class="icon-check-square"></i></span>
        <p>
        <span class="number">1</span>
        <span class="title">CONCRETADAS</span>
        </p>
        </div>
        
        </div>

        <div class="col-md-4">

            <div class="metric">
            <span class="icon gray"><i class="icon-clock"></i></span>
            <p>
            <span class="number">1</span>
            <span class="title">EN PROCESO</span>
            </p>
            </div>
            
            </div>

            <div class="col-md-4">

                <div class="metric">
                <span class="icon danger"><i class="icon-x-square"></i></span>
                <p>
                <span class="number">1</span>
                <span class="title">RECHAZADAS</span>
                </p>
                </div>
                
                </div>
  
</div>

En tu caso, esto también funcionaría:

.metric span.title  {
    /*código*/
}

NOTA:

Debes estar atento a la lógica que sigues en los estilos. Por ejemplo, al tamaño de la fuente le asignas font-size: 15px; cuando tratas el span y luego cambias ese valor aquí:

.metric .title {
    font-size: 16px;
}
1

Tenias la clase, mal definida, aqui la tienes hecha

.metric .title {
color: #6f6f6fe8;
font-weight: bold;
font-size: 15px;
}
1

Saludos. La razón por la que no alcanzas a span es la siguiente:

/* Aquí se asume que «span» se encuentra dentro del elemento 
   que contenga la clase «.title» */
.metric .title span {
  color: #6f6f6fe8;
  font-weight: bold;
  font-size: 15px;
}

Pero tienes estructura el código HTML así:

<div class="metric">
  <span class="icon gray"><i class="icon-clock"></i></span>
    <p>
      <span class="number">1</span>
      <span class="title">EN PROCESO</span>
   </p>
</div>

En tal caso, la alcanzarías así:

.metric .title {
  color: #6f6f6fe8; 
  font-weight: bold;
  font-size: 15px;
}

Pero para efecto de soporte en la mayoría de los navegadores se podría utilizar así: rgba(111, 111, 111, 0.91)

.metric .title {
  /* Cambiar */
  color: #6f6f6fe8;

 /* Por */
  color: rgba(111, 111, 111, 0.91);

  font-weight: bold;
  font-size: 15px;
}

Problemos el ejemplo ahora:

@import url("https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css");

.metric {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  padding: 20px;
  margin-bottom: 30px;
  border: 1px solid #DCE6EB;
}
.metric .icon {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  float: left;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
}
.metric .icon.success i {
  font-size: 25px;
  color: #4CAF50;
}
.metric .icon.gray i {
  font-size: 25px;
  color:#9E9E9E;
}
.metric .icon.danger i {
  font-size: 25px;
  color: #E42729;
}
.metric .icon .warning i {
  font-size: 25px;
  color: #ffa000 ;
}

.metric p {
  margin-bottom: 0;
  line-height: 1.2;
  text-align: right;
}

/* Cambia */
.metric .title span {
  color: #6f6f6fe8;
  font-weight: bold;
  font-size: 15px;
}

/* Por */
.metric .title {
  color: rgba(111, 111, 111, 0.91); /* Es el mismo color y canal alfa que #6f6f6fe8 */
  font-weight: bold;
  font-size: 15px;
}
.metric .number {
  display: block;
  font-size: 28px;
  font-weight: 300;
}
.metric .title {
  font-size: 16px;
}
<div class="row">
	<div class="col-md-4">
		
		<div class="metric">
			<span class="icon success"><i class="icon-check-square"></i></span>
			<p>
				<span class="number">1</span>
				<span class="title">CONCRETADAS</span>
			</p>
		</div>
		
	</div>
	
	<div class="col-md-4">
		
		<div class="metric">
			<span class="icon gray"><i class="icon-clock"></i></span>
			<p>
				<span class="number">1</span>
				<span class="title">EN PROCESO</span>
			</p>
		</div>
		
	</div>
	
	<div class="col-md-4">
		
		<div class="metric">
			<span class="icon danger"><i class="icon-x-square"></i></span>
			<p>
				<span class="number">1</span>
				<span class="title">RECHAZADAS</span>
			</p>
		</div>
		
	</div>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.