Opportunity html

From Redazione
Jump to navigation Jump to search
Line 463: Line 463:
  
  
−
<div id="ooui-php-8" class="mw-htmlform-field-HTMLCheckField  oo-ui-layout oo-ui-labelElement oo-ui-fieldLayout oo-ui-fieldLayout-align-inline">
+
<div class="checkbox-container">
−
<div class="oo-ui-fieldLayout-body">
+
        <label class="checkbox-label">
−
<span class="oo-ui-fieldLayout-field"><span id="hidredirects" aria-disabled="false" class="oo-ui-widget oo-ui-widget-enabled oo-ui-inputWidget oo-ui-checkboxInputWidget">
+
            <input type="checkbox">
−
<input type="checkbox" tabindex="0" aria-disabled="false" name="Form announcement[As soon as possible]" value="0" class="oo-ui-inputWidget-input webfonts-changed">
+
            <span class="checkbox-custom rectangular"></span>
−
<span aria-disabled="false" class="oo-ui-checkboxInputWidget-checkIcon oo-ui-widget oo-ui-widget-enabled oo-ui-iconElement-icon oo-ui-icon-check oo-ui-iconElement oo-ui-labelElement-invisible oo-ui-iconWidget oo-ui-image-invert"></span>
+
        </label>
−
</span></span>
+
        <div class="input-title">Rectangular</div>
−
<span class="oo-ui-fieldLayout-header"><label for="ooui-php-4" class="oo-ui-labelElement-label">As soon as possible</label></span>
+
        </div>
−
</div>
+
       
 
</div>
 
</div>
  
 
<style>
 
<style>
−
.oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-body {
 
−
    display: table;
 
  
 +
.checkbox-container {
 +
    float: left;
 +
    width: 50%;
 +
    box-sizing: border-box;
 +
    text-align:center;
 +
  padding: 40px 0px;
 
}
 
}
−
.oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field {
+
 
−
     display: table-cell;
+
.input-title {
 +
    clear: both;
 +
    padding: 22px 0px 0px 0px;
 +
    font-size: 16px;
 +
    color: rgba(255,255,255,.6);
 +
     font-weight: 300;
 
}
 
}
−
.oo-ui-checkboxInputWidget {
+
 
−
     display: inline-block;
+
/* Styling Checkbox Starts */
−
    z-index: 0;
+
.checkbox-label {
 +
     display: block;
 
     position: relative;
 
     position: relative;
−
     line-height: 1.42857143em;
+
    margin: auto;
−
     white-space: nowrap;
+
    cursor: pointer;
 +
    font-size: 22px;
 +
     line-height: 24px;
 +
    height: 24px;
 +
     width: 24px;
 +
    clear: both;
 
}
 
}
  
−
.oo-ui-checkboxInputWidget [type='checkbox'] {
+
.checkbox-label input {
−
     position: relative;
+
     position: absolute;
−
    max-width: none;
 
−
    width: 1.42857143em;
 
−
    height: 1.42857143em;
 
−
    margin: 0;
 
 
     opacity: 0;
 
     opacity: 0;
−
     z-index: 1;
+
     cursor: pointer;
 +
}
 +
 
 +
.checkbox-label .checkbox-custom {
 +
    position: absolute;
 +
    top: 0px;
 +
    left: 0px;
 +
    height: 24px;
 +
    width: 24px;
 +
    background-color: transparent;
 +
    border-radius: 5px;
 +
    transition: all 0.3s ease-out;
 +
    -webkit-transition: all 0.3s ease-out;
 +
    -moz-transition: all 0.3s ease-out;
 +
    -ms-transition: all 0.3s ease-out;
 +
    -o-transition: all 0.3s ease-out;
 +
    border: 2px solid #FFFFFF;
 
}
 
}
  
  
−
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox'] + span {
+
.checkbox-label input:checked ~ .checkbox-custom {
−
     cursor: pointer;
+
    background-color: #FFFFFF;
−
     -webkit-transition: background-color 100ms,border-color 100ms,box-shadow 100ms;
+
     border-radius: 5px;
−
     -moz-transition: background-color 100ms,border-color 100ms,box-shadow 100ms;
+
     -webkit-transform: rotate(0deg) scale(1);
−
     transition: background-color 100ms,border-color 100ms,box-shadow 100ms;
+
    -ms-transform: rotate(0deg) scale(1);
 +
     transform: rotate(0deg) scale(1);
 +
     opacity:1;
 +
    border: 2px solid #FFFFFF;
 
}
 
}
  
−
:root .oo-ui-checkboxInputWidget [type='checkbox'] + span {
 
−
    border-width: 1px;
 
−
}
 
  
−
.oo-ui-checkboxInputWidget [type='checkbox'] + span {
+
.checkbox-label .checkbox-custom::after {
−
    background-color: #fff;
 
−
    background-size: 0 0;
 
−
    -webkit-box-sizing: border-box;
 
−
    -moz-box-sizing: border-box;
 
−
    box-sizing: border-box;
 
 
     position: absolute;
 
     position: absolute;
−
     left: 0;
+
    content: "";
−
     width: 1.42857143em;
+
     left: 12px;
−
     height: 1.42857143em;
+
     top: 12px;
−
     border-color: #72777d;
+
     height: 0px;
−
     border-style: solid;
+
    width: 0px;
−
     border-radius: 2px;
+
     border-radius: 5px;
−
     border-width: 0;
+
    border: solid #009BFF;
 +
     border-width: 0 3px 3px 0;
 +
    -webkit-transform: rotate(0deg) scale(0);
 +
    -ms-transform: rotate(0deg) scale(0);
 +
    transform: rotate(0deg) scale(0);
 +
    opacity:1;
 +
    transition: all 0.3s ease-out;
 +
    -webkit-transition: all 0.3s ease-out;
 +
    -moz-transition: all 0.3s ease-out;
 +
     -ms-transition: all 0.3s ease-out;
 +
     -o-transition: all 0.3s ease-out;
 
}
 
}
  
−
.oo-ui-image-invert.oo-ui-icon-check, .mw-ui-icon-check-invert:before {
+
 
−
    background-image: url(/w/en/load.php?modules=oojs-ui-core.icons&image=check&variant=invert&format=rasterized&skin=vector&version=18i3v);
+
.checkbox-label input:checked ~ .checkbox-custom::after {
−
    background-image: linear-gradient(transparent,transparent),url(data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%222…7 14.17L2.83 10l-1.41 1.41L7 17 19 5l-1.41-1.42z%22/%3E %3C/g%3E%3C/svg%3E);
+
  -webkit-transform: rotate(45deg) scale(1);
 +
  -ms-transform: rotate(45deg) scale(1);
 +
  transform: rotate(45deg) scale(1);
 +
  opacity:1;
 +
  left: 8px;
 +
  top: 3px;
 +
  width: 6px;
 +
  height: 12px;
 +
  border: solid #009BFF;
 +
  border-width: 0 2px 2px 0;
 +
  background-color: transparent;
 +
  border-radius: 0;
 
}
 
}
−
.oo-ui-checkboxInputWidget * {
+
 
−
     font: inherit;
+
 
−
     vertical-align: middle;
+
 
 +
/* For Ripple Effect */
 +
.checkbox-label .checkbox-custom::before {
 +
     position: absolute;
 +
    content: "";
 +
    left: 10px;
 +
    top: 10px;
 +
    width: 0px;
 +
     height: 0px;
 +
    border-radius: 5px;
 +
    border: 2px solid #FFFFFF;
 +
    -webkit-transform: scale(0);
 +
    -ms-transform: scale(0);
 +
    transform: scale(0);  
 
}
 
}
  
−
.oo-ui-fieldLayout.oo-ui-labelElement.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header {
+
.checkbox-label input:checked ~ .checkbox-custom::before {
−
     padding-top: 0;
+
    left: -3px;
−
     padding-bottom: 0;
+
    top: -3px;
−
     padding-left: 0.42857143em;
+
    width: 24px;
 +
    height: 24px;
 +
    border-radius: 5px;
 +
    -webkit-transform: scale(3);
 +
    -ms-transform: scale(3);
 +
    transform: scale(3);
 +
    opacity:0;
 +
    z-index: 999;
 +
    transition: all 0.3s ease-out;
 +
    -webkit-transition: all 0.3s ease-out;
 +
     -moz-transition: all 0.3s ease-out;
 +
     -ms-transition: all 0.3s ease-out;
 +
     -o-transition: all 0.3s ease-out;
 
}
 
}
−
.mw-htmlform-ooui .oo-ui-fieldLayout.oo-ui-labelElement > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header {
+
 
−
     line-height: 1.14285714em;
+
 
−
}
+
 
−
.oo-ui-fieldLayout.oo-ui-labelElement > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header {
+
 
−
     padding-bottom: 0.28571429em;
+
/* Style for Circular Checkbox */
 +
.checkbox-label .checkbox-custom.circular {
 +
     border-radius: 50%;
 +
     border: 2px solid #FFFFFF;
 
}
 
}
−
.oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header {
 
−
    vertical-align: middle;
 
−
}
 
−
.oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header, .oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field {
 
−
    display: table-cell;
 
−
}
 
−
 
 
</style>
 
</style>
−
 
  
 
<span class="ci_form_section_help">
 
<span class="ci_form_section_help">

Revision as of 15:15, 4 March 2020

Type of opportunity
Title The title of the announcement for publishing.
Provider Who is providing and funding this opportunity?
Description
Target country To citizens of what country this announcement is addressed?
Funding information Please enter the funding related to this announcement, indicating overall amount, currency, conditions, and any related information.
Requisites Please enter who can access this opportunity and the requisites.
Url official Please enter the official url with further information
Deadline
Rectangular
If the deadline has to be considered "as soon as possible" please check the related checkbox and enter the date in which the listing will be removed.

Retrieved from "https://culturaitaliana.org/w/index.php?title=Form:Opportunity_html&oldid=2674"