cordova-mobile-app-template/library/basic.css

Simple and fully customizable user interface template. Design for mobile app development on Apache Cordova framework or Ionic / Capacitor Native Runtime. Platforms: Android, iOS.

/* Bismillah */

/*


(v1.7) Create interactive user interfaces with basic programming skills.
- Project Site: https://bug7a.github.io/basic.js/


INFORMATION:

Started Date: 25 October 2020
Developer: Bugra Ozden
Email: bugra.ozden@gmail.com
Personal Site: http://bugraozden.com


LICENSE:

You are free:

to Share — to copy, distribute and transmit the work
to Remix — to adapt the work
to make commercial use of the work

https://creativecommons.org/licenses/by/4.0/

Have Fun.


*/

@font-face {
    
    font-family: opensans;
    src: url(font/open-sans/OpenSans-Regular.ttf);
    
}

@font-face {
    
    font-family: opensans-bold;
    src: url(font/open-sans/OpenSans-Bold.ttf);
    
}

.basic_box, .basic_label, .basic_button, .basic_textbox-main, .basic_image  {

    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; 

    -webkit-touch-callout: none;
    -webkit-text-size-adjust: auto;
    user-select: none;
    -webkit-user-select: none;

}

/* UI COMPONENTS */
.basic_box {
    
    position: absolute;
    display: block;
    /* visibility: hidden; */
    overflow-x: hidden;
    overflow-y: hidden;
    width: 100px;
    height: 100px;
    background-color: whitesmoke;
    border-radius: 0px;
    border: 0px solid gray;
    font-family: opensans;
    font-size: 16px;
    text-align: left;
    color: #4A4A4A;
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    pointer-events: none;
    /* firefoxda da scroll görünmesin */
    scrollbar-width: none;
    
}

.basic_label {
    
    position:absolute;
    display: block;
    /* visibility: hidden; */
    overflow: hidden;
    font-family: opensans;
    font-size: 20px;
    text-align: left;
    color:#4A4A4A;
    background-color: transparent;
    border: 0px solid #4A4A4A;  
    padding: 0px;
    /* istenen genişlikten paddingi çıkartarak işlem yapıyor */
    box-sizing: border-box; 
    pointer-events:none;
    
}

.basic_button {
    
    position:absolute;
    display: block;
    /* visibility: hidden; */
    overflow: hidden;
    font-family: opensans;
    font-size: 20px;
    text-align: center;
    color: rgba(0, 0, 0, 0.65);
    border: 1px solid rgba(0, 0, 0, 0.40);
    box-shadow: inset 0px -2px 0px 0px rgba(0, 0, 0, 0.40);
    margin: 0px;
    box-sizing: border-box;
    border-radius: 4px;
    background-color: #689BD2;
    background-image: url("img/button-background.png");
    background-position: left top;
    background-repeat: no-repeat;
    background-size:100% 100%;
    pointer-events:auto;
    cursor: pointer;
    
}

.basic_button.minimal {
    
    border: 0px solid rgba(0, 0, 0, 0.40);
    box-shadow: none;
    background-image:none;
    
}

.basic_button:focus {
    
    outline: none;
    
}

.basic_button:disabled {
    
    opacity: 0.6 !important;
    cursor: default;
    
}

.basic_textbox-main {
    position:absolute;
    display: block;
    /* visibility: hidden; */
}

.basic_textbox {
    
    position:absolute;
    font-family: opensans;
    font-size: 20px;
    text-align: left;
    color:#4A4A4A;
    background-color: #FFFFFF;
    left:0px;
    right:0px;
    border: 1px solid #4A4A4A;
    width: 270px;
    height: 50px;    
    padding: 12px 15px;
    margin: 0px;
    box-sizing: border-box;
    border-radius: 4px;
    background-image: url("img/textbox-background.png");
    background-position: left top;
    background-repeat: no-repeat;
    background-size:100% 100%;
    pointer-events:auto;
    
}

.basic_textbox.minimal {
    
    border: 0px solid #4A4A4A;
    background-image:none;
    
}

.basic_textbox:focus {
    
    outline: none;
    padding: 12px 14px;
    background-color: #FFFFFF;
    border: 2px solid #689BD2;
    
}

.basic_textbox.minimal:focus {
    
    outline: none;
    padding: 12px 15px;
    border: 0px solid steelblue;
    
}

.basic_textbox:disabled {
    
    opacity: 0.6 !important;
    
}

.basic_textbox-title {
    
    position: absolute;
    background-color: transparent;
    font-family: opensans;
    font-size: 16px;
    text-align: left;
    color: #4A4A4A;
    height: 28px;
    top: -28px;
    left: 0px;
    padding: 2px;
    padding-left: 0px;
    border:0px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    background-image:none;
    
}

.basic_image {
    
    position:absolute;
    display: block;
    /* visibility: hidden; */
    overflow: hidden;
    background-color: transparent;
    border: 0px solid #000000;
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    border-radius: 0px;
    pointer-events:none;
    
}

.basic_box::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}
  
.basic_box::-webkit-scrollbar-track {
    background: transparent;
}

.basic_box::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.basic_box::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.4);
}