How do I format the paper-icon-button-lite to match the paper-icon-button? (i.e., No outline and no shadow.) How did they accomplish this in this paper-icon-button-lite demo? Whatever they did, it apparently was not necessary in this paper-icon-button demo. Why not? What am I missing?
Here is my jsBin.
http://jsbin.com/vatuyopodu/1/edit?html,output
<!doctype html>
<head>
<meta name="description" content="iron-data-table beta3">
<meta charset="utf-8">
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="paper-icon-button/paper-icon-button.html" rel="import">
<link href="paper-icon-button/paper-icon-button-lite.html" rel="import">
</head>
<body>
<dom-module id="x-foo">
<style is="custom-style">
:host {
font-family: arial, sans-serif;
}
button[is=paper-icon-button-light] {
width: 40px;
height: 40px;
padding: 8px;
margin: 10px;
}
button[is=paper-icon-button-light]> img {
width: 24px;
height: 24px;
}
</style> <template>
<p>
<paper-icon-button src="https://assets-cdn.github.com/images/modules/logos_page/Octocat.png" alt="octocat" title="octocat"></paper-icon-button>
<code>paper-icon-button</code>
</p>
<p>
<button is="paper-icon-button-light" title="octocat">
<img src="https://assets-cdn.github.com/images/modules/logos_page/Octocat.png" alt="octocat">
</button>
<code>paper-icon-button-lite</code>
</p>
<p>How do I format the <code>paper-icon-button-lite</code> to match the <code>paper-icon-button</code>? (i.e., No outline and no shadow.) How did they accomplish this in the demo? What am I missing?</p>
<a href="https://elements.polymer-project.org/elements/paper-icon-button?view=demo:demo/paper-icon-button-light.html&active=paper-icon-button-light">
Here is the demo</a>.
</template>
<script>
document.addEventListener('WebComponentsReady', function() {
Polymer({
is: 'x-foo'
});
});
</script>
</dom-module>
<x-foo></x-foo>
</body>
Adding transparent background and removing border to button[is=paper-icon-button-light] should do the trick
button[is=paper-icon-button-light] {
width: 40px;
height: 40px;
padding: 8px;
margin: 10px;
border:none;
background-color:transparent;
}
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="paper-icon-button/paper-icon-button.html" rel="import">
<link href="paper-icon-button/paper-icon-button-lite.html" rel="import">
<dom-module id="x-foo">
<style>
:host {
font-family: arial, sans-serif;
}
button[is=paper-icon-button-light] {
width: 40px;
height: 40px;
padding: 8px;
margin: 10px;
border: none;
background-color: transparent;
}
button[is=paper-icon-button-light] > img {
width: 24px;
height: 24px;
}
</style>
<template>
<p>
<paper-icon-button src="https://assets-cdn.github.com/images/modules/logos_page/Octocat.png" alt="octocat" title="octocat"></paper-icon-button>
<code>paper-icon-button</code>
</p>
<p>
<button is="paper-icon-button-light" title="octocat">
<img src="https://assets-cdn.github.com/images/modules/logos_page/Octocat.png" alt="octocat">
</button>
<code>paper-icon-button-lite</code>
</p>
</template>
<script>
Polymer({
is: 'x-foo'
});
</script>
</dom-module>
<x-foo></x-foo>
Related
I have edited the default checkboxes look of HTML and created my own styles, the thing is that the property position of the checkbox makes it bypass other elements, how can I avoid that?
Example of what is happening: https://www.screencast.com/t/ELwluGBaX
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap css -->
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,500,700&display=swap" rel="stylesheet">
<!-- Our css -->
<title>Session Asigment</title>
<style>
label::before {
content: "";
border: solid 1px #FF6E0B;
position: absolute;
width: 1.4em;
height: 1.4em;
border-radius: 3px;
}
input[type=checkbox] {
display: none !important;
}
.checkbox-titles [type=checkbox]:checked + label:after {
/* check */
font-family: "Font Awesome 5 Free";
color: #fff;
content: "\f00c";
font-weight: 900;
padding-left: 0.2em;
padding-bottom: 0.2em;
/* Label */
position: absolute;
width: 1.4em;
height: 1.4em;
border-radius: 3px;
background-color: #FF6E0B;
}
</style>
</head>
<body>
<div class="checkbox-titles">
<input type="checkbox" value="test" id="test">
<label for="test"></label>
</body>
<!-- Bootstrap and jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<!--select2-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js" defer></script>
</html>
Position absolute removes the item from the flow of the DOM.
Elements that are not positioned absolutely act as if the ones that are dont even exist.
I suggest using something like Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Or i suggest using the normal positioning, position: static
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap css -->
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,500,700&display=swap" rel="stylesheet">
<!-- Our css -->
<title>Session Asigment</title>
<style>
label::before {
content: "";
border: solid 1px #FF6E0B;
position: absolute;
width: 1.4em;
height: 1.4em;
border-radius: 3px;
}
input[type=checkbox] {
display: none !important;
}
.checkbox-titles [type=checkbox]:checked + label:after {
/* check */
font-family: "Font Awesome 5 Free";
color: #fff;
content: "\f00c";
font-weight: 900;
padding-left: 0.2em;
padding-bottom: 0.2em;
/* Label */
position: absolute;
width: 1.4em;
height: 1.4em;
display: inline-block;
border-radius: 3px;
background-color: #FF6E0B;
}
.checkbox-titles label {
width: 1.4rem;
height: 1.4rem;
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="checkbox-titles">
<input type="checkbox" value="test" id="test">
<label for="test"></label><span>Test Bla Bla Bla</span>
</body>
<!-- Bootstrap and jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<!--select2-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js" defer></script>
</html>
i cant style my hr tag between h1 and button,if i use a older version of bootstrap that is working,but with 5.0.0 isnt.
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="row">
<h1><strong>THE BIGGEST STARTUP EVENT OF THE YEAR</strong></h1>
<hr>
<button class="btn btn-primary btn-xl">Find out more</button>
</div>
</div>
</body>
</html>
this is the style sheet
body,
html {
width: 100%;
height: 100%;
font-family: 'Montserrat', sans-serif;
background: url(header.jpg) no-repeat center center fixed;
background-size: cover;
}
}
hr{
border-color: #F05F44;
border-width: 3px;
max-width: 65px;
You need to override the bootstrap style. That can be done by using !important on the style.
body,
html {
background: url(header.jpg) no-repeat center center fixed;
background-size: cover;
font-family: 'Montserrat', sans-serif;
height: 100vh;
width: 100vw;
}
hr {
border-color: #F05F44 !important;
height: 3px !important;
max-width: 65px !important;
}
<link href="//fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="//cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<div class="container">
<div class="row">
<h1><strong>THE BIGGEST STARTUP EVENT OF THE YEAR</strong></h1>
<hr>
<button class="btn btn-primary btn-xl">Find out more</button>
</div>
</div>
do hr.<className> for edit any hr tag
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Hello, world!</title>
</head>
<style>
body,
html {
width: 100%;
height: 100%;
font-family: 'Montserrat', sans-serif;
background: url(header.jpg) no-repeat center center fixed;
background-size: cover;
}
hr.new1 {
border-top: 1px solid red;
}
/* Dashed red border */
hr.new2 {
border-top: 1px dashed red;
}
/* Dotted red border */
hr.new3 {
border-top: 1px dotted red;
}
</style>
<body>
<div class="row">
<h1><strong>THE BIGGEST STARTUP EVENT OF THE YEAR</strong></h1>
<hr class="new1">
<hr class="new2">
<hr class="new3">
<button class="btn btn-primary btn-xl">Find out more</button>
</div>
</body>
</html>
I already did a circle with my input of type color I need that circle to be inside of another one, I already tried out with some things but doesn't work with an input, I would like to know how can I do that?
The circle its actually inside of the other one the thing it's you can't actually see it, how can I solve this?
This is how it should looks like: https://www.screencast.com/t/0Xw9Sv4NDgqT
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap css -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Our css -->
<title>Colour picker</title>
<style>
input[type="color"] {
opacity: 0;
display: block;
width: 22px;
height: 22px;
border: none;
border-radius: 50% !important;
position: relative;
}
#color-picker-wrapper {
width: fit-content;
height: fit-content;
border-radius: 50% !important;
position: relative;
}
.pick-color{
font-family: 'Nunito Sans', sans-serif;
color: #A2A2A2 ;
}
.outer {
background-color:white;
width:2rem; /* You can define it by % also */
height:2rem; /* You can define it by % also */
position:relative;
border:2px solid #A2A2A2 ;
border-radius: 50%;
}
.inner {
top: 25%; left:25%; /* of the container */
width:50%; /* of the container */
height:50%; /* of the container */
border:1px solid black;
border-radius: 50%;
opacity: 0;
}
</style>
</head>
<body>
<!--<div id="wrapper" style="text-align: center;">
<input type="text" id="hex">
<input type="color" id="color">
</div>-->
<div class="container-fluid">
<div class="row d-flex justify-content-center mt-3">
<p class="mr-2 pick-color"><strong>Pick a color</strong></p>
<div id="color-picker-wrapper">
<input type="color" id="color-picker">
</div>
</div>
<div class="outer circle shapeborder">
<input type="color" class="inner">
</div>
</div>
<!--This is for testing, this change the background of the body and set the color HEX to the input-->
<script>
/*let inputColor = document.querySelector('#color');
let inputHex = document.querySelector('#hex');
let borderColor = document.getElementById('color');
let colorWrapper = document.getElementById('wrapper');
colorWrapper.style.backgroundColor = borderColor.value;
inputColor.addEventListener('input', () => {
let color = inputColor.value;
inputHex.value = color;
document.body.style.backgroundColor = color;
});*/
var color_picker = document.getElementById("color-picker");
var color_picker_wrapper = document.getElementById("color-picker-wrapper");
color_picker.onchange = function() {
color_picker_wrapper.style.backgroundColor = color_picker.value;
}
color_picker_wrapper.style.backgroundColor = color_picker.value;
</script>
</body>
</html>
The idea here is that you will have:
An outermost div (#color-picker-container): responsible for the outer border.
An inner div (#color-picker-wrapper) a little bit smaller: responsible for presenting the picked color.
An innermost input (#color-picker): set opacity:0 to be hidden away
const color_picker = document.getElementById("color-picker");
const color_picker_wrapper = document.getElementById("color-picker-wrapper");
color_picker.onchange = function() {
color_picker_wrapper.style.backgroundColor = color_picker.value;
}
color_picker_wrapper.style.backgroundColor = color_picker.value;
input[type="color"] {
opacity: 0;
}
#color-picker-container {
border-radius: 50%;
border: 2px solid #A2A2A2;
width: 1.5rem;
height: 1.5rem;
display: flex;
justify-content: center;
align-items: center;
}
#color-picker-wrapper {
border-radius: 50%;
width: 80%;
height: 80%;
}
.pick-color {
font-family: 'Nunito Sans', sans-serif;
color: #A2A2A2;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap css -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Our css -->
<title>Colour picker</title>
</head>
<body>
<div class="container-fluid">
<div class="row d-flex justify-content-center mt-3">
<p class="mr-2 pick-color"><strong>Pick a color</strong></p>
<div id="color-picker-container">
<div id="color-picker-wrapper">
<input type="color" id="color-picker">
</div>
</div>
</div>
</div>
</body>
</html>
I have this animation that works well if appllied to some div background image but when I tried to put some elements inside the content go below, I tried disabling content: '' but I lost the animation effect.
The goal here is invert colors of all elements, text and image using the CSS filter, I tried with the actual settings it works as expected and I am getting the result I want (white/red).
The only issue I am facing is putting the content inside the div :
html,
body {
background-color: #ddd;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.banner {
width: 936px;
height: 288px;
color: #fff;
background-color: #cc0000;
transition: 2s all;
}
.logo {
width: 298px;
height: 91px;
}
.banner:before {
display: block;
height: 100%;
content: "";
background: inherit;
background-clip: content-box;
box-sizing: inherit;
transition: 2s all;
padding-left: 0;
filter: brightness(0%) sepia(1) invert(1);
}
.banner:hover:before {
padding-left: 936px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Demo</title>
<script src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
</head>
<body>
<div class="banner">
<img class="logo" src='https://image.flaticon.com/icons/svg/1852/1852293.svg' />
<p>Coming soon</p>
<div class="container">
<div class="row">
<div class="col-xs-3">
<h1>89</h1>
</div>
<div class="col-xs-1">
<h1>:</h1>
</div>
<div class="col-xs-3">
<h1>60</h1>
</div>
<div class="col-xs-1">
<h1>:</h1>
</div>
<div class="col-xs-3">
<h1>24</h1>
</div>
</div>
</div>
</div>
</body>
</html>
I am currently using the latest version of bootstrap and I have created a landing page. However, the success button is not clickable on 13inch/15inch laptops and desktops which is weird.
The URL is here.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Loot.es - First CSGO SMS Service in the World. We send out notifications of matches live to our users for major Counter Strike Global Offensive tournaments. ">
<meta name="author" content="nivekyo">
<link rel="icon" href="img/favicon.ico">
<title>Loot.es - CSGO SMS Service</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" >
<link href="css/landing.css" rel="stylesheet" >
</head>
<body>
<div class="container">
<h1 class="title">The notification we've all been waiting for.</h1>
<p class="lead" style="font-size: 1.2em;">Get notified when a team wins at all major Counter-Strike tournaments.</p>
<div class="left"><img class="bubble" src="img/speech.png"/></div>
<p class="join"><a class="btn btn-success btn-lg" role="button" href="https://steamcommunity.com/groups/lootes"><i class="fa fa-steam-square"></i> Join now, it's free.</a></p>
</div>
<footer class="footer">
<div class="container">
<p class="text-muted">
Privacy Policy | #nivekyo
</p>
</div>
</footer>
</body>
</html>
CSS:
#import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);
#media (min-width: 1200px) {
.container {
width: 560px;
padding-top: 200px;
}
}
html {
position: relative;
min-height: 100%;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
padding-top: 50px;
}
.container {
text-align: center;
}
.title {
font-family: 'Open Sans Condensed', sans-serif;
}
.join {
padding-top: 30px;
}
a:hover {
text-decoration: none;
}
img.bubble {
padding-top: 20px;
width: auto;
height: 180px;
}
.left {
text-align: left;
}
With much thanks!
It is not because of 15" Screen, but it is because of the padding on the footer and .container. Solution:
footer, footer .container {padding-top: 0;}
Adding the above code to landing.css works.